День 2: Як React оновлює UI
Учора я дізнався, що робить React. Сьогодні я дізнався, як він це робить.
Раніше я замислювався, як React точно знає, що саме потрібно змінити в UI. Якщо ви зміните одне слово в абзаці, чи React перебудує всю сторінку? Ні. Він використовує розумний процес, щоб залишатися швидким.
Ось розбір циклу оновлення React.
Reconciliation та Diffing
Reconciliation — це стратегія. Diffing — це безпосередній метод. React порівнює нове дерево Virtual DOM зі старим.
Порівняння двох дерев є складним завданням для комп'ютерів. Стандартний алгоритм занадто повільний. React залишається швидким завдяки двом припущенням:
- Якщо тип елемента змінюється, React знищує старе дерево і будує нове.
- Якщо тип залишається незмінним, React оновлює лише змінені атрибути.
Це дозволяє React працювати за час O(n). Завдяки цьому оновлення здаються миттєвими.
Дві фази
React розділяє свою роботу на два окремі етапи:
Render Phase Це етап планування. React викликає ваші компоненти та обчислює зміни. На цьому етапі він не торкається Real DOM. Уявіть, що це архітектор, який малює креслення.
Commit Phase Це етап будівництва. React застосовує обчислені зміни до Real DOM. Ця частина є синхронною. Щойно вона починається, вона не зупиняється, доки робота не буде завершена.
Важливо: React оновлює DOM, але браузер малює пікселі. React відповідає за структуру. Браузер відповідає за візуальний рендеринг.
React Fiber
До React 16 рендеринг був синхронним. Якщо рендеринг займав багато часу, браузер зависав. Ви не могли ні прокручувати сторінку, ні друкувати.
Fiber змінив це. Fiber — це двигун, який керує Render Phase. Він дозволяє React:
- Призупиняти роботу і повертатися до неї пізніше.
- Пріоритезувати термінові оновлення (наприклад, введення тексту користувачем) над фоновими даними.
- Розбивати роботу на маленькі частини.
Virtual DOM — це структура даних. Fiber — це алгоритм, який працює з цими даними.
Підсумок процесу:
• Зміна стану (State). • Render Phase: React планує зміни за допомогою Diffing. • Commit Phase: React оновлює Real DOM. • Браузер: Layout, Paint та Composite. • Пікселі з'являються на екрані.