На каком этапе рендеринга сайта срабатывает React?

Механизм рендеринга и место React в нём

React не инициирует начальный этап рендеринга сайта в классическом понимании конвейера браузера. Он встраивается в этот процесс на определённой стадии и затем полностью управляет обновлениями интерфейса. Чтобы понять точку входа React, нужно рассмотреть жизненный цикл загрузки веб-страницы.

Основные этапы рендеринга в браузере

1. Парсинг HTML и построение DOM: Браузер получает HTML-документ, парсит его и строит DOM (Document Object Model) — древовидное представление структуры страницы.
2. Парсинг CSS и построение CSSOM: Одновременно или после, браузер обрабатывает CSS (стили) и строит CSSOM (CSS Object Model).
3. Формирование Render Tree: DOM и CSSOM объединяются в Render Tree (дерево рендеринга), которое содержит только видимые элементы с их стилями.
4. Layout (или Reflow): Браузер вычисляет точное положение и размер каждого элемента Render Tree в окне просмотра.
5. Paint: Происходит растеризация — преобразование вычисленных данных в пиксели на экране. Создаются слои.
6. Composite: Браузер комбинирует отдельные слои в окончательное изображение на экране.

Точка входа React

React начинает свою работу после того, как браузер загрузил пустой HTML-файл (или файл с корневым контейнером) и выполнил первоначальный парсинг, построив "скелет" DOM.

Этот процесс можно разделить на два ключевых сценария:

1. Клиентский рендеринг (Client-Side Rendering - CSR)

Это наиболее классический и прямой сценарий.

• Браузер загружает почти пустой HTML-файл (часто называемый index.html), который содержит только корневой HTML-элемент (например, <div id="root"></div>) и ссылки на скрипты.
• После загрузки и выполнения скрипта React (react.development.js, react-dom.development.js и ваш bundle.js) срабатывает код инициализации, обычно выглядящий так:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 1. React находит корневой DOM-элемент
const rootElement = document.getElementById('root');

// 2. React создает "корень" (Root) для своего внутреннего дерева Fiber
const root = ReactDOM.createRoot(rootElement);

// 3. React ВПЕРВЫЕ срабатывает здесь: он рендерит компонент <App /> в память (строит Virtual DOM),
// вычисляет различия с текущим пустым DOM, а затем синхронно вставляет результат
// в реальный DOM-элемент #root.
root.render(<App />);

На этом этапе React производит свою первую операцию commit (фиксации) в DOM. Весь интерфейс приложения создается средствами JavaScript и вставляется в корневой элемент. После этой первоначальной вставки браузеру необходимо заново выполнить этапы Layout, Paint и Composite, чтобы отрисовать созданные Reactом элементы.

2. Серверный рендеринг (Server-Side Rendering - SSR) или Pre-rendering

В этом сценарии начальная точка смещается.

• На сервере (Node.js) React срабатывает заранее. Он принимает компоненты, рендерит их в HTML-строку и отправляет эту готовую разметку в браузер внутри index.html.
• Браузер получает уже готовый HTML, который может быстро отрисовать (проходя этапы до Paint включительно). Это улучшает воспринимаемую производительность.
• Однако, React "включается" на клиенте сразу после этого, на этапе Hydration (гидратация). Он загружается, находит существующие DOM-узлы, созданные сервером, и "оживляет" их — подключает все обработчики событий, управление состоянием и готовится к последующим интерактивным обновлениям.

// Пример кода на сервере (Node.js)
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

const htmlString = ReactDOMServer.renderToString(<App />);
// htmlString встраивается в шаблон HTML и отправляется клиенту

// Пример кода на клиенте для гидратации
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// React срабатывает здесь, но не для создания DOM с нуля,
// а для присоединения к существующему серверному DOM.
const root = ReactDOM.hydrateRoot(document.getElementById('root'), <App />);

Ключевой принцип: Цикл обновлений после монтирования

После первоначального монтирования (в CSR) или гидратации (в SSR) React полностью берет на себя управление обновлениями своего поддерева DOM. Любое изменение состояния (useState, useReducer, пропсов) запускает новый рендер-цикл React:

1. Рендер (Render Phase): React повторно вызывает функции компонентов, вычисляет новое представление UI в памяти (Virtual DOM / Fiber Tree). Этот этап может быть прерван (если речь о Concurrent Features).
2. Фаза фиксации (Commit Phase): React сравнивает новое дерево Fiber с предыдущим (процесс Reconciliation, или "согласование"), вычисляет минимальный набор изменений (diffing algorithm) и синхронно применяет эти изменения к реальному DOM.

После этого коммита браузер, обнаружив изменения в DOM, снова запускает свои этапы Layout, Paint и Composite для отрисовки обновлений на экране.

Итог

• Первоначально React срабатывает после построения браузером минимального DOM, содержащего корневой элемент, или после отрисовки серверного HTML.
• Его основная роль — быть декларативным, компонентным менеджером для DOM. Он не управляет первоначальным парсингом HTML или построением CSSOM, но берет под контроль определенную часть DOM и все ее последующие обновления, интегрируясь в браузерный цикл рендеринга на этапе между JavaScript-выполнением и браузерным рефлоу/репаинтом.