React 19 для разработчиков Vue 3, часть 1: Что такое компонент на самом деле, как работают пропсы и как вложить один компонент в другой.

Итак, вы знаете Vue 3. Знаете хорошо. Вы можете использовать <script setup> с закрытыми глазами, у вас есть свое мнение о ref против reactive, и вы выпустили в продакшн реальные приложения.

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

Хорошая новость, и она действительно хорошая: вы не начинаете с нуля. Даже близко. Подавляющее большинство того, что вы уже понимаете о создании UI на основе компонентов, переносится напрямую. Компоненты, пропсы, однонаправленный поток данных, композиция вместо наследования, способ разбиения интерфейса на части — всё это общий словарный запас.

Меняется синтаксис, несколько ментальных установок по умолчанию и пара моментов, где аналогия, которую вы переносите из Vue, может вас незаметно ввести в заблуждение.

Это первая статья из серии, где мы пошагово сопоставляем Vue 3 с React 19. Формат всегда один и тот же: то, что вы уже знаете во Vue, его аналог в React, а затем честная часть, где я точно говорю, где сравнение перестает работать, чтобы вы не обожглись.

Сегодня мы начинаем с основ: что такое компонент на самом деле, как работают пропсы и как вложить один компонент в другой.

Изображение создано с помощью ИИ

Компонент — это просто функция

Давайте сначала разберемся с самым большим концептуальным сдвигом, потому что всё остальное зависит от него.

Во Vue компонент — это некая сущность. Это объект (или блок <script setup>, который компилируется в него) с определенной структурой: setup, пропсы, шаблон, возможно, хуки жизненного цикла. Фреймворк создает его экземпляр, отслеживает реактивность и перерисовывает части шаблона, которые нуждаются в обновлении при изменении реактивного состояния.

В React компонент — это функция. Это всё определение. Это JavaScript-функция, которая принимает входные данные и возвращает разметку. Здесь нет специального объекта, нет магии defineComponent или макросов компилятора, работающих за вашей спиной. Если это функция, имя которой начинается с заглавной буквы и которая возвращает JSX, React будет считать её компонентом.

Вот один и тот же тривиальный компонент в обоих мирах.

Greeting.vue

Greeting.jsx

Давайте разберем это. В файле Vue у нас есть две отдельные зоны: <script setup>, где живет логика, и <template>, где живет разметка. Компилятор объединяет их. В файле React зон нет. Логика и разметка живут в теле одной функции, а разметка является возвращаемым значением. Этот <h1> — не строка и не шаблон; это JSX, к которому мы перейдем через секунду.

Обратите внимание на заглавную G в Greeting. Это не предпочтение в стиле, это необходимость. React использует регистр имени, чтобы решить, означает ли <Greeting /> «отрендерить мой компонент» или «отрендерить обычный HTML-элемент с именем greeting». Нижний регистр зарезервирован для DOM-элементов. На этом спотыкается каждый хотя бы раз.

JSX — это не шаблон

То, что кажется наиболее чуждым после Vue, — это JSX. Во Vue ваш шаблон имеет форму HTML, и вы добавляете специальные атрибуты (v-if, v-for, v-bind, @click), которые понимает компилятор. Шаблон — это свой собственный маленький язык поверх HTML.

JSX — это противоположная философия. Вместо того чтобы вкладывать возможности JavaScript в HTML, JSX вкладывает синтаксис в форме HTML в ваш JavaScript. Здесь нет директив, потому что они вам не нужны. У вас уже есть весь язык в распоряжении.

Это самое большое изменение, поэтому давайте рассмотрим три вещи, которые вы постоянно делаете в шаблоне, и как каждая из них переводится.

Интерполяция

Interpolation.vue

Interpolation.jsx

Одинарные фигурные скобки вместо двойных. Внутри этих скобок можно поместить любое выражение JavaScript, точно так же, как внутри {{ }} во Vue. Та же идея, на одну скобку меньше.

Условные операторы

Здесь нет v-if. Вообще нет никаких директив, потому что условие — это просто JavaScript, и вы уже знаете, как писать условия на JavaScript. На практике вы используете тернарный оператор или сокращенное вычисление с помощью &&.

