Chaque appel « setState » déclenche-t-il un rendu React ?

ReactJS - Le rendu se déclenche-t-il à chaque appel « setState » ?

React maintient une distinction entre son DOM virtuel et le DOM natif. Lorsqu'un composant reçoit une mise à jour d'état, sa méthode de rendu est invoquée. Cela génère une nouvelle représentation DOM virtuelle du composant. Cependant, il est important de noter que React ne met pas immédiatement à jour le DOM natif.

Comportement par défaut : nouveau rendu à chaque mise à jour d'état

Par défaut, React suppose que tout changement d'état nécessite un nouveau rendu de l'interface utilisateur. Cela garantit que l'interface utilisateur est toujours synchronisée avec le dernier état.

Rendu DOM virtuel par rapport au rendu DOM natif

Lorsque le rendu s'exécute, il génère un nouveau DOM virtuel. Cette phase n'affecte pas le DOM natif. Par la suite, React compare le nouveau DOM virtuel avec le précédent et ne met à jour que les éléments réels du navigateur qui ont changé. Cette optimisation évite un nouveau rendu inutile et minimise les redistributions et les repaints du navigateur.

Puis-je optimiser le nouveau rendu ?

Vous pouvez implémenter la méthode de cycle de vie ShouldComponentUpdate pour affiner le réglage. lorsqu'un composant est restitué. Il faut deux arguments :

• nextProps : le prochain ensemble d'accessoires que le composant recevra
• nextState : le prochain état du composant

Vous pouvez utilisez ShouldComponentUpdate pour vérifier si les accessoires et l'état à venir sont significativement différents de ceux actuels. Si ce n'est pas le cas, vous pouvez renvoyer false pour empêcher le nouveau rendu et améliorer les performances.

Exemple

Dans l'exemple fourni, les composants parent et enfant effectuent un nouveau rendu à chaque clic, même si l'état dans le composant parent reste inchangé. En effet, setState déclenche toujours un nouveau rendu du DOM virtuel et React suppose que l'interface utilisateur doit être mise à jour. Pour éviter un nouveau rendu inutile dans de tels scénarios, vous pouvez implémenter ShouldComponentUpdate pour vérifier si l'état a réellement changé.

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!