Erklär mir Schritt für Schritt, was passiert, wenn React eine Komponente neu rendert. Wie entscheidet die Reconciliation, was am Ende wirklich im DOM landet?

Wenn sich State ändert, ruft React die Komponentenfunktion erneut auf und erzeugt einen neuen Element-Baum, den es gegen den vorherigen diffed. Es vergleicht Node-Typen und Keys Position für Position: gleicher Typ heißt, React aktualisiert die Props an Ort und Stelle, ein anderer Typ heißt, der alte Teilbaum wird unmounted und ein neuer gemountet. Nur die daraus resultierende minimale Menge an Änderungen wird ins echte DOM committed.

Wenn sich State ändert, ruft React die Komponentenfunktion noch einmal auf, und daraus entsteht ein neuer Baum aus Elementen. Das ist die Render-Phase, und bis dahin ist das DOM überhaupt nicht angefasst worden. Danach läuft React den neuen Baum gegen den alten ab. An jeder Position schaut es zuerst auf den Elementtyp. Ist es derselbe Typ, ein div bleibt also ein div, behält es die bestehende DOM-Node und den bestehenden State und patcht nur die Props, die sich geändert haben. Ist der Typ anders, wirft es den kompletten Teilbaum weg und baut einen frischen, womit jeder State darin weg ist. Bei Listen nutzt es Keys statt der reinen Position, damit Items sich bewegen können, ohne neu gebaut zu werden. Am Ende werden alle gesammelten Änderungen in einem Commit-Durchgang angewendet. Warum mich das praktisch interessiert: Ich habe mal ein Formular debuggt, das sich bei jedem Tastendruck zurückgesetzt hat, und die Ursache war, dass das Parent es in einer Bedingung gerendert hat, die den Typ des Wrapper-Elements getauscht hat. Wenn du die Diff-Regeln kennst, ist das ein Fünf-Minuten-Fix statt eines verlorenen Nachmittags.