Что такое Fiber в React?

Question

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

YeaHub · Accepted Answer

React Fiber — это полный пересмотр ядра алгоритма согласования (reconciliation) в React. Он был представлен в React 16 и заменил старый стековый реконсилер, который работал синхронно и мог блокировать главный поток браузера, вызывая "подвисания" интерфейса при сложных обновлениях. Основная цель Fiber — сделать процесс рендеринга инкрементальным, прерываемым и управляемым по приоритетам.Как работает FiberFiber представляет каждую единицу работы (например, компонент) как "волокно" (fiber) — объект JavaScript, содержащий информацию о компоненте, его входных параметрах (props), состоянии (state) и связи с другими волокнами (родительскими, дочерними, соседними). Это позволяет React строить "дерево волокон", параллельное виртуальному DOM.Ключевые возможности, которые даёт Fiber:Инкрементальный рендеринг: Работа разбивается на небольшие фрагменты, которые могут выполняться в течение нескольких кадров анимации (frame).Возможность приостановки, прерывания и повторного использования работы: React может приостановить рендеринг для обработки более приоритетных задач (например, пользовательского ввода), а затем возобновить его.Приоритизация обновлений: Разные типы обновлений (например, анимация vs. загрузка данных) получают разные приоритеты.Конкурентность: Стала основой для Concurrent React, позволяющего готовить несколько версий UI одновременно.Практическое применение и примерFiber работает "под капотом", и разработчики обычно не взаимодействуют с ним напрямую. Однако его преимущества становятся видны при использовании функций, построенных на этой архитектуре, таких как useTransition, useDeferredValue или Suspense для загрузки данных.Рассмотрим упрощённый пример, демонстрирующий, как конкурентные возможности, основанные на Fiber, позволяют сохранять отзывчивость интерфейса:import { useState, useTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  // useTransition использует механизмы Fiber для отложенного рендеринга
  const [isPending, startTransition] = useTransition();

return (

{isPending && Загрузка...}
      
        {results.map(item => (
          {item.name}
        ))}

);
}

// Имитация асинхронного запроса
async function fetchResults(query) {
  // ... запрос к API
  return [];
}В этом примере обновление поля ввода (setQuery) имеет высокий приоритет и выполняется сразу, обеспечивая мгновенную реакцию. Тяжёлое обновление состояния результатов (setResults) обёрнуто в startTransition, что говорит React отложить этот рендеринг, если есть более важные задачи (например, продолжение ввода пользователем). Флаг isPending позволяет показать индикатор загрузки. Вся эта логика приоритизации стала возможной благодаря архитектуре Fiber.ВыводReact Fiber — это фундаментальная переработка движка рендеринга, которая превратила React из синхронной библиотеки в систему, способную к инкрементальному и конкурентному обновлению интерфейса. Его стоит применять неявно, используя современные функции React (Concurrent Features), когда требуется высокая отзывчивость сложных интерфейсов, плавная анимация и эффективная обработка фоновых задач без блокировки пользовательского взаимодействия.