Ранее React использовал механизм Stack Reconciler для обновления интерфейсов, что приводило к проблемам с производительностью. Одним из главных недостатков было невозможность приостановить и возобновить рендеринг, что могло вызывать "замораживание" интерфейса при выполнении тяжёлых операций. Чтобы устранить этот недостаток, начиная с React 16, была создана новая архитектура — React Fiber.
❓ Что такое React Fiber?
React Fiber — это переработанная структура внутреннего устройства React, которая управляет процессом рендеринга и согласования (reconciliation). Основное нововведение заключается в том, что теперь React разбивает весь процесс обновления на мелкие задачи, которые можно:
1. Приостанавливать.
2. Прерывать для выполнения более важных операций.
3. Возобновлять с того же места.
4. Отменять обновления, если компонент больше не нужен.
Эта архитектура помогает React быть более отзывчивым и гибким в работе с сложными интерфейсами.
📈 В чём ключевая идея Fiber?
Вместо использования традиционного стека для отслеживания состояния компонентов, Fiber создаёт связанную структуру данных для каждого элемента виртуального DOM. Это позволяет React двигаться вперед и назад по компонентному дереву, задавать приоритет задач и управлять состояниями на уровне узлов.
Каждый узел Fiber содержит:
- Тип компонента (функциональный, классовый или элемент DOM).
- Ссылки на дочерние, родительские и соседние узлы.
- Текущее состояние и приоритет выполнения.
Такой подход позволяет React выполнять задачи в соответствии с их приоритетом:
- Высокий приоритет: действия пользователя (клики, ввод текста).
- Низкий приоритет: обновление анимации или загрузка данных.
🖥 Как это работает на практике?
React Fiber использует две основные фазы рендеринга:
📌 Фаза рендеринга (Render Phase):
React создаёт новое дерево Fiber, вычисляя, какие изменения должны быть сделаны.
Эта фаза может прерываться и возобновляться.
📌 Фаза выполнения (Commit Phase):
Все изменения применяются к реальному DOM.
Происходит быстро и синхронно, чтобы интерфейс обновлялся без задержек.
🛡 Особенности React Fiber:
- Time Slicing: React разбивает выполнение задач на короткие промежутки времени, чтобы не блокировать интерфейс.
- Асинхронный рендеринг: позволяет приостанавливать и возобновлять рендеринг компонентов.
- Гибкое управление задачами: React определяет, какие задачи выполнять первыми, а какие можно отложить, чтобы обеспечить плавное взаимодействие с пользователем.
#frontend #react