Пишем первый React компонент
год назад·4 мин. на чтение
Компоненты — одна из основных концепций React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути к React.
Содержание туториала по React
Компоненты — одна из основных концепций React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути к React.
Эта разметка представляет эту статью
Компоненты: строительные блоки пользовательского интерфейса
В Интернете HTML позволяет нам создавать богато структурированные документы с помощью встроенного набора тегов, таких как<h1>
и <li>
:
<article> <h1>My First Component</h1> <ol> <li>Components: UI Building Blocks</li> <li>Defining a Component</li> <li>Using a Component</li> </ol> </article>
<article>
, ее заголовок <h1>
и (сокращенное) оглавление в виде упорядоченного списка <ol>
. Подобная разметка в сочетании с CSS для стилизации и JavaScript для интерактивности лежит в основе каждой боковой панели, аватара, модального окна, раскрывающегося списка — каждой части пользовательского интерфейса, которую вы видите в Интернете.
React позволяет комбинировать разметку, CSS и JavaScript в кастомные «компоненты», повторно используемые элементы пользовательского интерфейса для вашего приложения. Код оглавления, который вы видели выше, можно превратить в компонент <TableOfContents />
, который можно отображать на каждой странице. Внутри он по-прежнему использует те же HTML-теги, такие как <article>
, <h1>
и т. д.
Как и в случае с HTML-тегами, вы можете составлять, упорядочивать и размещать компоненты для оформления целых страниц. Например, страница документации, которая состоит из компонентов React, может выглядеть следующим образом:
По мере роста вашего проекта вы заметите, что многие из ваших проектов могут быть составлены путем повторного использования уже написанных вами компонентов, что ускоряет разработку. Оглавление выше можно добавить на любой экран с помощью<PageLayout> <NavigationHeader> <SearchBar /> <Link to="/docs">Docs</Link> </NavigationHeader> <Sidebar /> <PageContent> <TableOfContents /> <DocumentationText /> </PageContent> </PageLayout>
<TableOfContents />
. Вы даже можете запустить свой проект, состоящий из компонентов, которыми поделились участники сообщества React с открытым исходным кодом, такими как Chakra UI и Material UI.
Определение компонента
Традиционно при создании веб-страниц веб-разработчики размечали свой контент, а затем добавляли интерактивность, добавляя немного JavaScript. React ставит интерактивность на первое место, но при этом использует ту же технологию: компонент React — это функция JavaScript, в которую вы можете добавить разметку. Вот как это выглядит:Вот как написать компонент:export default function Profile() { return <img src="https://example.com/userpic.jpg" alt="User Name" />; }
Шаг 1: Экспортируйте компонент
Префиксexport default
— это стандартный синтаксис JavaScript (не относящийся к React). Он позволяет пометить основную функцию в файле, чтобы впоследствии можно было импортировать ее из других файлов. Подробнее об импорте смотрите в разделе Импорт и экспорт компонентов.
Шаг 2: Определите функцию
С помощью функцииfunction Profile() { }
вы определяете функцию JavaScript с именем Profile
.
Компоненты React — это обычные функции JavaScript, но их имена должны начинаться с заглавной буквы, иначе они не будут работать.
Шаг 3: Добавьте разметку
Компонент возвращает тег<img />
с атрибутами src
и alt
. <img />
написан как HTML, но на самом деле это JavaScript. Этот синтаксис называется JSX, и он позволяет встраивать разметку в JavaScript.
Но если ваша разметка не находится на той же строке, что и ключевое слово return, вы должны заключить ее в пару круглых скобок, например:
export default function Profile() { return ( <div> <img src="https://example.com/userpic.jpg" alt="User Name" /> </div> ); }
Использование компонента
Теперь, когда вы определили свой компонентProfile
, вы можете вложить его в другие компоненты. Например, вы можете экспортировать компонент Gallery
, который использует несколько компонентов Profile
:
export default function Gallery() { return ( <section> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profile /> </section> ); }
Что видит браузер
Обратите внимание на разницу в регистрах:<section>
пишется строчными буквами, поэтому React знает, что мы ссылаемся на HTML-тег.<Profile/>
начинается с заглавнойP
, поэтому React знает, что мы хотим использовать наш компонент с именемProfile
.
Profile
содержит еще больше HTML: <img />
. В итоге вот что видит браузер:
<section> <h1>Amazing scientists</h1> <img src="https://example.com/userpic.jpg" alt="User Name" /> <img src="https://example.com/userpic.jpg" alt="User Name" /> <img src="https://example.com/userpic.jpg" alt="User Name" /> </section>
Вложение и организация компонентов
Компоненты — это обычные функции JavaScript, поэтому вы можете хранить несколько компонентов в одном файле. Это удобно, когда компоненты относительно малы или тесно связаны друг с другом. Если этот файл переполнен, вы всегда можете переместитьProfile
в отдельный файл. Как это сделать, вы узнаете вскоре на странице об импорте.
Поскольку компоненты Profile
визуализируются внутри Gallery
— даже несколько раз — мы можем сказать, что Gallery
является родительским компонентом, отображающим каждый Profile
как «дочерний». Это часть магии React: вы можете определить компонент один раз, а затем использовать его в любом месте и столько раз, сколько захотите.
Компоненты могут отображать другие компоненты, но вы никогда не должны вкладывать их определения:
Фрагмент выше очень медленный и вызывает ошибки. Вместо этого определите каждый компонент на верхнем уровне:export default function Gallery() { // Никогда не определяйте компонент внутри другого function Profile() { // ... } // ... }
Когда дочернему компоненту нужны данные от родителя, передайте их пропсами, а не определениями вложенности.export default function Gallery() { // ... } // ✅ Определите компонент на корневом уровне function Profile() { // ... }
Резюме
Вы только что впервые попробовали React! Напомним некоторые ключевые моменты.- React позволяет создавать компоненты - многократно используемые элементы пользовательского интерфейса для вашего приложения.
- В приложении React каждая часть пользовательского интерфейса является компонентом.
-
Компоненты React являются обычными функциями JavaScript, за исключением:
- Их имена всегда начинаются с заглавной буквы.
- Они возвращают разметку JSX.
Как передать пропсы React компоненту
год назад·5 мин. на чтение
Компоненты React используют пропсы (props) для связи друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, предоставляя им пропсы. Пропсы могут напоминать атрибуты HTML, но вы можете передавать через них любое значение JavaScript, включая объекты, массивы и функции.
Содержание туториала по React
Компоненты React используют пропсы (props) для связи друг с другом. Каждый родительский компонент может передавать некоторую информацию своим дочерним компонентам, предоставляя им пропсы. Пропсы могут напоминать атрибуты HTML, но вы можете передавать через них любое значение JavaScript, включая объекты, массивы и функции.
Пропсы позволяют вам думать о родительских и дочерних компонентах независимо друг от друга. Например, вы можете изменить пропсы
Известные пропсы
Пропсы — это информация, которую вы передаете тегу JSX. Например,className
, src
, alt
, width
и height
— вот некоторые пропсы, которые вы можете передать <img>
:
Пропсы, которые вы можете передать тегуfunction Avatar() { return ( <img className="avatar" src="https://example.com/userpic.jpg" alt="Userpic" width={100} height={100} /> ); } export default function Profile() { return <Avatar />; }
<img>
, предопределены (ReactDOM соответствует стандартам HTML). Но вы можете передать любые пропсы своим собственным компонентам, таким как <Avatar>
, чтобы настроить их.
Передача пропсов в компонент
В этом коде компонентProfile
не передает никаких пропсов своему дочернему компоненту Avatar
:
Вы можете передать вexport default function Profile() { return <Avatar />; }
Avatar
некоторые пропсы в два этапа.
Шаг 1: Передайте пропсы дочернему компоненту
Во-первых, передайте некоторые пропсы вAvatar
. Например, давайте передадим два пропса: person
(объект) и size
(число):
Если двойные фигурные скобки послеexport default function Profile() { return ( <Avatar person={{ name: 'User Name 1', imageId: '12345' }} size={100} /> ); }
person=
вас смущают, помните, что они являются просто объектом внутри фигурных скобок JSX.
Теперь вы можете прочитать эти пропсы внутри компонента Avatar
.
Шаг 2: Прочтите пропсы внутри дочернего компонента
Вы можете прочитать эти пропсы, указав их имена -person
, size
- разделенные запятыми внутри ({
и })
непосредственно после function Avatar
. Это позволяет использовать их внутри кода Avatar
, как если бы вы использовали переменную.
Добавьте немного логики вfunction Avatar({ person, size }) { // person и size можно здесь использовть }
Avatar
, которая использует пропсы person
, size
в отображении, и все готово.
Теперь вы можете настроить Avatar
для отображения разными способами с разными пропсы.
// utils.js export function getImageUrl(person, size = 's') { return 'https://example.com/' + person.imageId + size + '.jpg'; }
// App.js import { getImageUrl } from './utils.js'; function Avatar({ person, size }) { return ( <img className="avatar" src={getImageUrl(person)} alt={person.name} width={size} height={size} /> ); } export default function Profile() { return ( <div> <Avatar size={100} person={{ name: 'User Name 1', imageId: '12345', }} /> <Avatar size={80} person={{ name: 'User Name 2', imageId: '12346', }} /> <Avatar size={50} person={{ name: 'User Name 3', imageId: '12347', }} /> </div> ); }
person
или size
внутри Profile
, не задумываясь о том, как Avatar
их использует. Точно так же вы можете изменить то, как Avatar
использует эти пропсы, не заглядывая в Profile
.
Вы можете думать о пропсах как о «ручках», которые вы можете регулировать. Они выполняют ту же роль, что и аргументы для функций — на самом деле пропсы являются единственным аргументом для вашего компонента. Функции компонента React принимают один аргумент, объект props
:
Обычно вам не нужен весь объект пропса, поэтому можно разбить его на отдельные пропсы. Не пропустите пару фигурных скобокfunction Avatar(props) { let person = props.person; let size = props.size; // ... }
{
и }
внутри (
и )
при объявлении пропсов:
Этот синтаксис называется «деструктурированием» и эквивалентен чтению свойств из параметра функции:function Avatar({ person, size }) { // ... }
function Avatar(props) { let person = props.person; let size = props.size; // ... }
Как указать значения по умолчанию для пропса
Если вы хотите присвоить пропсу значение по умолчанию, чтобы использовать его, когда значение не указано, вы можете сделать это с помощью деструктуризации, поставив=
и значение по умолчанию сразу после параметра:
Теперь, если вfunction Avatar({ person, size = 100 }) { // ... }
<Avatar person={...} />
передан пропс size
, размер будет установлен на 100
.
Значение по умолчанию используется только в том случае, если параметр size
отсутствует или если вы передаете size={undefined}
. Но если вы передадите size={null}
или size={0}
, значение по умолчанию не будет использоваться.
Перенаправление пропсов с синтаксисом распыления JSX
Иногда отправка пропсов повторяется:В повторяющемся коде нет ничего плохого. Но иногда хочется сделать код короче. Некоторые компоненты передают все свои пропсы своим дочерним компонентам, например, какfunction Profile({ person, size, isSepia, thickBorder }) { return ( <div className="card"> <Avatar person={person} size={size} isSepia={isSepia} thickBorder={thickBorder} /> </div> ); }
Profile
делает с Avatar
. Поскольку они не используют никакие свои пропсы напрямую, может иметь смысл использовать более краткий синтаксис распыления (spread):
Это пример перенаправления всех пропсовfunction Profile(props) { return ( <div className="card"> <Avatar {...props} /> </div> ); }
Profile
в Avatar
без перечисления каждого из их имен.
Используйте расширенный синтаксис с ограничениями. Если вы используете его в каждом компоненте - значит что-то не так. Часто это указывает на то, что следует разделить компоненты и передать дочерние компоненты как JSX. Подробнее об этом далее.
Передача JSX в качестве дочернего компонента
Обычно встроенные теги браузера вкладывают друг в друга:Иногда вы захотите вложить свои собственные компоненты таким же образом:<div> <img /> </div>
Когда вы вкладываете контент в тег JSX, родительский компонент получит этот контент в просе, называемом<Card> <Avatar /> </Card>
children
. Например, компонент Card
ниже получит проп children
, который является <Avatar />
, и отобразит его в обертке div
:
// App.js import Avatar from './Avatar.js'; function Card({ children }) { return <div className="card">{children}</div>; } export default function Profile() { return ( <Card> <Avatar size={100} person={{ name: 'User Name', imageId: '12345', }} /> </Card> ); }
// Avatar.jsx import { getImageUrl } from './utils.js'; export default function Avatar({ person, size }) { return ( <img className="avatar" src={getImageUrl(person)} alt={person.name} width={size} height={size} /> ); }
Вы можете думать о компоненте с пропсом// utils.js export function getImageUrl(person, size = 's') { return 'https://example.com/' + person.imageId + size + '.jpg'; }
children
как о специальной лозейке, которую можно «заполнить» родительскими компонентами с произвольным JSX. Вы часто будете использовать проп children
для визуальных оболочек: панелей, сеток и т.д.
Как пропсы меняются со временем
КомпонентClock
ниже получает два пропса от своего родительского компонента: color
и time
. (Код родительского компонента опущен, поскольку он использует состояние, в которое мы пока не будем углубляться.)
Этот пример иллюстрирует, что компонент может получать пропсы с течением времени. Проп не всегда статичен. Здесь пропexport default function Clock({ color, time }) { return <h1 style={{ color: color }}>{time}</h1>; }
time
меняется каждую секунду, а проп color
меняется, когда вы выбираете другой цвет. Пропсы отражают данные компонента в любой момент времени, а не только в начале.
Пропсы иммутабельны — термин из информатики, означающий «неизменяемый». Когда компоненту необходимо изменить свои пропсы (например, в ответ на взаимодействие с пользователем или новые данные), ему придется «попросить» родительский компонент передать ему другие пропсы — новый объект. Затем его старые пропсы будут отброшены, и в конечном итоге движок JavaScript очистит занятую ими память.
Не пытайтесь "изменить пропсы" напрямую. Когда вам нужно отреагировать на пользовательский ввод (например, изменить выбранный цвет), вам нужно будет "установить состояние", о котором вы можете узнать в разделе "Состояние - память компонента".
Резюме
- Чтобы передать пропсы, добавьте их в JSX, как и в случае с атрибутами HTML.
- Чтобы прочитать пропсы, используйте синтаксис деструктурирования
function Avatar({ person, size })
. - Вы можете указать значение по умолчанию, например
size = 100
, которое используется для отсутствующих и неопределенных пропсов. - Вы можете перенаправить все пропсы с помощью синтаксиса распыления JSX
<Avatar {...props} />
, но не злоупотребляйте им. - Вложенный JSX, такой как
<Card><Avatar /></Card>
, будет отображаться как пропchildren
компонентаCard
. - Пропсы - доступны только для чтения. Это такой снимок компонента во времени: каждый рендер получает новую версию пропса.
- Нельзя менять пропсы внутри компонента. Когда вам нужна интерактивность, вам нужно установить состояние.