React для разработчиков Vue, часть 1: Компоненты, пропсы и ментальная перезагрузка

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. Это место, где аналогия работает идеально.

Ключ (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 в Vue или сокращения :. В 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.

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