Vue, React! Die Unterschiede des State Managements

Veröffentlicht am 2021-11-24 08:05

Das State Management ist eine schwerige Sache im React nach der mehrjährigen Pause zu nutzen. Derzeit ist Vue.js mein beliebtes Framework. So in diesem Artikel werde ich beide Frameworks vergleichen.

Vue

Im Vue.js das State der Komponente ist in data und computed Sektionen gespeichert. Ich nutze die Wort 'Sektion`, weil data ein Objekt zurück gibt und computed die Funktionen und Objekten enthält.

React

Im React ist di Situation nicht so einfach. Die Klassenkomponenten haben ein Objekt das this.state heißt. Im diesen Objekt können wir die komplexe Daten speichern. Der Unterschied zwischen Vue ist, dass wir die Daten direkt aktualisieren nicht können.

Die Funktionskomponenten haben kein this.state Objekt. Sonder wir können Hooks nutzen. Falls haben wir ein einfacher State, bis fünf Sachen, gibt es useState Hook.

const [state, setState] = useState(initialState);

Ab fünf Sachen ist es besser useReducer zu nutzen. Es sieht wie einfachere Version des Redux oder NgRx. Das kombiniert data und computed.

Die Initialisierung ist ähnlich dem useState Hook:

const [state, dispatch] = useReducer(reducer, initialCount, init);

Vergleich

In beiden Fallen haben wir die Liste der Farben und wir auch wollen wissen, wie viel Farben sind in der Liste. Im Vanilla JS sieht es aus:

const colors = ['red', 'green', 'blue'];
const noOfColors = colors.length;

Der gleiche Code auf Vue sieht aus:

data() {
  return {
    colors: ['red', 'green', 'blue'],
  }
},
computed: {
  noOfColors() {
    return this.colors.length;
  }
}

Es gibt auch eine Alternative with getter:

computed: {
  noOfColors: {
    get() {
      return this.colors.length;
    }
  },
}

Das Reducer Hook im React erlaubt uns die komplexe States zu nutzen. Reducer ist eine Funktion, die wir reducer nennen. In der reducer Funktion haben wir ein switch, das reaktiert an die Aktionen und aktualisiert das State.

function reducer(state, action) {
  switch (action.type) {
    case 'UPDATE_BOOKS':
      return {
        ...state,
        state.colors: action.payload,
        state.noOfColors: action.payload.length,
      }
  }
}

Schluss

Vue und React sind ähnlich weil beide das State haben. Meiner Meinung nach Vue hat mehr intuitives State Management. Aber beide wirken und das ist die wichtigsten.