Структура данных 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
хуки, запуск которых запланирован после рендеринга компонента.
Давайте разобьем это на шаги и объясним каждый шаг аналогией с оживленным рестораном.
- Фаза начала/обновления: представьте, что вы шеф-повар в оживленном ресторане. Заказы начинают поступать от клиентов, и вам нужно начинать готовить каждое блюдо.
- Создайте новое дерево волокон: точно так же, как вы готовите свежий набор ингредиентов для каждого нового блюда, React создает новое дерево волокон, которое представляет обновленную иерархию компонентов и состояние.
- Согласование волокон: React просматривает дерево волокон и сравнивает новое состояние с предыдущим состоянием, решая, какие компоненты необходимо обновить, создать или удалить. Это все равно, что следовать рецепту и решать, какие ингредиенты нужно добавить, а какие убрать.
- Обновляйте узлы DOM и выполняйте побочные эффекты. Подобно тому, как вы готовите блюдо и представляете его покупателю, React обновляет узлы DOM и выполняет все необходимые побочные эффекты, такие как выборка данных или отправка сетевых запросов.
- Запланируйте дополнительные обновления: представьте, что во время готовки поступает особый запрос. Точно так же, как вам нужно будет выполнить определенные дополнительные задачи, у React могут быть дополнительные обновления для применения, поэтому он повторяет предыдущие шаги для каждого нового обновления.
- Фаза завершения обновления: наконец, точно так же, как вы закончили бы приготовление и подачу блюд, React завершает процесс обновления и повторно отображает приложение с обновленным состоянием и компонентами.
В целом, аналогия с загруженным рестораном подчеркивает, что процесс обновления React Fiber включает в себя постоянную адаптацию к новым заказам, подготовку свежих ингредиентов для каждого блюда, следование рецепту для создания конечного продукта и подачу его клиентам эффективным и масштабируемым способом. .