Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке «Fiber architecture»?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Fiber architecture** - це внутрішній механізм React (введений у React 16), який керує процесом рендерингу компонентів: розбиває оновлення на частини, призупиняє й відновлює рендер, надає пріоритет важливішим завданням. **Ключове:** Fiber перетворює рендеринг на кооперативний та асинхронний процес, що можна призупиняти й продовжувати.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Коротка відповідь **Fiber architecture** - це **внутрішній механізм React** (введений у React 16), який керує **процесом рендерингу компонентів**. Він дозволяє React: - **розбивати оновлення на частини**, - **призупиняти та відновлювати рендер**, - **надавати пріоритет важливішим завданням**, - і **робити інтерфейс чутливим навіть за важких обчислень**. --- ## Чому це знадобилося До React 16 React використовував **стекову рекурсивну архітектуру**: - Коли потрібно було оновити дерево компонентів, React проходив усе дерево цілком, рекурсивно. - Якщо компонент був важким або дерево великим, браузер «завмирав» на частку секунди. Це означало фризи, втрату FPS, «зависаючий» UI. --- ### Проблема «старого React» Уяви: - У тебе є складний застосунок із сотнями компонентів; - Користувач вводить щось у input; - React починає перерахунок усього дерева компонентів; - Поки він не закінчить, нічого іншого в браузері не може відбутися (включно з кліками та анімаціями). Це було синхронно й непереривано. --- ## Що робить Fiber React Fiber вирішує цю проблему, перетворюючи процес рендерингу на кооперативний та асинхронний. Тепер React може: 1. Розбивати оновлення на дрібні частини (units of work); 2. Виконувати їх покроково; 3. Зупинятися й продовжувати, якщо браузеру потрібно зробити щось важливіше (наприклад, обробити користувацький ввід); 4. Призначати пріоритети завданням. Тобто Fiber - це механізм «запланованого» рендера. --- ## Що таке «Fiber» буквально «Fiber» - це об'єкт, що представляє одиницю роботи (один вузол дерева компонентів). Кожен компонент React усередині тепер представлений як Fiber-вузол, у якому React зберігає: - посилання на тип компонента (function, class, HostComponent тощо); - його props, state, ref, return, sibling, child; - пріоритет оновлення (термінове / нетермінове); - і інформацію про те, чи була в нього помилка або ефект. По суті це нова структура даних, що описує дерево рендера. --- ## Як працює Fiber (покроково) 1. React отримує сигнал, що потрібно оновити UI (наприклад, змінився state). 2. React створює нове «дерево Fiber», копіюючи старе й оновлюючи змінені частини. 3. Це дерево обробляється у два етапи: --- ### 1. Render phase (фаза обчислення) - React рекурсивно створює нове дерево Fiber; - обчислює, що змінилося; - може призупиняти або переривати цей процес; - результат - «список змін», які потрібно внести в DOM. Ця фаза може бути перервана та відновлена (асинхронна). --- ### 2. Commit phase (фаза застосування) - React застосовує зміни до реального DOM; - викликає useEffect, componentDidMount, componentDidUpdate тощо. Ця фаза завжди синхронна й непереривана (щоб уникнути «рваних» UI-станів). --- ## Переваги Fiber Architecture | Можливість | Що це дає | |---|---| | Розділення роботи на дрібні завдання | Не блокує UI | | Призупинення та відновлення рендера | Можна робити анімації, ввід, скрол під час оновлень | | Пріоритети оновлень | Важливі завдання виконуються раніше (наприклад, введення тексту) | | Повторне використання проміжних результатів | Підвищує продуктивність | | Основа для Concurrent Mode | Підтримка «розумної» багатопотокової поведінки (React 18+) | --- ## Fiber і Concurrent Rendering Завдяки Fiber React 18 отримав Concurrent Rendering - спосіб рендерити частини інтерфейсу асинхронно та з пріоритетами. Приклади: - startTransition() - відкладає неважливі оновлення; - useDeferredValue() - дозволяє UI не «стрибати» під час швидкого вводу; - Suspense - відкладений рендер із «заглушками». Усе це стало можливим лише завдяки Fiber. --- ## Візуальна аналогія Уяви React як художника: - До Fiber: художник малює всю картину цілком, не піднімаючи голови, поки не закінчить. Навіть якщо ти кличеш його, він не реагує. - З Fiber: художник малює частинами, може зупинитися, щоб відповісти на запитання або зробити каву, а потім продовжує з того місця, де зупинився. --- ## Підсумок | Параметр | До Fiber (React ≤15) | З Fiber (React ≥16) | |---|---|---| | Тип рендера | Синхронний | Асинхронний (кооперативний) | | Чи можна призупинити | Ні | Так | | Пріоритети | Ні | Так | | Чутливість UI | Падає при великих деревах | Стабільно висока | | Основа для Concurrent Mode | Немає | Є | --- Підсумкове визначення: > React Fiber - це нова реалізація ядра React, яка робить рендеринг покроковим, пріоритетним і перериваним, забезпечуючи плавний, чутливий інтерфейс навіть за великих оновлень.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.