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
- useState
- useEffect => Cet article
- useContext => Coming Soon

utiliserEffet

Documentation officielle pour useEffect

Arguments de la fonction useEffect

1. Fonction à exécuter pendant le cycle de vie du composant.
2. Tableau de valeurs useEffect surveille les changements pour déclencher le déclenchement. Le passage d'un tableau vide imite les composants componentDidMountet componentWillUnmountméthodes React basés sur une classe.

La description

useEffectest utilisé pour exécuter du code après chaque fois (il est possible de limiter le déclenchement de la fonction à certaines conditions) que le composant est rendu à l'écran. Il est possible d'utiliser plusieurs instances de useEffectdans un composant, mais assurez-vous qu'elles s'exécutent toujours dans le même ordre. 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). useEffectles fonctions peuvent également nettoyer après elles-mêmes en retournant une fonction.

Exemples

Comprendre l'utilisation de base et le nettoyage après l'exécution.

Le code suivant sera exécuté après chaque rendu.

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

Site Web personnel
LinkedIn
Instagram