Віртуальний DOM у React

Віртуальний DOM — це легка копія реального DOM, що зберігається в оперативній пам'яті.

React оновлює цю копію замість безпосередньої модифікації реального DOM, щоб уникнути виклику непотрібних "дорогих" операцій (layout, painting, reflow) у браузері.

Коли всі зміни внесені, React порівнює стару та нову версії Віртуального DOM (diffing) і точно оновлює реальний DOM (reconciliation).

---

#Евристичний алгоритм O(n)

React застосовує ефективний алгоритм з двома ключовими припущеннями:

1. Різні типи елементів → різні дерева

• Два елементи з різними типами створюють різні дерева. Порівнюючи два дерева, React спочатку порівнює два кореневі елементи. Коли кореневі елементи мають різні типи, React знищує старе дерево і будує нове з нуля.
• Якщо тип не змінюється, оновлюються лише змінені атрибути та дочірні вузли.

2. Значення key для дітей

• При зміщенні елементів у списку, ключі (key) дозволяють React зрозуміти, які елементи залишилися, які були додані, а які видалені.
• Це економить ресурси та зменшує повторні рендери.

---

#Кроки оновлення (спрощено)

1. Оновлення Віртуального DOM

React захоплює зміни (наприклад, виклик setState або useState).

2. Diffing

React порівнює попередній Віртуальний DOM з новим, визначаючи відмінності.

3. Reconciliation

• Тільки змінені частини реального DOM повторно рендеряться.
• Оновлення виконуються пакетами, а не після кожної дрібної зміни.

читати далі

---

#Ключові моменти

• Мінімізація роботи з реальним DOM: React мінімізує "дорогі" операції браузера.
• Інкапсуляція: Компоненти працюють зі своїм станом без ручного контролю за reflow/layout.
• Легке масштабування: Алгоритм дозволяє писати більш масштабований та підтримуваний код.

Важливий нюанс:

Якщо батьківський компонент рендериться, за замовчуванням його дочірні компоненти також повторно рендеряться, якщо не застосовуються додаткові оптимізації (React.memo, shouldComponentUpdate тощо).