React fiber та процес оновлення віртуального DOM

#Що таке React Fiber?

React Fiber — це новий механізм узгодження в React 16, який переосмислює процес рендерингу та оновлення. Його основна мета — зробити рендеринг віртуального DOM інкрементальним: розбити його на маленькі "завдання", керувати пріоритетами та підвищити чутливість інтерфейсу навіть при великих обсягах роботи.

#Основні переваги Fiber

1. Пріоритети оновлень

• Завдання з вищим пріоритетом (анімції, дії користувача) не блокуються і можуть виконуватись раніше.

2. Розподіл рендерингу

• Переривати та відновлювати рендеринг, щоб уникнути "заморожування" інтерфейсу.

3. Конкурентний режим

• Fiber слугує основою для Конкурентного режиму, що дозволяє React працювати асинхронно та адаптуватись до поточного навантаження.

---

#Процес оновлення віртуального DOM

React використовує Віртуальний DOM для ефективного внесення змін до реального DOM. Це реалізовано за допомогою Fiber, який описує структуру компонентів і відстежує їх зміни.

#Фаза рендерингу (Узгодження)

1. Ініціація оновлення

• Кожна зміна стану (через setState, useState) потрапляє в чергу оновлень (Update Queue).
• React може об'єднувати кілька викликів setState в одній події.

2. Створення дерева в процесі роботи

• React проходить через дерево Fiber, створюючи "чернеткову" версію Віртуального DOM (Work In Progress tree).
• На цьому етапі викликаються функції рендерингу (або методи render для класових компонентів), в результаті чого React отримує нове представлення UI.

3. Диференціювання

• React порівнює (diff) нову версію Віртуального DOM (Work In Progress) зі старою.
• Якщо типи елементів (компонентів) збігаються, оновлюються лише змінені атрибути та дочірні вузли. Якщо тип змінюється, React перебудовує гілку з нуля.

4. Робота з ключами (key)

• Для списків, перетворення та динамічних елементів ключі (key) допомагають зіставити оригінальні та нові вузли, уникаючи повної перебудови.

5. Збір побічних ефектів

• На цьому етапі React визначає, які DOM вузли потрібно додати, видалити або змінити.
• Формується "список ефектів" — що саме має статися на наступному кроці.

6. Урахування пріоритетів (Fiber)

• Кожне оновлення в Fiber має пріоритет. Якщо з'являється нове завдання з вищим пріоритетом (клік кнопки, прокрутка), React може перервати поточний рендеринг і повернутись до нього пізніше.

Важливо: На етапі рендерингу зміни в реальному DOM ще не застосовуються.

---

#Фаза коміту (Застосування узгодження)

1. Застосування змін до реального DOM

• React бере "список ефектів" і точно оновлює реальний DOM: змінює атрибути, додає або видаляє вузли.

2. Виклики життєвого циклу та хуків

• У класових компонентх це componentDidMount, componentDidUpdate, componentWillUnmount.
• У функціональних компонентх — useEffect, useLayoutEffect.

3. Пакетні оновлення

• Усі зміни в межах одного циклу подій об'єднуються в один пакет, щоб уникнути кількох малих перерисовок.

---

#Конкурентний режим та Fiber

Fiber є основою Конкурентного режиму, який забезпечує більш гнучкі механізми контролю рендерингу. У цьому режимі React може частково показувати оновлений інтерфейс, не блокуючи решту програми.

#Переваги Конкурентного режиму

• Плавні анімації та переходи.
• Асинхронна обробка складних обчислень без "заморожування" інтерфейсу.
• Пріоритетний рендеринг важливих завдань.

---

#Ключові ідеї

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

• Зберігає та оновлює "чернеткову" структуру UI в пам'яті, без важких операцій з реальним DOM.

2. Диференціювання

• Знаходить відмінності між старими та новими версіями Віртуального DOM.

3. Узгодження

• Застосування змін до реального DOM.

4. Fiber

• Керує пріоритетами, перериває та відновлює рендеринг, розбиваючи його на маленькі частини.

Розгляньте особливості продуктивності:

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

#Суміжні статті

• virtual-dom
• reconciliation