Реконсиляция: эвристики диффа и ловушка ключей

Реконсиляция: правила диффа. Реконсиляция сравнивает новое дерево элементов с текущим fiber-деревом, чтобы решить, что сохранить, обновить или заменить. Полный дифф дерева — O(n³) в общем случае; React делает его O(n) двумя эвристиками.

Эвристика 1 — одинаковый тип, тот же fiber. Если <div> остаётся <div> или <ComponentA> остаётся <ComponentA>, React обновляет существующий fiber на месте — патчит props, запускает реконсиляцию для потомков. Fiber сохраняет своё состояние.

Эвристика 2 — разный тип, полная замена. Если <div> становится <span> или <ComponentA> становится <ComponentB>, React сносит всё поддерево (размонтирует его, уничтожает состояние) и строит новое с нуля. Он не пытается делать дифф через границу типов. Именно поэтому условный рендеринг двух разных компонентов в одном слоте сбрасывает всё состояние — даже если новый компонент выглядит похоже.

Ключи идентифицируют дочерние элементы списка между рендерами. В списке React сопоставляет старые и новые дочерние элементы по их key, а не по позиции. Стабильный ключ говорит React: «это тот же логический элемент, даже если он переместился». В этом и есть весь смысл ключей. React строит карту из key в старый fiber, затем обходит новые дочерние элементы, сопоставляя каждый со старым fiber по ключу. Сопоставленный fiber несёт вперёд всё статeful: значения useState, содержимое useRef, неуправляемое состояние DOM (введённый текст input, отмеченность checkbox, позицию скролла, фокус) и сам DOM-узел.

Почему key={index} — ловушка. С key={index} ключ — это позиция, поэтому при перестановке списка или вставке элемента в начало ключ каждого элемента смещается. React тогда считает, что элемент-по-индексу-0 — «тот же элемент», хотя данные переместились — он сохраняет состояние и DOM старого fiber, но передаёт ему props нового элемента. Видимый баг: чекбокс, отмеченный в строке 3, остаётся отмеченным после удаления строки 1, теперь прикреплённый к тому, что было строкой 4.

Управляемые props обновляются корректно (они передаются заново при каждом рендере); неуправляемое состояние — нет (оно живёт на fiber). key={index} безопасен только для списка, который статичен и никогда не переупорядочивается; для любого динамического списка он молча портит состояние.