React.Component vs React.PureComponent

Question

L'officiel de Réagir docs de l'état qui "React.PureComponents' shouldComponentUpdate() seulement superficiellement compare les objets", et conseille à l'encontre de ce si l'état est "en profondeur".

Compte tenu de cela, est-il une raison pourquoi on devrait préférer React.PureComponent lors de la création de Réagir composants?

Questions:

• est-il un impact sur les performances à l'aide d' React.Component que l'on peut envisager d'aller pour React.PureComponent?
• Je devine shouldComponentUpdate() de PureComponent effectue peu profondes des comparaisons. Si c'est le cas, ne peut pas se dit de la méthode utilisée pour approfondir les comparaisons?
• "En outre, React.PureComponents' shouldComponentUpdate() saute prop mises à jour pour l'ensemble de la composante sous-arbre" - est-ce à dire que prop changements sont ignorés?

La Question se pose à la lecture de ce moyen blog, si cela aide.

Answer 1

La différence majeure entre React.PureComponent et React.Component est PureComponent fait un peu profonde de la comparaison de changement d'état. Cela signifie que lors de la comparaison des valeurs scalaires il compare leurs valeurs, mais lorsque l'on compare les objets qu'il compare uniquement des références. Il contribue à améliorer les performances de l'application.

Vous devriez aller pour React.PureComponent lorsque vous pouvez satisfaire à une des conditions ci-dessous.

• Etat/Accessoires doit être un objet immuable
• Etat/Accessoires ne doivent pas avoir une hiérarchie
• Vous devriez appeler forceUpdate de la modification des données

Si vous utilisez React.PureComponent assurez-vous que tous les composants enfants sont aussi de la pure.

est-il un impact sur les performances à l'aide de Réagir.composant que l'on peut envisager d'aller pour Réagir.PureComponent?

Oui, il va augmenter vos performances de l'application (en raison de la faible comparaison)

Je devine shouldComponentUpdate() de Purecomponent effectue uniquement peu profondes des comparaisons . Si c'est le cas peut' t la méthode utilisée a dit pour plus de comparaisons?

Vous l'avez deviné correctement. Vous pouvez l'utiliser si vous respecter les conditions que j'ai mentionnées ci-dessus.

"En Outre, De Réagir.PureComponent de shouldComponentUpdate() saute prop les mises à jour pour l'ensemble de la composante sous-arbre" - est-ce à dire que prop les changements sont ignorés?

Oui, prop changements seront ignorés Si il ne trouve pas de différence dans les eaux peu la comparaison.

Answer 2

Component et PureComponent ont une différence

PureComponent est exactement le même que Component sauf qu'il gère l' shouldComponentUpdate méthode pour vous.

Lorsque des accessoires ou des modifications de l'état, PureComponent va faire un peu profonde de comparaison sur les deux accessoires et de l'état. Component sur l'autre main n'est pas à comparer les accessoires et l'état pour la prochaine sortie de la boîte. Ainsi, le composant va refaire le rendu par défaut chaque fois qu' shouldComponentUpdate est appelé.

Peu Profonde Comparaison

Lors de la comparaison précédente, des accessoires et de l'état à côté, une faible profondeur de comparaison permettra de vérifier que les primitifs ont la même valeur (par exemple, 1 est égal à 1 ou que la vraie est égale à true) et que les références sont les mêmes entre les plus complexes javascript valeurs comme les objets et les tableaux.

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