React Hooks vous permet d'utiliser l'état et d'autres fonctionnalités de React sans avoir à créer un composant de classe React. À l'aide de crochets, vous pouvez créer des applications React entièrement opérationnelles exclusivement avec des composants de fonction. Plus class Example extends React.component {}besoin.

Crochets de base

Crochets de tous les jours pour les cas d'utilisation de tous les jours.

React Basic Hooks
- useEffect
- useState => Cet article
- useContext => Coming Soon

useState

Documentation officielle pour useState

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

1. Etat initial

Un tableau contenant deux valeurs.

1. État le plus récent
2. Fonction pour mettre à jour l'état vers de nouvelles valeurs

useStateaccepte une valeur initiale et renvoie deux valeurs : l'état le plus récent et une fonction pour mettre à jour l'état. Les valeurs sont renvoyées sous la forme d'un tableau et sont généralement lues à l'aide de la syntaxe de déstructuration de tableau .

setStateest une fonction asynchrone, il est donc crucial de garder à l'esprit que cela peut prendre du temps. Parfois, un nouvel état nécessite le calcul de l'état précédent. Le calcul d'un nouvel état basé sur un ancien état peut être accompli en passant une fonction dans la setStateméthode fournie dans le deuxième [1]argument (dans le tableau javascript) du tableau renvoyé. Il est important de s'assurer que les fonctions useStateet useEffectsont exécutées dans le même ordre à chaque fois. Si les fonctions useStateet useEffectne se déclenchent pas dans le même ordre, vous allez passer un très mauvais moment (plus d'informations sur l'accomplissement de l'ordre correct ci-dessous). Des calculs précis seront renvoyés lorsque l'ordre des fonctions n'est pas maintenu.

Exemples

Comprendre useStateles valeurs de retour.

Le code suivant peut être exprimé de plusieurs façons.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

Changer les ours en taureaux.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

Le code suivant ajoutera 27 à l'état précédent.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

Comprendre l'initialisation paresseuse des variables d'état. Explication officielle de React Docs.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

Site Web personnel
LinkedIn
Instagram