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.