Reconciliation Algorithm
React 🟡 MidDefinition
Algorithme de diffing qui compare deux arbres Virtual DOM pour determiner les changements minimaux a appliquer au vrai DOM. Complexite O(n) grace a des heuristiques.
Analogie
Comme un jeu des 7 differences : React compare les deux images et ne corrige que les pixels differents.
Exemple de code
// React compare par type d'element et key
// Si le type change: detruit et recree le sous-arbre
// Si le type est identique: met a jour les props
<ul>
<li key="a">A</li> {/* key aide la reconciliation */}
<li key="b">B</li>
</ul>
Cas d'usage
Comprendre la reconciliation aide a ecrire du code performant et a bien utiliser les keys.
Anti-pattern
Changer le type d'un composant parent inutilement, forcant React a detruire tout le sous-arbre.