Vue, React! Diferencias de manejo de estado de un componente
Publicado en 2021-11-24 08:06
Uno de partes duras de aprendiendo React es estado de React. Ahora Vue.js es mi framework favorito, vamos a como ellos trabajan con estados.
Vue
En Vue los estados de componentes son almacenados en data y computed secciónes. Aguí uso la palabra 'sección' porque data es una función que devuelve el objeto con los datos y computed tiena los objetos y/o las funciónes.
React
En React es la situación un poco diferente. React tiene componentes funcionales y de clase. En el componentes de clase es un estado almacenado en un objecto this.state. Es nos permite almacenar estado complicado similar a Vue data() función. Pero no permite actualizar directamente.
En el componentes funcionales, necesitamos usar Hooks para usar y actulazar un estado. Para estados simples, hasta cinco elementos, uso useState hook:
const [state, setState] = useState(initialState);
Esta es un definición para un elemento. Para los estados complicados puede volverse ilegible rápidamente.
Para más estados complicados hay useReducer hook. Esto es similar que reducer de Redux o NgRx. Es también trabaja como computed objeto en Vue.
El código para la inicialización de reducer es similar como useState:
const [state, dispatch] = useReducer(reducer, initialCount, init);
Comparación
En nuestro ejemplo tenemos una lista de colores y queremos conocer cuantos colores hay en el lista. El código en JavaScript simple:
const colors = ['red', 'green', 'blue'];
const noOfColors = colors.length;
En estado de Vue tenemos:
data() {
return {
colors: ['red', 'green', 'blue'],
}
},
computed: {
noOfColors() {
return this.colors.length;
}
}
Es posible el getter patrón utilizar para computed objeto:
computed: {
noOfColors: {
get() {
return this.colors.length;
}
},
}
En React hay algo parecido a computed objeto con setter y getter, una función reducer. En nuestro ejemplo se llama reducer()'. En la función tenemos un switch` para las acciónes que actualizar un estado.
function reducer(state, action) {
switch (action.type) {
case 'UPDATE_BOOKS':
return {
...state,
state.colors: action.payload,
state.noOfColors: action.payload.length,
}
}
}
Conclusión
Vue y React son similares porque los dos tienen un estado de componente. En mi opinión el estado de Vue es más simple. Los dos trabajan y esto es el importante.