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.