Expliquez-moi ce qui se passe quand React refait le rendu d'un composant. Comment la réconciliation décide-t-elle de ce qui atteint réellement le DOM ?

Quand l'état change, React réexécute la fonction du composant pour produire un nouvel arbre d'éléments, puis le compare à l'arbre précédent. Il confronte les types de nœuds et les clés, position par position : un type identique signifie que React met à jour les props sur place, un type différent signifie qu'il démonte l'ancien sous-arbre et en monte un nouveau. Seul l'ensemble minimal de changements qui en résulte est appliqué au vrai DOM.

Donc quand l'état change, React rappelle la fonction du composant, et ça lui donne un nouvel arbre d'éléments. C'est la phase de rendu, et rien n'a encore touché le DOM. Ensuite il parcourt le nouvel arbre face à l'ancien. À chaque position, il regarde d'abord le type de l'élément. Si c'est le même type, disons qu'un div reste un div, il garde le nœud DOM existant et l'état existant, et il se contente de patcher les props qui ont changé. Si le type est différent, il jette tout le sous-arbre et en construit un neuf, ce qui veut dire que tout état à l'intérieur est perdu. Pour les listes, il s'appuie sur les clés plutôt que sur la position brute, donc les éléments peuvent bouger sans être reconstruits. Puis tous les changements collectés sont appliqués en une seule passe de commit. Ce qui fait que ça compte pour moi en pratique, c'est que j'ai un jour débogué un formulaire qui se réinitialisait à chaque frappe, et c'était parce que le parent le rendait dans une condition qui changeait le type de l'élément conteneur. Une fois que vous connaissez les règles de comparaison, c'est un correctif de cinq minutes au lieu d'un après-midi.