web-dev-qa-db-fra.com

Equivalent composantDidMount sur un composant React function / Hooks??

Existe-t-il des moyens de simuler componentDidMount in React composants fonctionnels éventuellement via des crochets?)

javascriptreactjsreact-hooks
14
jeyko

Pour la version stable de hooks (React Version 16.8.0+)

Pour componentDidMount

useEffect(() => {
    // Your code here
  }, []);

Pour componentDidUpdate

useEffect(() => {
    // Your code here
  }, [yourDependency]);

Pour componentWillUnmount

useEffect(() => {
    // componentWillUnmount
    return () => {
       // Your code here
    }
  }, [yourDependency]);

Donc, dans cette situation, vous devez passer votre dépendance dans ce tableau. Supposons que vous avez un état comme celui-ci

const [count, setCount] = useState(0);

Et chaque fois que le nombre augmente, vous souhaitez rendre à nouveau votre composant de fonction. Alors votre useEffect devrait ressembler à ceci

useEffect(() => {
    // <div>{count}</div>
  }, [count]);

De cette façon, chaque fois que votre compte sera mis à jour, votre composant sera rendu de nouveau. J'espère que cela aidera un peu.

44
Mertcan Diken

Oui, les méthodes de cycle de vie telles que composantDidMount ne sont disponibles que dans les composants de classe.

Les composants de classe ne doivent pas être considérés comme obsolètes, même après l'avènement des crochets, ils resteront une partie importante de React.

1
Patrick Hund

Vous souhaitez utiliser useEffect(), qui, selon l'utilisation de la fonction, peut agir comme un composantDidMount ().

Par exemple. vous pouvez utiliser une propriété personnalisée loaded state qui a initialement été définie sur false, puis basculez-la sur true lors du rendu et déclenchez l'effet uniquement lorsque cette valeur est modifiée.

Documentation

1
markmoxx

Il n'y a pas componentDidMount sur les composants fonctionnels, mais React Les crochets fournissent un moyen d'émuler le comportement en utilisant le crochet useEffect.

Passez un tableau vide en tant que second argument à useEffect() pour n'exécuter que le rappel sur le montage uniquement.

Veuillez lire le documentation sur useEffect .

function ComponentDidMount() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('componentDidMount');
  }, []);

  return (
    <div>
      <p>componentDidMount: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <ComponentDidMount />
  </div>,
  document.querySelector("#app")
);
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>
0
Yangshun Tay