Conditional.vue

Conditional.jsx

Пока не обращайте внимания на строку useState, это тема второй части. Сосредоточьтесь на разметке. Там, где Vue дает вам v-if и v-else как пару, React дает вам тернарный оператор внутри фигурных скобок. Когда у вас есть только «if» без «else», вы обычно будете видеть паттерн &&:

Это читается как «если isLoggedIn истинно, отрендерить параграф». Это работает, потому что false && ... вычисляется как false, который React просто рендерит как пустоту.

Однако важное предостережение: будьте осторожны с &&, когда левая сторона — число. {items.length && <List />} с радостью отрендерит 0 на экране, когда массив пуст, потому что 0 — это falsy-значение, но React всё равно рендерит его как текст. Это одна из тех мелких неприятностей, с которыми вы столкнетесь, поэтому используйте настоящее булево значение (items.length > 0 && ...) или тернарный оператор, если сомневаетесь.

Единственное, что не требовалось тернарному оператору, но к чему вы будете постоянно прибегать, — это Fragment. Возвращаемое значение компонента React должно быть единым корнем. Наш тернарный оператор уже разрешается в один элемент, поэтому он возвращается нормально, но как только у вас появляются два соседних элемента без естественной обертки, их нужно сгруппировать. Vue (v3) позволяет компоненту иметь несколько корневых узлов. React заставляет вас обернуть их в пустой <></>, который является фрагментом:

Это тот же инстинкт, что и добавление обертки <template> вокруг содержимого v-for или v-if во Vue, когда вы не хотите создавать лишний DOM-элемент. (Вы также можете вернуть массив или null, но один корень — это повседневный случай.)

Списки

List.vue

List.jsx

Никакого v-for. Вы сами проходите по массиву с помощью обычного Array.prototype.map, возвращая фрагмент JSX для каждого элемента. Если вы когда-либо писали v-for, вы уже знаете эту структуру, вы просто выполняете итерацию на JavaScript вместо атрибута.

Обратите внимание на key. Это место, где аналогия работает идеально.

Ключ в React выполняет ту же работу, что и :key во Vue. Он помогает механизму согласования (reconciler) сопоставлять элементы между рендерами, чтобы эффективно обновлять их, а не удалять и перестраивать заново. Разница чисто культурная. Во Vue забытый :key — это предупреждение линтера, которое можно проигнорировать. В React ключ — это ваша ответственность каждый раз, когда вы используете map, и если вы его забудете, появится предупреждение в консоли, которое вы будете видеть постоянно, пока не усвоите это.

Пока мы здесь, пара небольших причуд JSX, на которых попадаются разработчики Vue: это className, а не class, потому что class — зарезервированное слово в JavaScript. А обработчики событий — это пропсы в camelCase, поэтому @click становится onClick, а @input становится onInput. Нет никакого @ и нет никакого v-on.

Важное замечание по поводу полей формы: идиоматический React использует onChange, и в отличие от нативного события DOM change, событие onChange в React срабатывает при каждом нажатии клавиши (как @input в Vue), поэтому не стоит ожидать от него поведения, характерного для события blur.

Пропсы — это просто аргументы функции

В Vue 3 вы объявляете пропсы с помощью макроса defineProps, и компилятор превращает их в реактивный объект props.

UserCard.vue

В React помните, что компонент — это просто функция. Поэтому пропсы — это просто первый аргумент этой функции. Здесь нет макроса, нет этапа объявления, есть только параметр. Принято деструктурировать его прямо в сигнатуре.

UserCard.jsx

И вы передаете их так, как ожидаете, что выглядит почти идентично Vue, за исключением префикса двоеточия для привязанных значений.

Для статической строки вы записываете её как есть (как показано выше), точно так же, как в Vue. Когда вы хотите передать значение, не являющееся строкой (число, логическое значение, объект, функцию), вы заключаете его в фигурные скобки: <UserCard age={42} isAdmin={true} />. Это эквивалент v-bind в React или сокращения :. В Vue :age="42" говорит компилятору «вычисли это как JavaScript», а в React {42} выполняет ту же работу.

