web-dev-qa-db-fra.com

React hooks: Quoi / Pourquoi `useEffect`?

Concernant le nouvellement proposé React Effect Hook ;

  1. Quels sont les avantages et les cas d'utilisation du hook Effect (useEffect())?

  2. Pourquoi serait-il préférable et en quoi diffère-t-il de componentDidMount/componentDidUpdate/componentWillUnmount (performances/lisibilité)?

La documentation indique que:

Les mutations, abonnements, minuteries, journalisation et autres effets secondaires ne sont pas autorisés dans le corps principal d'un composant de fonction (appelé phase de rendu de React).

mais je pense qu'il était déjà de notoriété publique d'avoir ces comportements dans les méthodes de cycle de vie comme componentDidUpdate, etc. au lieu de la méthode de rendu.

Il y a aussi la mention que:

La fonction passée à useEffect s'exécutera une fois le rendu validé à l'écran.

mais n'est-ce pas ce que componentDidMount & componentDidUpdate fait de toute façon?

javascriptreactjsreact-hooks
14
Mirodinho

  1. Quels sont les avantages et les cas d'utilisation du hook Effect (useEffect())?

    Les avantages

    Principalement, les hooks en général permettent l'extraction et la réutilisation de la logique dynamique qui est commune à plusieurs composants sans la charge des composants d'ordre supérieur ou des accessoires de rendu.

    Un avantage secondaire (des crochets d'effets en particulier) est d'éviter les bogues qui pourraient autrement se produire si les effets secondaires dépendant de l'état ne sont pas correctement gérés dans componentDidUpdate (puisque les crochets d'effets garantissent que ces effets secondaires sont configurés et déchirés). vers le bas sur chaque rendu).

    Voir également les avantages de performance et de lisibilité détaillés ci-dessous.

    Cas d'utilisation

    Tout composant qui implémente une logique avec état à l'aide de méthodes de cycle de vie - le crochet d'effet est une "meilleure façon".

  2. Pourquoi serait-il préférable et en quoi diffère-t-il de componentDidMount/componentDidUpdate/componentWillUnmount (performances/lisibilité)?

    Pourquoi c'est préférable

    En raison des avantages détaillés ci-dessus et ci-dessous.

    En quoi elle diffère des méthodes de cycle de vie

    Performance

    Crochets à effets—

    • se sentent plus réactifs que les méthodes de cycle de vie car ils n'empêchent pas le navigateur de mettre à jour l'écran;
    • va cependant configurer et démonter des effets secondaires sur chaque rendu, ce qui pourrait coûter cher…
    • … Peut donc être optimisé pour être entièrement ignoré, sauf si un état spécifique a été mis à jour.

    Lisibilité

    Les crochets d'effet entraînent:

    • des composants plus simples et plus faciles à gérer, grâce à la possibilité de diviser les comportements non liés qui devaient auparavant être exprimés à travers le même ensemble de méthodes de cycle de vie en un seul crochet pour chacun de ces comportements, par exemple:

      componentDidMount() {
  prepareBehaviourOne();
  prepareBehaviourTwo();
}

componentDidUnmount() {
  releaseBehaviourOne();
  releaseBehaviourTwo();
}

      devient:

      useEffect(() => {
  prepareBehaviourOne();
  return releaseBehaviourOne;
});

useEffect(() => {
  prepareBehaviourTwo();
  return releaseBehaviourTwo;
});

      Notez que le code relatif à BehaviourOne est maintenant distinctement distinct de celui relatif à BehaviourTwo, alors qu'auparavant il était mêlé à chaque méthode de cycle de vie.

    • moins de passe-partout, en raison de l'élimination de tout besoin de répéter le même code sur plusieurs méthodes de cycle de vie (comme cela est courant entre componentDidMount et componentDidUpdate) - par exemple:

      componentDidMount() {
  doStuff();
}

componentDidUpdate() {
  doStuff();
}

      devient:

      useEffect(doStuff); // you'll probably use an arrow function in reality
8
eggyal

Voici un exemple tiré de ReactConf2018 le discours de Dan Abramov expliquant la différence:

Voici les quelques résultats de l'exemple ci-dessous:

  1. Vous écrirez moins de code passe-partout à l'aide de crochets
  2. Accès aux mises à jour des cycles de vie et aux mises à jour des états avec useEffect()
  3. Concernant la performance, un aspect est:

Contrairement à componentDidMount et componentDidUpdate, la fonction passée à useEffect se déclenche après la mise en page et Paint, lors d'un événement différé

  1. Le partage de code sera trop facile et useEffect () peut être implémenté plusieurs fois à des fins différentes au sein du même composant.
  2. vous pouvez contrôler le rendu du composant plus efficacement en passant un tableau comme deuxième argument au crochet useEffect(), ce qui est très efficace lorsque vous passez simplement un tableau vide [] pour rendre le composant uniquement lors du montage et du démontage.
  3. Utilisez plusieurs crochets useEffect() pour séparer les préoccupations et réagir:

Hooks nous permet de diviser le code en fonction de ce qu'il fait plutôt que d'un nom de méthode de cycle de vie. React appliquera tous les effets utilisés par le composant, dans l'ordre où ils ont été spécifiés

tilisation de classes:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

en utilisant des crochets:

import { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
7
Sakhi Mansoor