Глава 10 Альтернативы React

Общие шаблоны

Книга

Fluent React: Build Fast, Performant, and Intuitive Web Applications

Глубокое погружение во внутреннее устройство React: JSX и продвинутые паттерны, виртуальный DOM и реконциляция, серверный рендеринг, конкурентный режим и серверные компоненты.

Автор

Спикер

Глава 10 · Шаг назад

Пять инструментов — одна анатомия

Пять предыдущих докладов разбирали Vue, Angular, Svelte, Solid и Qwik по отдельности — каждый со своей философией и своей моделью реактивности. Здесь книга делает шаг назад: если смотреть не на различия, а на совпадения, то React и все четыре альтернативы устроены на удивление одинаково. Пять общих черт, которые отражают их общую цель.

Архитектура, основанная на компонентах — интерфейс разбит на части, каждая отвечает за свой кусок.
Декларативный синтаксис — описываем, как UI должен выглядеть, а не как его собрать.
Механизм обновлений — реакция на изменение состояния и приведение DOM в соответствие.
Методы жизненного цикла — точки входа на создание, обновление и удаление из DOM.
Экосистема и инструменты — ES6, модули, сборщики, TypeScript, devtools.

Цель у всех одна: эффективно обновить интерфейс в ответ на изменение состояния, спрятав от разработчика сложные манипуляции с DOM и дав ему сосредоточиться на логике приложения. Различаются только маршруты к этой цели.

Черты 1 и 2

Компоненты и декларативность

Две первые общие черты настолько вросли в привычки, что уже не выглядят выбором — а это именно выбор, и десять лет назад он был неочевиден.

01 · АРХИТЕКТУРА НА КОМПОНЕНТАХ

Интерфейс как набор независимых частей

Интерфейс разбит на отдельные части — компоненты, каждый отвечает за определённый участок UI. Компонент инкапсулирует своё состояние и логику, а из компонентов собираются сложные интерфейсы.

Что даёт такая модульность: повторное использование кода, разделение задач, обслуживаемость. Во всех пяти платформах компоненты могут быть функциями, и их можно компоновать, расширять или декорировать, получая более сложные компоненты.

02 · ДЕКЛАРАТИВНЫЙ СИНТАКСИС

«Как должно выглядеть», а не «что сделать с DOM»

Разработчик определяет, как должен выглядеть интерфейс для данного состояния, а фреймворк заботится о приведении UI в соответствие с этим состоянием. Это позволяет отказаться от императивных манипуляций с DOM — утомительных и подверженных ошибкам.

Языки шаблонов при этом разные: JSX — React, Qwik, Solid; синтаксис шаблонов на основе HTML — Angular; собственный язык, в основе которого лежит HTML — Svelte.

Черта 3 · Различие внутри общей черты

Обновления: одна цель, четыре механизма

Механизм реакции на изменение состояния есть у всех — но именно здесь общая черта расходится на разные инженерные решения.

Инструмент	Как узнаёт об изменении	Как доносит до DOM
React	Явный вызов сеттера состояния, повторный запуск функции компонента	Алгоритм изменений в виртуальном DOM — минимальный набор мутаций
Vue	Реактивные объекты: чтение подписывает, запись уведомляет	Тоже виртуальный DOM и его сравнение
Svelte	Зависимости размечены компилятором на этапе сборки	Компилируется в императивный код, который обновляет DOM напрямую
Angular	Обнаружение изменений в зонах и наблюдаемые объекты	Обход дерева компонентов и точечное обновление
Solid, Qwik	Сигналы: подписка возникает в момент чтения значения	Обновляется только тот узел, который читал сигнал

Прогноз книги дословно: «Скорее всего, в дальнейшем React будет использовать vDOM, а все остальные — различные сигналы».

Черты 4 и 5

Жизненный цикл и экосистема

Две оставшиеся черты — про то, что вокруг компонента: когда фреймворк даёт нам слово и на каком инструментарии всё это живёт.

04 · МЕТОДЫ ЖИЗНЕННОГО ЦИКЛА

Точки входа на этапах жизни компонента

React, Angular, Solid и Svelte дают методы или хуки — функции, вызываемые на разных этапах жизненного цикла компонента: первое создание, обновление, удаление из DOM.

Зачем они нужны: запуск побочных эффектов, очистка ресурсов, внесение обновлений на основе изменений в пропсах. Названия разные (useEffect, ngOnDestroy, onMount, onCleanup) — назначение одно.

05 · ЭКОСИСТЕМА И ИНСТРУМЕНТЫ

Общий фундамент современного JavaScript

Каждая платформа поддерживается богатой экосистемой инструментов, библиотек и ресурсов. Все работают с синтаксисом ES6, модулями и средствами сборки, и у всех отличная поддержка TypeScript — типобезопасный код доступен везде.

Большинство также поставляется с продвинутыми инструментами для опытных разработчиков — отладка и профилирование приложений. React DevTools и Angular DevTools для популярных браузеров — отличные примеры.

Такой общий набор функций и концепций — не совпадение, а свидетельство того, что веб-разработка эволюционировала в сторону модульных, декларативных и реактивных парадигм.

Август 2026 · Сверяем часы

Прогноз про vDOM и сигналы

Книга рискнула одной строчкой предсказать раскол по механизму обновлений. Спустя два года можно выставить оценку.

Прогноз книги	Что видим сейчас
сбылось «React будет использовать vDOM»	Виртуальный DOM и согласование остались на месте. Ставку на производительность React сделал не на сигналы, а на React Compiler — v1.0 стабилен с 7 октября 2025 (React Conf); последний стабильный React — 19.2.6 (май 2026)
сбылось «а все остальные — различные сигналы»	Angular 20, Vue 4, Solid — сигналы как основной примитив реактивности; Svelte 5 — руны. Ровно тот раскол, который книга описала одной фразой
частично Общий примитив на уровне языка	TC39 proposal-signals всё ещё Stage 1. За предложением стоят авторы и мейнтейнеры Angular, Vue, Solid, Preact, Ember, Qwik, MobX — React в этом списке нет

Пять общих черт из книги никуда не делись — они стали ещё общее. А вот шестой общей чертой единая модель реактивности так и не стала. Именно об этом расколе — два следующих доклада.

Что забрать с собой