Однонаправленный поток данных идентичен в обоих фреймворках, и на этом стоит остановиться, потому что это тот случай, когда ваша интуиция вас не подводит. Пропсы передаются вниз, и дочерний компонент не должен переназначать свои собственные пропсы. В Vue вы получите предупреждение разработчика, если попытаетесь переназначить проп (хотя Vue не отследит глубокую мутацию объекта пропса). В React пропсы — это просто обычный объект, принадлежащий родителю, и их переназначение не приносит никакой пользы, поэтому та же дисциплина применяется по тем же причинам.

Однако здесь аналогия нарушается, и это важно. Пропсы Vue реактивны в глубоком, автоматическом смысле, к которому вы привыкли. Когда родитель меняет значение, система реактивности Vue хирургически обновляет именно те части шаблона дочернего компонента, которые от него зависят. Пропсы React совсем не реактивны в этом смысле. Это просто аргументы последнего рендера. Когда родитель перерисовывается и передает новое значение вниз, функция дочернего компонента перезапускается сверху донизу с новым аргументом. Никакого детального отслеживания не происходит. Эта разница — главная причина существования второй части этой серии, так что запомните это, и мы подробно разберем это там.

children — это ваш слот по умолчанию

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

Panel.vue

В React есть прямой эквивалент, и он восхитительно прост, как только вы его увидите. Все, что вы вкладываете внутрь тегов компонента, поступает как проп с именем children. Вот и все. Это обычный проп с особым именем, который React заполняет за вас.

Panel.jsx

Давайте разберем это. Вложенный <p> становится значением children, и вы отображаете его, помещая {children} там, где хотите его видеть. Если стандартный <slot /> — это единственный слот, который вам когда-либо был нужен, то, честно говоря, children покроет подавляющее большинство ваших повседневных задач, и более чистого способа сопоставления быть не может.

Однако есть нюанс. Система слотов Vue богаче, чем один проп children. У вас есть именованные слоты для распределения контента по нескольким местам и слоты с областью видимости (scoped slots) для передачи данных из дочернего компонента обратно в разметку родителя. В React нет встроенного синтаксиса ни для того, ни для другого, потому что новый синтаксис не нужен. Он просто использует пропсы.

Для нескольких «слотов» вы передаете JSX как именованные пропсы:

Layout.jsx

Именованный слот — это просто проп, значением которого является JSX. А для слотов с областью видимости эквивалентом является паттерн render prop (в документации React он описан под этим названием), где вы передаете функцию, которую дочерний компонент вызывает с данными и которая возвращает разметку. Это отдельная серьезная тема, и это единственная часть данного сравнения, к которой действительно нужно привыкнуть, поэтому я не буду втискивать её сюда. Главное, что нужно усвоить: везде, где Vue предоставляет специальную функцию слотов, React опирается на тот факт, что проп может содержать JSX или функцию, и вы строите композицию на этой основе.

Подводя итоги

Давайте повторим пройденное, потому что именно в этом суть первой части.

Компонент React — это обычная функция, которая возвращает JSX. JSX — это JavaScript с синтаксисом в форме HTML, поэтому вместо директив вы используете сам язык: тернарные операторы и && для условий, .map() для списков и ту же дисциплину ключей (key), которую вы уже знаете по Vue.
Пропсы — это просто первый аргумент функции. Вы деструктурируете их, и однонаправленный поток данных работает так, как подсказывает ваша интуиция.
А children — это ваш слот по умолчанию, а именованные пропсы и render props покрывают более сложные паттерны слотов.

Единственное, что я хочу, чтобы вы вынесли из следующей статьи, это следующее: пропсы React не реактивны так, как пропсы Vue. Это моментальный снимок последнего рендера, и функция компонента перезапускается для создания следующего. Этот единственный факт — ключ к пониманию того, как работают состояние, эффекты и повторный рендеринг, и именно к этому мы перейдем далее.

Для канонической справки держите открытой вкладку с документацией React, особенно раздел «Describing the UI», в котором подробно рассматриваются компоненты, JSX и пропсы.

Удачного React-инга!

Если вы хотите начать экспериментировать с библиотекой пользовательского интерфейса React, ознакомьтесь с более чем 50 компонентами, которые можно использовать с KendoReact Free.