PassFront
  1. PassFront
  2. База знаний
  3. Рендеринг и производительность

Какие библиотеки которые рендерят React кроме ReactDOM подходят для разных задач и чем они отличаются?

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

Ядро React (пакет react) не знает, куда рендерить, — это задача рендерера. Кроме react-dom их несколько, под разные среды.

Основные рендереры

react-dom — браузерный DOM: createRoot, порталы, гидратация; react-dom/server для SSR. Дефолт веба.

react-native — нативные компоненты iOS/Android: вместо div/span — View/Text, стили через объекты, вместо CSS — Flexbox-подмножество. Та же модель компонентов и хуков, другая платформа.

react-three-fiber — сцена Three.js: JSX описывает 3D-объекты (<mesh>, <pointLight>), reconciliation обновляет граф сцены вместо DOM. Для 3D-визуализаций и игр в вебе.

ink — рендеринг в терминал: CLI-интерфейсы с компонентами и Flexbox (на нём написаны многие dev-тулзы).

react-pdf / @react-pdf/renderer — генерация PDF-документов из компонентов.

react-email — HTML-письма из React-компонентов.

Remotion — видео: кадры как функция времени, рендер в mp4.

Чем отличаются

  • Хост-элементы: div/span против View/Text/mesh/Box — примитивы у каждого свои.
  • Что коммитится: DOM-узлы, нативные вью, граф Three.js, ANSI-вывод, PDF-примитивы.
  • Стили и события: CSS против объектных стилей, DOM-события против нативных жестов.
  • Общее: пакет react, хуки, состояние, reconciliation — код логики переносим.

Свой рендерер пишется на react-reconciler (набор колбэков createInstance/appendChild/commitUpdate).

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

Кроме react-dom: react-native (нативные вью), react-three-fiber (Three.js-сцена), ink (терминал), @react-pdf/renderer (PDF), react-email (письма), Remotion (видео). Отличаются хост-примитивами и тем, что коммитится; общими остаются ядро react, хуки и reconciliation. Свой рендерер — через react-reconciler.

Другие вопросы раздела