Структура данных React Fiber (RFDS) — это внутреннее представление дерева компонентов React, которое позволяет React эффективно обновлять и отображать компоненты. Он был представлен в React 16 как новый алгоритм согласования для замены старого алгоритма на основе стека, который использовался в предыдущих версиях React.

Структура данных представляет собой связанный список узлов волокна, где каждый узел представляет собой компонент или элемент в дереве компонентов. Узлы волокна содержат информацию о компоненте или элементе, такую ​​как тип компонента, свойства, состояние и т. д.

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

Что такое оптоволоконный узел?

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

{
  // Type of the component or DOM node (e.g., "div", "App", "Button")
  type: 'div',

  // Associated DOM node (if applicable)
  stateNode: document.createElement('div'),

  // Current fiber (the latest fiber representing this component)
  // Used to check if this fiber has been updated or not
  // during the next reconciliation phase
  return: null,
  child: null,
  sibling: null,
  index: 0,

  // Alternate fiber (the previous fiber representing this component)
  // Used to perform side effects and cleanup operations on the DOM
  // during the next commit phase
  // This is only used for non-concurrent mode
  alternate: null,

  // Memoized props and state (the latest props and state for this component)
  // Used to check if the component needs to be updated during the next
  // reconciliation phase
  memoizedProps: {},
  memoizedState: {},

  // Expiration time (the deadline for when this component needs to be updated)
  // Used to prioritize which components to update during the next reconciliation phase
  expirationTime: 0,

  // Effect tag (a bitmask that describes what side effects this component has)
  // Used to perform side effects and cleanup operations on the DOM
  // during the next commit phase
  effectTag: 0
}
  • type: Тип компонента, который представляет волокно. Это может быть либо функциональный компонент, либо компонент класса.
  • ключ: необязательная строка, которая однозначно идентифицирует экземпляр компонента. Это используется React для оптимизации процесса согласования путем повторного использования существующих компонентов, когда это возможно.
  • props: объект, содержащий свойства, которые были переданы компоненту.
  • stateNode: ссылка на экземпляр компонента, который представляет волокно. Для компонентов класса это экземпляр класса компонента. Для функциональных компонентов это ссылка на саму функцию.
  • child: указатель на первое дочернее волокно.
  • sibling: указатель на следующее родственное волокно.
  • return: указатель на родительское волокно.

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

  • альтернатива: ссылка на соответствующее волокно из предыдущей сверки. Это позволяет React сравнивать текущее дерево волокон с предыдущим деревом волокон и определять изменения, которые необходимо внести в DOM.
  • EffectTag: флаг, указывающий тип обновления, которое необходимо выполнить в DOM. Это может включать обновления свойств существующих узлов DOM, создание или удаление новых узлов DOM или другие типы обновлений.
  • firstEffect: указатель на первое волокно в связанном списке волокон, представляющих узлы DOM, которые необходимо обновить в результате текущего волокна.
  • lastEffect: указатель на последнее волокно в связанном списке.
  • nextEffect: указатель на следующее волокно в связанном списке.

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

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

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

Давайте разобьем это на шаги и объясним каждый шаг аналогией с оживленным рестораном.

  1. Фаза начала/обновления: представьте, что вы шеф-повар в оживленном ресторане. Заказы начинают поступать от клиентов, и вам нужно начинать готовить каждое блюдо.
  2. Создайте новое дерево волокон: точно так же, как вы готовите свежий набор ингредиентов для каждого нового блюда, React создает новое дерево волокон, которое представляет обновленную иерархию компонентов и состояние.
  3. Согласование волокон: React просматривает дерево волокон и сравнивает новое состояние с предыдущим состоянием, решая, какие компоненты необходимо обновить, создать или удалить. Это все равно, что следовать рецепту и решать, какие ингредиенты нужно добавить, а какие убрать.
  4. Обновляйте узлы DOM и выполняйте побочные эффекты. Подобно тому, как вы готовите блюдо и представляете его покупателю, React обновляет узлы DOM и выполняет все необходимые побочные эффекты, такие как выборка данных или отправка сетевых запросов.
  5. Запланируйте дополнительные обновления: представьте, что во время готовки поступает особый запрос. Точно так же, как вам нужно будет выполнить определенные дополнительные задачи, у React могут быть дополнительные обновления для применения, поэтому он повторяет предыдущие шаги для каждого нового обновления.
  6. Фаза завершения обновления: наконец, точно так же, как вы закончили бы приготовление и подачу блюд, React завершает процесс обновления и повторно отображает приложение с обновленным состоянием и компонентами.

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