web-dev-qa-db-fra.com

React.Component vs React.PureComponent

L'officiel React docs indique que "React.PureComponent 's shouldComponentUpdate() ne compare que superficiellement les objets", et déconseille cela si l'état est "profond".

Compte tenu de cela, y a-t-il une raison pour laquelle on devrait préférer React.PureComponent lors de la création de React composants?

Questions :

  • l'utilisation de React.Component a-t-elle un impact sur les performances que l'on pourrait envisager d'utiliser pour React.PureComponent?
  • Je suppose que shouldComponentUpdate() of PureComponent n'effectue que des comparaisons superficielles. Si tel est le cas, cette méthode ne peut-elle pas être utilisée pour des comparaisons plus approfondies?
  • "En outre, shouldComponentUpdate() de React.PureComponent ignore les mises à jour de prop pour l'ensemble de la sous-arborescence du composant" - Cela signifie-t-il que les modifications de prop sont ignorées?

La question se pose de lire dans ce blog moyen , si cela aide.

reactjsstate
183
semuzaboi

La principale différence entre React.PureComponent et React.Component est PureComponent effectue un comparaison superficielle lors du changement d'état. Cela signifie que lorsque l'on compare des valeurs scalaires, il compare leurs valeurs, mais lorsque l'on compare des objets, il compare uniquement des références. Cela aide à améliorer les performances de l'application.

Vous devriez opter pour React.PureComponent lorsque vous pouvez remplir l'une des conditions ci-dessous.

  • State/Props doit être un objet immuable
  • État/accessoires ne devraient pas avoir une hiérarchie
  • Vous devez appeler forceUpdate lorsque les données changent

Si vous utilisez React.PureComponent, vous devez vous assurer que tous les composants enfants sont également purs.

l'utilisation de React.component a-t-elle un impact sur les performances que nous pourrions envisager d'utiliser pour React.PureComponent?

Oui, cela augmentera les performances de votre application (à cause d'une comparaison superficielle)

J'imagine que shouldComponentUpdate () de Purecomponent n'effectue que des comparaisons superficielles. Si tel est le cas, cette méthode ne peut-elle pas être utilisée pour des comparaisons plus approfondies?

Vous l'avez bien deviné. Vous pouvez l'utiliser si vous remplissez l'une des conditions mentionnées ci-dessus.

"En outre, shouldComponentUpdate () de React.PureComponent ignore les mises à jour de prop pour l'ensemble du sous-arbre du composant" - Cela signifie-t-il que les modifications de prop sont ignorées?

Oui, les changements de prop seront ignorés s’il ne pouvait pas trouver de différence dans la comparaison superficielle.

230
vimal1083

Component et PureComponent ont une différence

PureComponent est exactement identique à Component sauf qu'il gère la méthode shouldComponentUpdate à votre place.

Lorsque les accessoires ou l’état changent, PureComponent effectue une comparaison peu profonde (-) et Etat. Component d’autre part, ne comparera pas les accessoires actuels ni l’état suivant. Ainsi, le composant sera rendu de nouveau par défaut à chaque appel de shouldComponentUpdate.

Comparaison peu profonde

Lorsque vous comparez les propriétés et les états précédents avec les suivants, une comparaison superficielle vérifiera que les primitives ont la même valeur (par exemple, 1 est égal à 1 ou que true est égal à vrai) et que les références sont les mêmes entre des valeurs javascript plus complexes, telles que des objets et des tableaux.

Source: https://codeburst.io/when-to- usage-component-or-purecomponent-a60cfad01a81

16
Mahdi Bashirpour

À mon avis, la principale différence est qu'un composant réinterprète chaque fois que ses réémetteurs parents, indépendamment du fait que ses accessoires et son état aient changé.

En revanche, un composant pur ne sera pas rendu si ses re-rendus parents, à moins que ses accessoires (ou son état) n'aient changé.

Par exemple, disons que nous avons une arborescence de composants avec une hiérarchie à trois niveaux: parent, enfants et petits-enfants.

Lorsque les accessoires du parent sont modifiés de manière à ne changer que ceux d'un seul enfant, alors:

  • si tous les composants sont des composants normaux, alors toute l'arborescence des composants sera rendue
  • si tous les enfants et petits-enfants sont des composants purs, un seul enfant et un ou tous ses petits-enfants, ainsi que tous ses petits-enfants, seront transformés. S'il y a beaucoup de composants dans cette arborescence, cela peut signifier une amélioration significative des performances.

Parfois, toutefois, l'utilisation de composants purs n'aura aucun impact. J'ai eu un tel cas lorsque le parent a reçu ses accessoires d'un magasin Redux et devait effectuer un calcul complexe des accessoires de ses enfants. Le parent a utilisé une flatlist pour rendre ses enfants.

Le résultat était que chaque fois qu'il y avait un petit changement dans le magasin redux, l'ensemble du tableau de la liste à plat des données des enfants a été recalculé. Cela signifiait que pour chaque composant de l'arbre, les accessoires étaient de nouveaux objets, même si les valeurs ne changeaient pas.

Dans ce cas, les composants purs ne résoudront pas les problèmes et l'amélioration des performances ne peut être obtenue qu'en utilisant des composants standard et en enregistrant les enfants, dans shouldComponentUpdate, si un rendu est nécessaire.

7
Yossi