Je suis nouveau pour réagir. Je passe en revue leurs documents pour comprendre comment fonctionne React. Ainsi, il a été mentionné que lorsque state / props / setState () change / appelé, react redonne le composant entier.
De plus, j'ai lu que les éléments de réaction sont immuables et qu'ils ne sont rendus que lorsqu'il y a un changement. Ainsi, lorsque react essaie de rendre un composant, il parcourt en fait tous les éléments vérifie les différences et ne rend que les éléments dont les données sont modifiées. Il ne restituera pas simplement le composant entier.
Ai-je raison à ce sujet? Ou est-ce que ma compréhension est fausse?
3 Réponses :
Vous avez raison, react restitue le composant lorsque les accessoires ou l'état changent. Cela étant dit, lorsqu'un composant enfant a reçu de nouveaux accessoires, react ne vérifie pas si les accessoires ont changé lorsque vous utilisez React.Component , il effectue simplement un nouveau rendu même si vous passez à nouveau les mêmes accessoires.
Afin de rendre les composants uniquement s'ils reçoivent des accessoires différents, vous pouvez utiliser React.PureComponent dans le cas de composants de classe ou vous pouvez envelopper le composant avec React.memo() dans le cas de composants fonctionnels.
J'ai lu que les éléments React sont immuables et qu'ils ne sont rendus que lorsqu'il y a un changement.
Dire que les éléments React sont immuables n'est pas vrai, vous devez les traiter comme immuables, en particulier l' état et les accessoires du composant.
Ainsi, lorsque React essaie de rendre un composant, il parcourt en fait tous les éléments, vérifie les différences et ne rend que les éléments dont les données sont modifiées.
Le comportement par défaut est de rendre tous les sous-arborescences lorsque le parent est rendu en appelant setState (ce qui déclenche la réconciliation sur la sous-arborescence du composant).
Donc, dire qu'il rendra les composants lors du "changement de données" n'est pas vrai, ils le rendront quand même par défaut, même si les "données" n'ont pas changé.
En disant «les données sont modifiées», nous entendons le changement d' accessoires (comparaison superficielle par défaut, utilisez la mémorisation pour le changer).
Nous pouvons utiliser key accessoire key pour aider au processus de réconciliation.
Je pense qu'une manière plus claire de résumer le moment du rendu des composants React serait:
Les composants React sont rendus à nouveau lorsque et uniquement lorsque:
setState() ou useState() )Mises en garde:
Vous devez mettre à jour correctement l'état pour que le composant soit à nouveau rendu, c'est-à-dire via setState() ou useState() . Si l'état change via d'autres moyens, "illégal", comme l'accès direct à l'état, React ne le remarquera pas et ne rendra pas le composant.
Les props React sont en lecture seule, donc quand nous disons «quand les props d'un composant changent», nous voulons vraiment dire quand le composant est passé des props avec des valeurs modifiées. Les accessoires ne doivent pas subir de mutation dans le composant.
Si vous utilisez useMemo() ou React.memo() , un composant enfant ne sera rendu à nouveau que lorsque le composant parent sera de nouveau rendu si les accessoires qu'il reçoit ont changé.
Il est important de faire la distinction entre le rendu du DOM virtuel et la mise à jour du DOM réel. Ce n'est pas parce qu'un composant effectue un nouveau rendu qu'il a mis à jour le DOM. Lorsqu'un composant est à nouveau rendu, React compare la nouvelle version à la précédente et ne met à jour le DOM réel que si quelque chose a changé 1 , 2 .
Oui! Tu as raison.