ReactJS : setState déclenche-t-il toujours un nouveau rendu complet ?

ReactJS : "render" se déclenche-t-il à chaque fois que "setState" est appelé ?

React est conçu pour restituer efficacement les composants uniquement lorsque nécessaire. Cependant, ce comportement n'est pas toujours apparent, ce qui soulève des questions sur la relation entre « setState » et le rendu.

Comportement de rendu par défaut

Par défaut, l'appel de « setState » " déclenche un nouveau rendu complet du composant et de tous ses composants enfants. Cela garantit que tout changement d'état est reflété avec précision dans l'interface utilisateur.

Ce comportement est le résultat du fait que "shouldComponentUpdate" renvoie toujours true par défaut. Cette méthode détermine si un composant doit mettre à jour sa sortie de rendu en fonction des modifications apportées aux accessoires ou à l'état.

Objectif du rendu

Même si "render" est appelé à chaque fois " setState" est invoqué, React ne met pas immédiatement à jour le DOM. Au lieu de cela, un DOM virtuel est généré représentant l'état souhaité de l'interface utilisateur. Le DOM réel n'est modifié que s'il y a des changements entre l'ancien et le nouveau DOM virtuel.

Exemple

Considérez l'extrait de code fourni dans la question :

this.setState({'test':'me'});

Bien que l'état ne change pas après le clic initial, les composants parent et enfant sont restitués. En effet, "shouldComponentUpdate" renvoie toujours vrai, forçant un nouveau rendu.

Optimisation du nouveau rendu

Pour éviter les nouveaux rendus inutiles, vous pouvez remplacer "shouldComponentUpdate" " et comparez les nouveaux accessoires et l'état aux valeurs précédentes. S'il n'y a pas de changements significatifs qui pourraient affecter l'interface utilisateur, vous pouvez renvoyer false pour empêcher le rendu.

N'oubliez pas qu'une utilisation excessive de "shouldComponentUpdate" peut entraîner des problèmes de performances si la logique est trop complexe ou effectue des comparaisons inutiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!