Как работает React под капотом?

Под капотом React — это Virtual DOM + алгоритм согласования на архитектуре Fiber + планировщик приоритетов. Разберём конвейер целиком.

Элементы и Virtual DOM

JSX компилируется в вызовы jsx(), возвращающие лёгкие объекты { type, props } — React-элементы. Из них строится дерево — описание UI, «снимок» на данный рендер.

Fiber — внутреннее представление

Для каждого узла React держит fiber — единицу работы с указателями на родителя/детей/соседей, состоянием (хуки живут связным списком на fiber'е), типом и «эффектами» (что поменять в DOM). Fiber-дерево — долговременная структура, элементы — одноразовые описания.

Render-фаза (прерываемая)

При обновлении React строит work-in-progress копию fiber-дерева: вызывает компоненты, сравнивает результат со старым деревом (reconciliation: по типу узла и key, O(n)-эвристики). Работа разбита на мелкие единицы: планировщик может прервать её ради срочного обновления (ввод пользователя) и продолжить позже — основа конкурентного рендеринга React 18.

Commit-фаза (синхронная)

Накопленный список эффектов применяется к DOM одним куском: вставки, удаления, обновления атрибутов. Затем refs, useLayoutEffect, отрисовка браузера, и уже после — useEffect. Work-in-progress дерево становится текущим (double buffering).

Хуки под капотом

Хуки — ячейки в связном списке fiber'а, сопоставляемые по порядку вызова (поэтому нельзя вызывать в условиях). setState кладёт обновление в очередь fiber'а и просит планировщик выполнить работу с нужным приоритетом; обновления батчатся.

События

React вешает один делегированный слушатель на корень приложения и раздаёт SyntheticEvent по компонентам — экономия на тысячах addEventListener.

Коротко для собеседования

Схема: JSX → элементы → fiber-дерево. Обновление: setState ставит работу планировщику → render-фаза строит work-in-progress дерево с диффом (прерываемая, приоритеты) → commit применяет изменения к DOM синхронно → эффекты. Хуки — связный список на fiber (порядок вызова важен), события — делегирование с корня.