Що таке reconciliation?

ReactMiddle~2 хв читання

Визначення

Reconciliation (узгодження) - це процес порівняння старого і нового дерева Virtual DOM, у ході якого React визначає, які саме зміни потрібно внести в реальний DOM, щоб інтерфейс відповідав актуальному стану даних.

Як це працює (покроково)

Ти змінюєш стан (state або props):

javascript

setCount(count + 1);

React викликає повторний рендер компонента -> створюється нове дерево Virtual DOM.
React порівнює нове і старе дерево Virtual DOM:

Якщо вузол того самого типу (<div> -> <div>), він зберігає DOM-елемент і оновлює лише змінені атрибути.
Якщо тип змінився (<div> -> <span>), React видаляє старий вузол і створює новий.
Якщо порядок елементів змінився (наприклад, у списку), React використовує ключі (key), щоб зрозуміти, який елемент перемістився, а який додано/видалено.

Після порівняння React вносить мінімальні зміни в реальний DOM.

Приклад

Було:

javascript

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Стало:

javascript

<ul>
  <li>A</li>
  <li>C</li>
  <li>D</li>
</ul>

React робить:

Порівнює обидва дерева Virtual DOM.
Бачить, що:

A залишився на місці
B зник
C перемістився вгору
D додався

Оновлює лише необхідні частини DOM, без повної перемальовки.

Алгоритм reconciliation

React використовує оптимізований "diffing algorithm", заснований на кількох евристиках:

Різні типи елементів -> перерендер вузла

javascript

<div> -> <span> // замінюється повністю

Однакові типи -> оновлення властивостей

javascript

<button disabled={false}> -> <button disabled={true}>
// React просто змінить атрибут

Списки і key Ключ допомагає React відрізняти елементи між рендерами:

javascript

{items.map(item => <li key={item.id}>{item.text}</li>)}

Без key React може помилково видаляти і створювати елементи заново, втрачаючи фокус, анімації і стан.

Навіщо потрібен reconciliation

Без цього процесу React не знав би, що саме потрібно змінити, і просто перемальовував би все дерево заново -> повільно й неефективно.

За допомогою reconciliation React:

працює швидко (мінімум змін у DOM),
залишається декларативним (ти описуєш "що", не думаючи "як"),
зберігає стани компонентів при часткових оновленнях.

Візуальна аналогія

Уяви, що React - це текстовий редактор:

У тебе є стара версія документа (старий Virtual DOM);
Ти вносиш правки (новий Virtual DOM);
React порівнює дві версії і вносить лише відмінності, замість того щоб передруковувати весь текст.

Підсумок

Термін	Що означає
Virtual DOM	Копія реального DOM у пам'яті
Diffing	Порівняння старого і нового Virtual DOM
Reconciliation	Застосування різниці до реального DOM
Key	Підказка React, який елемент відповідає якому під час порівняння

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.