Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить Fiber-архітектура в React?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**React Fiber** робить рендеринг **асинхронним, перериваним і пріоритетним**, що дозволяє React **гнучко розподіляти роботу** і **оновлювати UI без лагів**. **Ключове:** Fiber розбиває велике оновлення на дрібні частини і виконує їх по черзі, з можливістю призупинити, поновити або скасувати залежно від пріоритету.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**React Fiber** робить рендеринг **асинхронним, перериваним і пріоритетним**, що дозволяє React **гнучко розподіляти роботу** і **оновлювати UI без лагів**. --- ## До Fiber (React < 16) Рендеринг React раніше був **синхронним і "блокувальним"**: - При зміні стану React **рекурсивно проходив усе дерево компонентів**. - Якщо дерево велике - React **не міг перерватися**. - У підсумку браузер **"завмирав"**, поки React не закінчить роботу. Проблема: якщо користувач друкує, скролить або рухає мишею, а React "зайнятий" великим ререндером - інтерфейс **підвисає**. --- ## Що таке Fiber **Fiber** - це **переписана реалізація Virtual DOM**, де кожен компонент представлений як **окремий вузол (Fiber node)** зі своєю "міні-задачею". Можна сказати, що **Fiber = "одиниця роботи React"**. Тепер React: - **розбиває велике оновлення на дрібні частини (fibers)**, - **виконує їх по черзі**, - і може **призупиняти, поновлювати або скасовувати** їх залежно від пріоритету. --- ## Основні цілі Fiber | Ціль | Що дає | | --- | --- | | Асинхронний рендеринг | React може "робити паузи", щоб не блокувати інтерфейс | | Пріоритет оновлень | Важливі задачі (введення тексту, анімація) виконуються першими | | Можливість поновлення | React може призупинити роботу і повернутися пізніше | | Інкрементальний рендеринг | Великі дерева можна оновлювати частинами | | База для нових можливостей (Concurrent Mode, Suspense) | Реалізує "розумний" контроль рендерингу | --- ## Як це працює покроково 1. **Зміна стану** (`setState`, `useState`) → React ставить оновлення в чергу. 2. React починає **Render Phase (фазу підготовки)**: - Створює "fiber-вузли" для кожного компонента. - Обчислює, які частини потрібно оновити. - Може **призупинятися**, якщо в браузері є важливіші задачі. 3. Коли все готово → **Commit Phase (фаза застосування)**: - React **одним пакетом застосовує зміни** до DOM. --- ## Fiber у дії (приклад) Припустимо, у тебе 1000 карток, і React має їх перемалювати. - **Раніше (до Fiber):** React відрисовував усі 1000 підряд. UI "завмирав" на 200-300 мс. - **Тепер (з Fiber):** React може сказати: > "Я перемалюю 200 карток, потім дам браузеру подихати, > обробаю скрол, потім продовжу з рештою 800." Це створює **відчуття плавності** і **відсутності "лагів"**. --- ## Структура Fiber-вузла Кожен "fiber" зберігає інформацію про компонент: | Властивість | Що зберігає | | --- | --- | | `type` | Тип компонента (функція, клас, HTML-елемент) | | `key` | Унікальний ключ елемента | | `pendingProps` | Нові пропси | | `memoizedProps` | Старі пропси | | `stateNode` | Сам екземпляр компонента (для класових) | | `return`, `child`, `sibling` | Посилання на сусідні fiber-вузли | | `flags` | Що потрібно зробити (оновити, видалити, додати) | | `alternate` | Посилання на попередню версію вузла (для diff) | Це дозволяє робити оновлення **на рівні вузлів**, а не всього дерева. --- ## Fiber і фази рендерингу React тепер чітко розділяє: 1. **Render phase (підготовка):** - React будує нове дерево fiber-вузлів. - Може бути **перервана** і **поновлена**. 2. **Commit phase (застосування):** - React застосовує зміни до DOM. - **Не може бути перервана.** --- ## Пріоритети задач (Scheduler) Fiber використовує **планувальник (Scheduler)**, який вирішує, **що оновити в першу чергу**: | Пріоритет | Приклад | | --- | --- | | Високий | Введення тексту, кліки, анімації | | Середній | Оновлення даних, переходи сторінок | | Низький | Фонові задачі, lazy-завантаження контенту | React може тимчасово **відкласти низькопріоритетні задачі**, щоб **спочатку обробити критичні** (ввід, скрол тощо). --- ## Fiber став основою для: **Concurrent Rendering** - React може рендерити кілька версій UI одночасно (наприклад, "нову" і "стару"). **Suspense** - React може "призупинити" компонент, поки не завантажаться дані. **Transitions (useTransition)** - Дозволяє оновленням бути "м'якими" (без мерехтіння). --- ## Підсумок | Що робить Fiber | Навіщо потрібно | | --- | --- | | Ділить рендеринг на дрібні задачі | Щоб не блокувати головний потік | | Дозволяє призупиняти і поновлювати рендеринг | Для плавності і відгукливості UI | | Додає пріоритетність оновлень | Щоб важливі задачі йшли першими | | Керує diffing і reconciliation | Більш гнучко й ефективно | | Лежить в основі Concurrent Mode і Suspense | Нові можливості React 18+ |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.