Рубрика: база. Часть 1.

Fiber - это тема, знание которой может пройти вам React-собеседование, а на вопросе про reconcillation и рендер можно ответить гораздо интереснее чем кажется. Поехали:

🧱 Основная идея Fiber
React Fiber — это реализация виртуального DOM в виде связанного списка (а не дерева), которая позволяет:
- разбить рендеринг на мелкие задачи (units of work),
- приостанавливать и возобновлять работу,
- реализовать кооперативную многозадачность внутри браузера.

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

🔄 Цикл работы Fiber
Fiber работает в две фазы:

1. Render phase (Work Phase)
React проходит по компонентам и строит новое Fiber-дерево.
- Создает FiberNode для каждого компонента.
- Эта фаза может быть прервана — например, если у пользователя событие click.

2. Commit phase
Вносит изменения в реальный DOM.
-Эта фаза непрерывна и должна быть быстрой.

🧩 Что же такое FiberNode?
Каждый компонент (функция, класс, DOM-элемент) представлен объектом FiberNode:

interface FiberNode {
  type: string | Function;// Тип компонента
  key: string | null;// Ключ для списка
  stateNode: DOM | instance | null; // DOM-узел или экземпляр класса
  child: FiberNode | null;// Первый дочерний узел
  sibling: FiberNode | null;// Следующий "брат"
  return: FiberNode | null;// Родитель
  alternate: FiberNode | null;// Старый Fiber (для сравнения)
  flags: Flags;// Какие изменения внести 
  pendingProps: any;// Новые пропсы
  memoizedProps: any;// Старые пропсы
  memoizedState: any;// Старое состояние
}

🧠 Это похоже на двусвязный список, а не просто дерево — это позволяет гибко перемещаться по узлам.

⚙️ Алгоритм работы: пошагово
- Начинаем с корня (RootFiber) и проходим вниз по дереву.
- Создаём "units of work" — каждый Fiber обрабатывается как отдельная задача.
- React делает depth-first traversal: спускается в child, потом sibling, потом вверх по return.
- Когда все узлы пройдены — React имеет новое дерево.

Далее идет сравнение alternate (старого Fiber) с новым — что поменялось?
- На основе flags (например, Placement, Update, Deletion) формируется список изменений.
- Commit phase: React применяет изменения к DOM за один батч.


📌 Это позволяет React быть асинхронным и отзывчивым, даже при сложных рендерах.

🔁 Double Buffering (alternate)
React использует стратегию двойной буферизации: для каждого узла есть alternate.

current — текущее дерево, отображаемое в DOM.
workInProgress — новое дерево, создающееся в render phase.

После коммита:
workInProgress становится current, а старое дерево отправляется в alternate.

🚦Приоритеты (Lanes)
С React 18 ввели систему Lanes — механизм управления приоритетами работы.

click → высокая приоритетная полоса.
fetch data → низкая.

Fiber может приостановить выполнение низкоприоритетной задачи, чтобы обработать что-то более важное.

💬 Подытожим
Fiber — это архитектура реакта, которая:

✅ Представляет каждый элемент UI как FiberNode, связанный с другими.
✅ Позволяет прерывать работу, планировать и расставлять приоритеты.
✅ Делает React асинхронным и отзывчивым.
✅ Использует две фазы: render (можно прерывать) и commit (синхронная).
✅ Поддерживает time slicing, useTransition, useDeferredValue и другие оптимизации.