intermediate

Reconciliation

Понимайте, как React сравнивает деревья элементов, сохраняет идентичность компонентов и планирует обновления DOM.

Reconciliation — сравнение нового дерева элементов с предыдущим и решение, какие DOM-узлы переиспользовать, обновить или удалить. Тип компонента и `key` на той же позиции определяют, сохранится ли идентичность экземпляра. Смена типа на слоте размонтирует старое поддерево.

Фаза render должна быть чистой; фаза commit применяет изменения DOM и запускает layout effects. Понимание разделения объясняет, почему render в разработке может выполняться несколько раз и почему побочные эффекты живут в effects, а не в render.

На интервью просят проследить изменение prop через render, diff и commit.

На интервью объясняйте концепцию на конкретном примере и называйте поведение, которое проверяют.

Типовые ошибки: скрывать поток данных, дробить компоненты чрезмерно и выполнять побочные эффекты в render.

Компромисс часто между ясностью и переиспользованием или между явными props и удобством.

Чеклист:

  • Тот же тип компонента и key сохраняют state экземпляра.
  • Смена типа сбрасывает state поддерева.
  • Render чистый; commit работает с DOM.