Зачем библиотека React делится на пакеты ReactDOM и React?

Архитектура React: разделение на React и ReactDOM

Разделение React на два отдельных пакета — это архитектурное решение, которое отражает принцип разделения ответственности (Single Responsibility). Давайте разберёмся, почему это было сделано.

Основная причина: независимость ядра от платформы

React ядро (пакет react) содержит исключительно логику компонентов: состояние, жизненный цикл, хуки, контекст и алгоритм reconciliation (сравнение и обновление виртуального DOM). Это полностью независимо от того, как компоненты будут отрендерены.

ReactDOM (пакет `react-dom`) — это **рендерер**, который берёт результат работы React компонентов и преобразует их в реальный DOM браузера. Это позволяет одному ядру работать с разными целевыми платформами:

// React — ядро, работает везде
import React from 'react';

function MyComponent() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// ReactDOM — рендерер для браузера
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

Мультиплатформность

Благодаря такому разделению появились альтернативные рендереры:

• React Native — рендерит компоненты в нативные элементы iOS/Android
• React 3D Fiber — рендерит в WebGL сцены
• Ink — рендерит в терминал (CLI приложения)
• VR рендереры — для виртуальной реальности

Все эти библиотеки используют одно React ядро, но по-разному реализуют рендеринг.

Размер и производительность

Разделение позволяет загружать только необходимые части:

// Если вы используете React на сервере (SSR), можете избежать загрузки полного ReactDOM
import ReactDOMServer from 'react-dom/server';

const html = ReactDOMServer.renderToString(<App />);

В Nextjs и других SSR фреймворках react-dom/server загружается только на сервере, а полный react-dom только на клиенте.

Версионирование

Разные версии пакетов могут обновляться независимо. Например, могут быть изменения в концепции рендеринга (как был Fiber, затем Concurrent Rendering) без изменения API компонентов.

React 18 и Concurrent Features

В React 18 это разделение позволило добавить Concurrent Features без ломания API:

// React остался прежним
const [count, setCount] = useState(0);

// ReactDOM получил новые возможности
const root = ReactDOM.createRoot(element);
root.render(<App />);

Вывод: разделение на React и ReactDOM — это не просто техническое решение, а фундаментальная архитектура, позволяющая React быть платформо-независимым и масштабируемым фреймворком.