Quelle est la différence entre useEffect et function body? [dupliquer]

Question

Outre le nettoyage et le tableau de dépendances, y a-t-il une raison d'utiliser useEffect?

function App() {
  const [a, setA] = useState(0);

  const b = `Number: ${a}`;

  return (
    <div className="App">
        <p>
          {b}
        </p>
        <button onClick={() => setA(a + 1)}>click</button>
    </div>
  );
}

Comme nous pouvons le voir, nous n'utilisons pas le useEffect, mais comme le changement d'état adéclenchera un nouveau rendu, il bsera également modifié. Il semble que nous n'en ayons même pas besoin useEffectdans ce cas.

Alors, y a-t-il un avantage unique à l' useEffectexception du nettoyage et du tableau de dépendances?

Éditer

Je pense que la plupart des réponses sont basées sur une hypothèse: le PO a une bonne compréhension de la logique du cycle de vie de réaction. Mais malheureusement, c'est ma faiblesse.

Bien que j'aie beaucoup utilisé les useEffectanciennes component*méthodes du cycle de vie, je ne me rendais pas vraiment compte que ce sont quelque chose en dehors du composant de fonction lui-même. Ce qui leur donne plus de flexibilité et de fonctionnalités.

Je n'essaie pas d'insulter qui que ce soit, mais je pense que nous devrions répondre à la question plus précisément et avec soin. Quiconque parcourt mon profil peut voir que j'ai également répondu à beaucoup de questions. D'après mon expérience, les gens n'ont généralement pas les connaissances nécessaires pour poser même une question critique et claire, ils ne réalisent même pas quel est le point clé (Oui, je suis l'un d'entre eux dans cette question).

Lorsque j'essaierai de répondre à la question, je vais d'abord essayer de clarifier la question pour comprendre quel est l'élément critique qui manque au PO.

@PatrickRoberts disait exactement quelque chose qui est correct, mais cela ne m'a pas vraiment aidé car ce n'est pas la pièce qui me manquait. Je m'insulterais de ne pas avoir suffisamment clarifié la question. Mais je veux aussi dire que, comprendre / clarifier la question est plus important que de donner la bonne réponse. Après tout, en théorie, la plupart des questions peuvent être résolues par des documents officiels.

Answer 1

En utilisant ce Hook, vous indiquez à React que votre composant doit faire quelque chose après le rendu. React se souviendra de la fonction que vous avez passée (nous l'appellerons notre «effet»), et l'appellera plus tard après avoir effectué les mises à jour du DOM. Dans cet effet, nous définissons le titre du document, mais nous pourrions également effectuer une récupération de données ou appeler une autre API impérative.

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

 useEffect(() => {
   document.title = `You clicked ${count} times`;
 });
}

Contrairement à componentDidMount ou componentDidUpdate, les effets programmés avec useEffectn'empêchent pas le navigateur de mettre à jour l'écran. Cela rend votre application plus réactive. La majorité des effets ne doivent pas nécessairement se produire de manière synchrone.