Fiber Architecture — React 16+ под капотом

Главная мысль: React — это не просто библиотека для UI. Это сложная система управления деревом компонентов, которая постоянно отвечает на вопрос: «Что изменилось и что нужно обновить на экране?».

Что ты узнаешь:

1. Как React понимает, что нужно обновить
2. Что такое виртуальный DOM и зачем он нужен
3. Почему React 16+ стал таким быстрым
4. Что такое Fiber и как он работает

Важно: это теоретический урок. Ты не будешь писать код, работающий с Fiber напрямую. Но понимание архитектуры сделает тебя лучшим React-разработчиком.

Старый React (Stack Reconciliation):

1. Использовал синхронный рекурсивный алгоритм
2. Рендерил всё дерево за один проход
3. Не мог прервать процесс обновления
4. Блокировал главный поток (UI «зависал» при больших обновлениях)

Проблемы:

1. Анимации тормозили при тяжёлых рендерах
2. Большие списки обрабатывались медленно
3. Нельзя было приоритизировать обновления

Главная мысль: React 15 и старше работал как «одна большая функция» — начал рендерить и не остановится, пока не закончит. Это создавало проблемы с производительностью.

Fiber — это новый движок React, представленный в версии 16.0 (2017 год).

Что такое Fiber

1. Это не библиотека, а архитектура
2. Это переписанный с нуля алгоритм согласования
3. Это способ организации работы React по кусочкам (единицам работы)

Основная идея

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

Что изменилось

1. Асинхронный рендеринг (Concurrent Mode)
2. Приоритизация обновлений
3. Возможность прерывать и возобновлять работу

Очень важно понять два этапа:

Render Phase (можно прервать):

1. React вычисляет, что изменилось
2. Строит новое Fiber-дерево
3. Может быть прервана, приостановлена, возобновлена
4. Не касается DOM

Commit Phase (нельзя прервать):

1. React применяет изменения к DOM
2. Вызываются componentDidMount, componentDidUpdate, useLayoutEffect
3. Должна быть атомарной (всё или ничего)

Главная мысль: вся магия производительности React заключена в Render Phase. React может делать её частями, прерывать и даже отменять, если пришли более важные обновления.

Reconciliation (согласование) — процесс, в котором React определяет, что изменилось в дереве компонентов.

1. Алгоритм согласования основан на двух предположениях: два элемента разных типов создают разные деревья
2. Разработчик может указать, какие дочерние элементы стабильны, с помощью key

Пример:

// Старое дерево
<div>
  <h1>Привет</h1>
  <p>Мир</p>
</div>

// Новое дерево
<div>
  <h1>Пока</h1>
  <p>Мир</p>
</div>

// React сравнивает и понимает:
// 1. h1 изменился (обновляем текст)
// 2. p не изменился (не трогаем)

Как это работает:

1. React создаёт виртуальное DOM-дерево
2. При изменении данных создаётся новое дерево
3. React сравнивает (diff) старое и новое деревья
4. Находит минимальные изменения (patch)
5. Применяет их к реальному DOM

Fiber vs Виртуальный DOM

Главная мысль: виртуальный DOM — это данные. Fiber — это способ работы с этими данными, который позволяет прерывать и возобновлять процесс.

Каждый React-компонент (и каждый DOM-элемент) представлен Fiber-узлом. Это объект, который содержит всю информацию о компоненте.

Что хранит Fiber-узел:

{
  // Тип компонента (div, span, MyComponent)
  type: 'div',
  
  // Ссылка на DOM-элемент или компонент
  stateNode: domElement,
  
  // Ссылки на другие Fiber-узлы (дерево)
  child: childFiber,      // Первый дочерний
  sibling: siblingFiber,  // Следующий брат
  return: parentFiber,    // Родитель
  
  // Данные для обновления
  pendingProps: {...},    // Новые пропсы
  memoizedProps: {...},   // Предыдущие пропсы
  memoizedState: {...},   // Предыдущее состояние
  
  // Эффекты (что нужно сделать в Commit Phase)
  flags: Update | Delete | Placement,
  
  // Альтернативный узел (current и work-in-progress)
  alternate: previousFiber,
}

Важно: Fiber-узлы образуют связный список (linked list), а не дерево. Это позволяет проходиться по ним по одному, прерываясь в любой момент.

React всегда держит в памяти два Fiber-дерева:

Как это работает:

1. При обновлении React копирует current в work-in-progress
2. Изменяет work-in-progress (применяет новые пропсы, вызывает хуки)
3. Когда работа закончена, work-in-progress становится current
4. Старое current становится «альтернативой» для будущих обновлений

Главная мысль: React всегда работает с двумя копиями дерева. Это позволяет прерывать работу, не теряя данные, и «откатывать» изменения, если что-то пошло не так.

Как это работает:

1. React начинает обновление
2. Разбивает работу на маленькие кусочки (Fiber-узлы)
3. После каждого кусочка проверяет: не пришло ли более важное обновление?
4. Если пришло — прерывает текущую работу и начинает новую
5. Если нет — продолжает

Пример:

// Пользователь вводит текст в поле поиска
// Каждая буква — это обновление

// Без Concurrent Mode:
// React блокирует UI на время рендера каждого обновления
// При быстром вводе текст может тормозить

// С Concurrent Mode:
// React прерывает рендер между буквами
// Приоритет отдаётся вводу пользователя
// UI остаётся отзывчивым

Fiber-архитектура позволяет назначать приоритеты разным обновлениям:

Как это помогает:

1. Пользовательский ввод (высокий приоритет) не блокируется загрузкой данных (низкий приоритет)
2. Анимация всегда плавная
3. Приложение остаётся отзывчивым

Главная мысль: все современные возможности React (Concurrent Mode, Suspense, Hooks) стали возможны благодаря переходу на Fiber-архитектуру.

Визуализация: нарисуй на бумаге, как связаны Fiber-узлы (через child, sibling, return). Представь дерево компонентов:

App
 ├── Header
 │    └── Navbar
 └── Content
      ├── Article
      └── Sidebar

Размышление: Почему React не может прервать Commit Phase? Что произойдёт, если он прервётся посередине применения изменений к DOM?

Исследование: Открой React DevTools в браузере и посмотри на вкладку «Profiler». Запиши профилирование и посмотри, как React показывает время рендера разных компонентов.

Дополнительно: Прочитай статью (откроется в новой вкладке)React Fiber Architecture — это документация от разработчиков React. (Но будь готов к сложному английскому!)

Проверка: объясни своими словами, что такое Fiber и зачем он нужен.

В следующем уроке разберём React Router — маршрутизацию в React-приложениях. Ты узнаешь, как создавать многостраничные приложения с разными URL, настраивать навигацию, защищённые маршруты и работать с параметрами. Это превратит твоё SPA в полноценное многостраничное приложение.