Архітектура React Fiber та Сумісний рендеринг

React Fiber: Революція алгоритму порівняння в React

React Fiber, представлений в React 16, переписав алгоритм порівняння React. Замість використання стеку він застосовує зв'язаний список "Fiber-нод", кожна з яких відповідає компоненту.

Структура Fiber-ноти

Кожна Fiber-нота зберігає метадані про компонент, включаючи вказівники на його дитину, брата і батька. Вона також відслідковує props, state та побічні ефекти (наприклад, оновлення DOM). Ця детальна структура дозволяє React призупиняти і відновлювати роботу.

Два етапи роботи

1. Етап рендерингу (Reconciliation)

• Генерується список змін шляхом порівняння старих і нових дерев компонентів.
• Цей етап може бути перерваний. React ділить роботу на невеликі частини, призупиняючи її для виконання високопріоритетних завдань (наприклад, обробка введення користувача), а потім продовжує.
• Використовується система пріоритетів для визначення порядку оновлень (наприклад, анімації > завантаження даних).

2. Етап коміту (Commit Phase)

• Застосовує зміни до DOM в одному синхронному пакеті.
• Цей етап не може бути перерваний, щоб уникнути неконсистентних станів інтерфейсу.

Сумісний рендеринг: працюємо розумно, а не важко

Сумісний рендеринг (офіційно введений у React 18) дозволяє React готувати кілька версій інтерфейсу у фоновому режимі та безшовно перемикатися між ними.

Часове нарізання (Time Slicing)

React ділить рендеринг на малі частини (зазвичай по 5 мс). Якщо трапляється подія високого пріоритету (наприклад, клік), React призупиняє поточну задачу, обробляє подію та відновлює рендеринг. Це дозволяє зберігати UI відгукнутим.

Пріоритизація

Оновлення позначаються пріоритетами. Наприклад, введення в рядок пошуку позначається як термінове, а фільтрація результатів відкладається. API на зразок startTransition дозволяють розробникам явно позначати менш критичні оновлення.

Особливості, підтримувані Fiber та Сумісним рендерингом

Suspense

Suspense дозволяє компонентам чекати асинхронні дані, показуючи під час цього запасний інтерфейс. Це інтегрується з сумісним рендерингом, призупиняючи рендеринг до тих пір, поки дані не будуть готові, щоб уникнути неповних етапів UI.

Транзіції (Transitions)

Транзіції дозволяють розрізняти термінові оновлення (наприклад, натискання кнопки) і менш термінові (наприклад, завантаження результатів пошуку). Використовуючи startTransition, React зберігає відгукливість інтерфейсу навіть під час важких оновлень.

Автоматичне об'єднання (Automatic Batching)

React 18 автоматично об'єднує оновлення стану, що зменшує кількість зайвих повторних рендерів. Наприклад, кілька викликів setState в одній події групуються в один прохід рендерингу.

Переваги нової архітектури

• Плавні взаємодії: Пріоритизація введення користувача забезпечує миттєвий відгук для кнопок, анімацій та жестів.
• Ефективний рендеринг: Часове нарізання дозволяє уникнути блокування основного потоку.
• Передбачуване асинхронне оброблення: Suspense спрощує обробку станів завантаження та помилок.
• Постепенне впровадження: Існуючі додатки можуть поступово впроваджувати нові сумісні функції.

Впровадження сумісних функцій у React 18

1. Перехід на createRoot

Замість використання ReactDOM.render, використовуйте ReactDOM.createRoot, щоб активувати сумісний рендеринг.

ReactDOM.createRoot(document.getElementById('root')).render();

2. Використовуйте нові API

• Використовуйте startTransition або useTransition для оновлень, які не є терміновими.
• Відкладіть некритичні зміни UI за допомогою useDeferredValue.
• Обгортайте лінійно завантажувані компоненти у Suspense.

Реальний приклад пошуку з транзіціями

function SearchBox() {  
  const [query, setQuery] = useState("");  
  const [results, setResults] = useState([]);  
  const [isPending, startTransition] = useTransition();  

  const handleSearch = (e) => {  
    const value = e.target.value;  

    // Термінове оновлення  
    setQuery(value);  

    // Нетермінове оновлення результатів  
    startTransition(() => {  
      fetchResults(value).then((data) => setResults(data));  
    });  
  };  

  return (  
    <div>  
      {isPending && <span>Завантаження...</span>}  
    </div>  
  );  
}  

Висновок

React Fiber та Сумісний рендеринг ознаменували зміни в підходах до рендерингу в React. Відокремлюючи рендеринг від основного потоку і впроваджуючи систему пріоритетів, ці технології дозволяють додаткам залишатися швидкими та відгукними навіть при високому навантаженні. Завдяки таким можливостям, як Suspense та Transitions, розробники можуть створювати UI, який виглядає відшліфовано та орієнтований на користувача. Впровадження цих патернів дозволяє додаткам масштабуватися без втрати продуктивності.

Дякуємо за прочитання

• 👏 Будь ласка, підтримайте історію лайком і підписуйтеся на мене 👉
• 📰 Перегляньте більше рішень і порад для практичного використання тут
• 🔔 Слідуйте за мною: LinkedIn | GitHub

Дякую, що ви частина спільноти

Перед тим, як йти:
- Не забудьте поставити лайк і підписатися на автора ️👏
- Слідуйте за нами: X | LinkedIn | YouTube | Newsletter | Podcast | Differ | Twitch
- Перевірте CoFeed, розумний спосіб бути в курсі останніх технологічних новин 🧪
- Почніть свій безкоштовний блог на основі ШІ на Differ 🚀
- Приєднуйтесь до нашої спільноти контент-створювачів на Discord 🧑🏻‍💻
- Для більше контенту відвідайте plainenglish.io + stackademic.com

Перекладено з: React Fiber Architecture & Concurrent Rendering