День 2: Как React обновляет UI

Вчера я узнал, что делает React. Сегодня я узнал, как он это делает.

Раньше я задавался вопросом, как React понимает, что именно нужно изменить в UI. Если вы измените одно слово в абзаце, перестроит ли React всю страницу? Нет. Он использует умный процесс, чтобы оставаться быстрым.

Вот разбор цикла обновления React.

Reconciliation и Diffing

Reconciliation — это стратегия. Diffing — это сам метод. React сравнивает новое дерево Virtual DOM со старым.

Сравнение двух деревьев — сложная задача для компьютеров. Стандартный алгоритм работает слишком медленно. React сохраняет высокую скорость благодаря двум предположениям:

  • Если тип элемента меняется, React уничтожает старое дерево и строит новое.
  • Если тип остается прежним, React обновляет только изменившиеся атрибуты.

Это позволяет React работать за время O(n). Благодаря этому обновления кажутся мгновенными.

Две фазы

React разделяет свою работу на два отдельных этапа:

  1. Render Phase Это этап планирования. React вызывает ваши компоненты и вычисляет изменения. На этом этапе он не касается Real DOM. Представьте, что это архитектор, рисующий чертеж.

  2. 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. • Пиксели появляются на экране.

Источник: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f