Comprendre la gestion d'état intégrée de React

La gestion de l'état intégrée de React s'appuie sur les hooks useState et useReducer pour gérer l'état au sein des composants. Voici une répartition :

1. useState :

   • Ce hook est utilisé pour gérer l'état des composants locaux. Il renvoie un tableau avec deux éléments : la valeur de l'état actuel et une fonction pour la mettre à jour.
   • Exemple :

    const [count, setCount] = useState(0);
   
    // Update state
    setCount(count + 1);
   

2. useReducer :

   • Pour une logique d'état plus complexe, useReducer est utilisé. Il fonctionne de manière similaire à Redux en prenant en compte une fonction de réduction et un état initial, et en renvoyant l'état actuel et une fonction de répartition.
   • Exemple :

    const initialState = { count: 0 };
   
    function reducer(state, action) {
      switch (action.type) {
        case 'increment':
          return { count: state.count + 1 };
        case 'decrement':
          return { count: state.count - 1 };
        default:
          return state;
      }
    }
   
    const [state, dispatch] = useReducer(reducer, initialState);
   
    // Dispatch actions
    dispatch({ type: 'increment' });
   

Ces hooks aident à gérer l'état localement au sein des composants sans avoir besoin de bibliothèques externes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!