В React согласование – это алгоритм, который помогает сравнить два дерева DOM и найти разницу между ними. Это помогает React определить, что ему нужно изменить на экране.

Представленный в React 16 Fiber — это новый алгоритм согласования, кульминацией которого стала разработка команды React в течение двух лет исследований. Он направлен на решение многих проблем, связанных с исходным алгоритмом. Таким образом, React Fiber можно рассматривать как повторную реализацию одного из основных алгоритмов React.

С таким фундаментальным изменением происходят глубокие изменения в том, как React работает под капотом, и что это значит для вас как разработчика.

Термин «волокно» относится к древовидной структуре данных React и к тому, как она представляет узел дерева DOM.

Какую проблему решает оптоволокно?

Отображение страницы, реагирование на действия пользователя, запуск Javascript и многое другое обрабатывается основным потоком браузера. Если в какой-то момент наш основной поток будет заблокирован, взаимодействие с пользователем может стать медленным и медленным.

Мы можем безопасно переместить некоторые из этих вещей в другой поток, используя Web Workers, однако они не могут получить доступ к DOM и манипулировать им. Это означает, что вы можете перемещать только тяжелые вычисления или длительные вызовы сетевых запросов, однако вы не можете легко изменить то, что на экране, с помощью Web Worker. Есть обходные пути, однако они, как правило, не являются лучшей практикой.

Поскольку наш код React работает на Javascript, основной поток браузера обрабатывает выполнение цикла рендеринга. Давайте посмотрим, как это выглядело до Fiber.

Реагировать перед волокном

Ниже приведен процесс, который React предпринял перед Fiber для отображения элементов на экране:

  1. React создаст дерево узлов при первом отображении пользовательского интерфейса. Каждый узел в дереве представляет некоторый элемент React.
  2. Создается виртуальное дерево (называемое virtualDOM), которое является клоном визуализированного дерева.
  3. Обходя виртуальное дерево DOM, React будет обновлять DOM в зависимости от того, какие классы или элементы необходимо обновлять всякий раз, когда происходит изменение.
  4. После любого изменения состояния React сравнивает каждый узел из двух деревьев и передает изменения средству визуализации, которое в конечном итоге отображает их на экране.

Весь этот процесс будет происходить синхронно, а это означает, что после его запуска его нельзя будет прервать другим процессом, пока он не будет завершен. Учитывая некоторые дорогостоящие вычисления, это потенциально может замедлить скорость вашего приложения для пользователя.

Кроме того, согласование и рендеринг в DOM не были разделены, поэтому React не может приостановить обход виртуального DOM, чтобы перейти к обработке другого рендеринга. Новые изменения рендеринга также не могут быть вставлены после начала процесса согласования.

Все это предотвращает внесение высокоприоритетных изменений до тех пор, пока виртуальный стек DOM не будет полностью очищен и готов.

Реагировать после волокна

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

Это можно сделать, разбив вычисления виртуального дерева DOM на узлы или «единицы» работы, которые он может зафиксировать в любое время. Это позволяет вам приостанавливать, возобновлять или перезапускать вычисления для различных компонентов.

Давайте посмотрим на процесс рендеринга с помощью Fiber. Как упоминалось ранее, согласование и рендеринг больше не происходят одновременно, поэтому новый процесс разбит на две фазы.

Этап 1 — согласование

  1. React составляет список всех изменений, которые необходимо обработать, а затем отобразить в пользовательском интерфейсе. В это время React также может перейти к обработке другого изменения.
  2. Как только этот список будет вычислен, React запланирует выполнение изменений на следующем этапе.

Этап 2 — Подтверждение

  1. Из запланированных изменений, вытекающих из процесса согласования, React может выбрать визуализацию определенного набора изменений.
  2. После фиксации React уведомляет DOM об отображении изменений, обнаруженных в процессе согласования.

Фазу согласования можно прервать, а фазу фиксации нельзя.

Разделив все на две фазы, React может расставить приоритеты, какие изменения нужно внести в первую очередь. Это поможет вам создавать высокопроизводительные приложения React без задержек. Давайте подробнее рассмотрим все преимущества, которые дает клетчатка.

Преимущества волокна

  1. Прежде всего, вы получаете улучшенную производительность. Имея возможность выйти за пределы стека вызовов и не дожидаясь его очистки, React может приостанавливать или начинать работу по рендерингу, когда это необходимо.
  2. Вы можете обрабатывать ошибки гораздо чище. Вместо того, чтобы показывать белый экран смерти всякий раз, когда возникает ошибка времени выполнения Javascript, вы можете установить границы ошибок, что позволяет вам отображать резервный экран на случай, если что-то пойдет не так.
  3. Вы получаете поддержку для возврата новых типов рендеринга, таких как фрагменты и строки. Вы также можете вернуть несколько элементов из функции рендеринга.
  4. Это повышает производительность вашего пользовательского интерфейса, позволяя создавать расширенные элементы с анимацией, макетами, жестами и многим другим.

Заключение

Fiber — это переписанный один из основных алгоритмов React: согласователь. Цель этого алгоритма — взять два дерева DOM, сравнить их и выяснить, какие изменения были сделаны.

До Fiber React согласовывал и визуализировал все элементы за один раз. Это заблокировало бы основной поток в случае, если бы в дереве DOM было много глубоких изменений. Однако с помощью Fiber процесс согласования и рендеринга разделен на две фазы:

  1. Согласование — React определит все необходимые изменения на основе изменений, обнаруженных в DOM. Затем он создаст список изменений, которые должны произойти. Поскольку в алгоритме используются концепции файберов, React в любой момент может приостановить и возобновить эту работу.
  2. Фиксация — Оттуда React может решить, какой набор изменений отобразить и зафиксировать. Однако, как только процесс рендеринга начался, его нельзя прервать, как можно было бы сделать при согласовании.

Разбивая процесс на две фазы, React лучше расставляет приоритеты, какая работа должна быть выполнена, чтобы обеспечить более быстрое и гладкое восприятие вашего приложения.

Отсюда вы можете начать изучать, как вы действительно можете использовать Fiber для создания интересных вещей, таких как анимация и рендеринг графики. Например, с помощью библиотеки react-three-fiber вы можете создавать высокопроизводительные 3D-модели, которые будут жить в вашем приложении React.

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