De réagir.Composant vs Réagir.PureComponent

Officiel Réagir docs état que "React.PureComponent's 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 en utilisant 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.PureComponent's shouldComponentUpdate() saute prop mises à jour pour l'ensemble de la composante sous-arbre" - est-ce à dire que prop changements sont ignorés?

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

InformationsquelleAutor semuzaboi | 2016-12-27
  1. 248

    La différence majeure entre React.PureComponent et React.Component est PureComponent un peu profonde comparaison sur 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 quand vous pouvez satisfaire à une des conditions ci-dessous.

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

    Si vous utilisez React.PureComponent vous devriez 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.

    • Salut @VimalrajSankar. merci pour l'aide ici. Pouvez-vous me donner un exemple de la déclaration suivante: It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app. ? Merci
    • J'espère que cela aidera stackoverflow.com/a/957602/2557900
    • State/Props should not have a hierarchy désolé, pouvez-vous expliquer un peu ce qu'hiérarchie ici?
    • il signifie état et des accessoires ne doit contenir que des valeurs primitives comme les nombres et les chaînes, mais pas les objets à l'intérieur des objets (une hiérarchie).
    • si l'état/accessoires est immuable de l'objet, alors qu'il devrait être ok pour avoir de hiérarchie et de toujours utiliser PureComponent aussi longtemps que ceux de la hiérarchie de maintenir immuable objet de trop, non?
    • Cette réponse est un peu trompeur, car c'est toujours ok pour utiliser une hiérarchie d'objets aussi longtemps que si l'une des modifications de l'enfant, le parent de référence trop de changements. par exemple. ce faire de modifier la propriété d'un objet: this.setState({ obj: Object.assign({}, this.state.obj, { changing: true })).
    • mais que penser de Réagir.Composante. le faire a une comparaison en profondeur pour savoir si c'est un nouveau accessoires ( accessoires changé ). ou il a toujours un nouveau rendu, peu importe si les accessoires changé ou pas

    InformationsquelleAutor vimal1083
  2. 24

    Component et PureComponent ont une différence de

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

    Lorsque des accessoires ou des modifications de l'état, PureComponent va faire un peu profonde 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 que 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

    • De réagir.Composant => donc, si je re-rendu d'un même composant avec les mêmes accessoires à plusieurs reprises. il sera le déclencheur, c'est l'enfant de rendu. peu importe si les accessoires changé ou pas
    InformationsquelleAutor Mahdi Bashirpour
  3. 13

    La principale différence que je vois c'est qu'un composant rerenders chaque fois que son parent rerenders, indépendamment du fait que la composante de l'accessoires et de l'état ont changé.

    Un corps pur, d'autre part, ne sera pas rerender si son parent rerenders, à moins que le pur composant d'accessoires (ou l'état) ont changé.

    Par exemple, disons que nous avons un composant de l'arbre avec une hiérarchie à trois niveaux: parents, enfants et petits-enfants.

    Lorsque le parent accessoires sont modifiées de façon que les accessoires d'un seul enfant sont modifiées, puis:

    • si tous les composants sont des composants normaux, alors la totalité de la composante arbre rerender
    • si tous les enfants et les petits-enfants sont des composants purs, alors qu'un seul enfant rerender, et de l'une ou de la totalité de ses petits-enfants, selon que leurs accessoires sont modifiées.
      Si il y a beaucoup de composants dans cette partie de l'arbre, cela peut signifier un gain de performances significatif.

    Parfois, cependant, l'utilisation de composants purs, n'aura aucun impact. J'ai eu un tel cas, lorsque le parent a reçu ses accessoires à partir d'un redux de stocker et de nécessaires pour effectuer un calcul complexe de ses enfants accessoires. La mère a utilisé un flatlist afin de rendre ses enfants.

    Le résultat est que chaque fois il y avait même un petit changement dans le redux magasin, l'ensemble de la flatlist tableau de la des enfants les données ont été recalculées. Cela signifie que pour chaque composant dans l'arbre, les accessoires ont été de nouveaux objets, même si les valeurs n'ont pas changé.

    Dans ce cas, les composants purs, ne permettent pas de, et le gain de performance peut être obtenue que par l'utilisation de composants et de vérification dans les enfants, dans shouldComponentUpdate, si un rerender est nécessaire.

    InformationsquelleAutor Yossi