Что такое Fiber node?

Что такое Fiber node?

Fiber node — это фундаментальная концепция в архитектуре React, представляющая собой виртуальный объект, который описывает компонент, его состояние, свойства и связи с другими элементами. Это часть нового алгоритма согласования (reconciliation), известного как Fiber Architecture, который был внедрён в React 16 для решения проблем с производительностью, особенно в контексте асинхронного рендеринга и приоритизации обновлений.

Основная роль Fiber node

Fiber node служит "единицей работы" (unit of work) в React. Каждый компонент, элемент DOM или даже текстовый узел в React-приложении представлен своим собственным Fiber node. Эти узлы организуются в связный список (так называемое Fiber tree), что позволяет React эффективно обходить и обрабатывать обновления, разбивая работу на небольшие фрагменты.

Структура Fiber node

Fiber node — это обычный JavaScript-объект со множеством полей. Вот ключевые из них:

// Примерный вид Fiber node (упрощённо)
const fiberNode = {
  // Идентификация
  tag: FunctionComponent | ClassComponent | HostComponent, // тип компонента
  key: null | string,                                      // ключ для списков
  elementType: Function | string,                          // тип элемента (например, 'div', MyComponent)
  
  // Связи в дереве
  return: Fiber | null,    // родительский Fiber
  child: Fiber | null,     // первый дочерний Fiber
  sibling: Fiber | null,   // следующий соседний Fiber
  
  // Состояние и свойства
  stateNode: ComponentInstance | DOMNode, // ссылка на реальный экземпляр (класс или DOM-узел)
  pendingProps: Object,                   // новые props, которые нужно применить
  memoizedProps: Object,                  // props, использованные в последнем рендере
  memoizedState: Object,                  // состояние (state) компонента
  
  // Эффекты и обновления
  updateQueue: UpdateQueue | null,        // очередь обновлений (например, setState)
  effectTag: Placement | Update | Deletion, // тип эффекта для фазы коммита
  nextEffect: Fiber | null,               // ссылка на следующий узел с эффектом
  firstEffect: Fiber | null,              // первый дочерний узел с эффектом
  lastEffect: Fiber | null,               // последний дочерний узел с эффектом
  
  // Приоритет и планирование
  expirationTime: number,                 // время "истечения" для приоритета задачи
  alternate: Fiber | null,                // ссылка на альтернативный Fiber (для двойного буферинга)
};

Как работает Fiber Architecture

Fiber Architecture перерабатывает процесс рендеринга в две основные фазы:

• Фаза рендеринга (Render/Reconciliation Phase): React обходит Fiber tree, создаёт или обновляет Fiber nodes, вычисляет изменения, но не применяет их к DOM. Эта фаза может быть прервана, если требуется обработать более приоритетные задачи (например, пользовательский ввод).
• Фаза коммита (Commit Phase): React синхронно применяет все собранные изменения к DOM. Эта фаза не прерывается, что гарантирует консистентность интерфейса.

Преимущества Fiber node

• Приоритизация обновлений: React может приостанавливать, возобновлять или отменять рендеринг низкоприоритетных задач (например, обновления от анимаций) в пользу высокоприоритетных (клики, ввод текста).
• Инкрементальный рендеринг: Работа разбивается на небольшие фрагменты, что предотвращает блокировку основного потока браузера.
• Возможности для Concurrent Mode: Fiber закладывает основу для конкурентного режима, где React может готовить несколько версий UI одновременно.
• Эффективное обновление: Связный список Fiber nodes позволяет обходить дерево без рекурсии, что даёт больше контроля над процессом.

Пример работы Fiber node

Допустим, у нас есть компонент:

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

React построит Fiber tree примерно так:

• Fiber для App (FunctionComponent) будет иметь child, указывающий на Fiber для div.
• Fiber для div (HostComponent) будет иметь child на Fiber для h1 и sibling на Fiber для p.
• Каждый узел связан через return с родителем, что позволяет легко подниматься вверх по дереву.

Заключение

Fiber node — это сердце современного React, которое превратило библиотеку из синхронного рендерера в асинхронную, отзывчивую систему. Благодаря Fiber Architecture React стал способен обрабатывать сложные интерфейсы с плавными анимациями и быстрым откликом, сохраняя при этом декларативную модель разработки. Понимание Fiber важно для оптимизации производительности и глубокой работы с React, хотя в повседневной разработке это чаще скрытая абстракция.