web-dev-qa-db-fra.com

Comment gérer les modifications d'accessoires sans utiliser ComponentWillReceiveProps dans React

Je travaille sur un projet codé avec React. J'ai un ensemble de composants dans lequel j'ai implémenté de nombreux composants pour mes propres besoins. Beaucoup d'entre eux agissent comme un composant composite. Par exemple, TextBox composant qui a sa propre étiquette, son propre mécanisme de message d'erreur et son propre filtre d'entrée etc. De plus, vous savez, les composants ont des accessoires pour gérer qc. 

Chaque fois que je mets à jour ma vue de composant (rendu), j’utilise componentWillReceiveProps et je compare les modifications apportées aux accessoires.

Mais à chaque fois, implémenter la méthode componentWillReceiveProps est tellement répugnant. 

Existe-t-il un moyen de transmettre les accessoires de haut en bas sans utiliser componentWillReceiveProps. Je ne veux pas comparer les modifications d'accessoires manuellement. Est-il possible de le faire automatiquement.

Lorsque je change les accessoires en tant que parent, j'aimerais mettre à jour toutes les vues en modifiant simplement les valeurs de certains accessoires, de haut en bas.

Je ne suis pas un expert en réaction et la performance n'est pas mon objectif premier aussi!

Une dernière chose que la réponse n’est pas use Redux!

J'attends vos approches créatives et vos idées utiles.

javascriptreactjsreduxstate
3
Tugrul

Sans voir le code de la chose sur laquelle vous travaillez, il se peut que je manque quelque chose à propos de ce que vous faites ...

Comme d'autres l'ont commenté, React rendra à nouveau votre composant si de nouveaux accessoires sont fournis, que vous implémentiez ou non componentWillReceiveProps - la seule raison de l'implémenter est d'effectuer une sorte de comparaison spécifique ou de définir un état basé sur le nouvel accessoire. valeurs. 

De la documentation React (l'emphase mienne):

composantWillReceiveProps () est appelé avant qu'un composant monté reçoive de nouveaux accessoires. Si vous devez mettre à jour l'état en réponse aux modifications de prop (par exemple, pour le réinitialiser), vous pouvez comparer this.props et nextProps et effectuer des transitions d'état à l'aide de this.setState () dans cette méthode.

Notez que React peut appeler cette méthode même si les accessoires n'ont pas changé. Veillez donc à comparer les valeurs actuelle et suivante si vous souhaitez uniquement gérer les modifications. Cela peut se produire lorsque le composant parent entraîne le rendu de votre composant.

En d'autres termes, si vous avez un composant comme: 

<TextBox title={"Foo"} content={"Bar"} />

Cela transmet en interne les modifications de prop à quelques composants enfants tels que:

class TextBox extends React.Component {

  render() {
    return (
      <div className={'text-box'}>
        <Title text={this.props.title} />
        <Body text={this.props.content} />
      </div>
    );
  }

}

Ensuite, chaque fois que de nouveaux accessoires sont passés à <TextBox>, <Title> et <Body> seront également restitués avec leurs nouveaux accessoires text, et il n'y a aucune raison d'utiliser componentWillReceiveProps si vous souhaitez simplement mettre à jour les modifications apportées aux accessoires. React verra automatiquement les modifications et restituera le rendu. Et React gère les différences et devrait restituer assez efficacement uniquement les modifications.

Cependant, si vous avez une valeur d'état distinct qui doit être définie en réponse à des accessoires, par exemple, si vous souhaitez afficher un état "modifié" (ou autre) sur le composant si les nouveaux accessoires sont différents, vous pouvez implémenter componentWillReceiveProps, comme:

class TextBox extends React.Component {

  componentWillReceiveProps(nextProps) {
    if (this.props.content !== nextProps.content) {
      this.setState({changed: true});
    }
  }

  render() {

    const changed = this.state.changed ? 'changed' : 'unchanged';

    return (
      <div className={`text-box ${changed}`}>
        <Title text={this.props.title} />
        <Body text={this.props.content} />
      </div>
    );
  }

}

Si vous essayez d’empêcher le rendu dans les cas où les performances ne sont pas nécessaires, procédez comme indiqué par Andrey et utilisez shouldComponentUpdate: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

TLDR; sauf si vous définissez l'état du composant à partir d'accessoires, il n'est probablement pas nécessaire d'exécuter de nouveaux accessoires via componentWillReceiveProps.

UPDATE Février 2018: dans une prochaine version, React déconseillera componentWillReceiveProps en faveur de la nouvelle getDerivedStateFromProps, plus d'informations ici: https://medium.com/@baphemot/whats-new-in-react- 16-3-d2c9b7b6193b

12
Benjamin Robinson

Il y a peu de suggestions:

  • Ne copiez pas les accessoires dans l'état dans componentWillReceiveProps - restituez le rendu directement à partir de this.props
  • Si votre composant a besoin de performances Tweak (et seulement en cas de problème de performances):

L’approche générale pour développer des composants de type boîte de texte consiste à le conserver sans état. Component rend les accessoires directement et informe le composant parent des modifications, sans se soucier de la gestion de la valeur.

J'espère que cela aidera

2
Andrii Muzalevskyi

Veuillez considérer pureComponent qui implémente par défaut la shouldComponentUpdate à l'intérieur de laquelle peu profonde égale est utilisée pour la comparaison entre les versions précédentes et suivantes.

essayez les codes suivants:

class MyComponent extends PureComponent {...}

1
Deng Zhebin