Быстрый старт с React
год назад·7 мин. на чтение
React приложения состоят из компонентов. Компонент — это часть UI (пользовательского интерфейса), которая имеет собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница.
Содержание туториала по React
Эта страница познакомит вас с 80% концепций React, которые вы будете использовать ежедневно.
Во-первых, переместите состояние из
Когда вы нажимаете кнопку, срабатывает обработчик
Создание компонентов
React приложения состоят из компонентов. Компонент — это часть UI (пользовательского интерфейса), которая имеет собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница. React компоненты — это функции JavaScript, которые возвращают разметку:Теперь, когда вы объявилиfunction MyButton() { return <button>I'm a button</button>; }
MyButton
, вы можете вложить его в другой компонент:
Обратите внимание, чтоexport default function MyApp() { return ( <div> <h1>Welcome to my app</h1> <MyButton /> </div> ); }
<MyButton />
начинается с заглавной буквы. Так мы узнаем, что это React компонент. Имена React компонентов всегда должны начинаться с заглавной буквы, а теги HTML должны быть строчными.
Ключевые слова export default
определяют главный компонент в файле.
Написание разметки с помощью JSX
Синтаксис разметки, который вы видели выше, называется JSX. Это необязательно, но большинство проектов React используют JSX для удобства. Все рекомендуемые для локальной разработки инструменты, поддерживают JSX «из коробки». JSX строже, чем HTML. Вы должны закрыть теги типа<br />
. Ваш компонент также не может возвращать несколько тегов JSX. Вы должны обернуть их в общий родитель, например <div>...</div>
или пустую оболочку <>...</>
:
Если у вас есть много HTML для переноса в JSX, вы можете использовать онлайн-конвертер.function AboutPage() { return ( <> <h1>About</h1> <p> Hello there. <br /> How do you do? </p> </> ); }
Добавление стилей
В React вы указываете CSS класс с помощьюclassName
. Он работает так же, как атрибут class
в HTML:
Затем вы пишете правила CSS для него в отдельном файле CSS:<img className="avatar" />
React не предписывает, как добавлять файлы CSS. В самом простом случае вы добавите тег/* In your CSS */ .avatar { border-radius: 50%; }
<link>
в свой HTML. Если вы используете инструмент сборки или фреймворк, обратитесь к его документации, чтобы узнать, как добавить файл CSS в свой проект.
Отображение данных
JSX позволяет размещать разметку в JavaScript. Фигурные скобки позволяют вам «уйти обратно» в JavaScript, чтобы вы могли внедрить некоторую переменную из своего кода и отобразить ее пользователю. Например, это отобразитuser.name
:
Вы также можете «убежать в JavaScript» из атрибутов JSX, но вам нужно использовать фигурные скобки вместо кавычек. Например,return <h1>{user.name}</h1>;
className="avatar"
передает строку "avatar"
как CSS класс, но src={user.imageUrl}
считывает значение JavaScript переменной user.imageUrl
, а затем передает это значение как атрибут src
:
Вы также можете поместить более сложные выражения в фигурные скобки JSX, например, конкатенацию строк:return <img className="avatar" src={user.imageUrl} />;
В приведенном выше примереconst user = { name: 'Hedy Lamarr', imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg', imageSize: 90, }; export default function Profile() { return ( <> <h1>{user.name}</h1> <img className="avatar" src={user.imageUrl} alt={'Photo of ' + user.name} style={{ width: user.imageSize, height: user.imageSize, }} /> </> ); }
style={{}}
не является специальным синтаксисом, а является обычным объектом {}
внутри фигурных скобок style={ }
JSX. Вы можете использовать атрибут style
, когда ваши стили зависят от переменных JavaScript.
Рендеринг по условию
В React нет специального синтаксиса для написания условий. Вместо этого можно использовать те же приемы, что и при написании обычного JavaScript кода. Например, вы можете использовать операторif
для условного включения JSX:
Если вы предпочитаете более компактный код, вы можете использовать условный ? оператор. В отличие отlet content; if (isLoggedIn) { content = <AdminPanel />; } else { content = <LoginForm />; } return <div>{content}</div>;
if
, он работает внутри JSX:
Если вам не нужна ветвь<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>
else
, вы также можете использовать более короткий синтаксис логического &&:
Все эти подходы также работают для указанных по условию атрибутов. Если вы не знакомы с некоторыми элементами этого синтаксиса JavaScript, вы можете начать с постоянного использования<div>{isLoggedIn && <AdminPanel />}</div>
if...else
.
Рендеринг списков
Вы будете полагаться на возможности JavaScript, такие как цикл for и метод массива map() для отображения списков компонентов. Например, допустим, у вас есть набор продуктов:Внутри вашего компонента используйте методconst products = [ { title: 'Cabbage', id: 1 }, { title: 'Garlic', id: 2 }, { title: 'Apple', id: 3 }, ];
map()
для преобразования массива продуктов в массив элементов <li>
:
Обратите внимание, чтоconst listItems = products.map((product) => ( <li key={product.id}>{product.title}</li> )); return <ul>{listItems}</ul>;
<li>
имеет атрибут key
. Для каждого элемента в списке вы должны передать строку или число, которое однозначно идентифицирует этот элемент среди его соседних элементов. Обычно ключ должен исходить из ваших данных, таких как идентификатор базы данных. React будет полагаться на ваши ключи, чтобы понять, что произошло, если вы позже вставите, удалите или измените порядок элементов.
const products = [ { title: 'Cabbage', isFruit: false, id: 1 }, { title: 'Garlic', isFruit: false, id: 2 }, { title: 'Apple', isFruit: true, id: 3 }, ]; export default function ShoppingList() { const listItems = products.map((product) => ( <li key={product.id} style={{ color: product.isFruit ? 'magenta' : 'darkgreen', }} > {product.title} </li> )); return <ul>{listItems}</ul>; }
Реакция на события
Вы можете реагировать на события, объявляя функции обработчиков событий внутри ваших компонентов:Обратите внимание, чтоfunction MyButton() { function handleClick() { alert('You clicked me!'); } return <button onClick={handleClick}>Click me</button>; }
onClick={handleClick}
не имеет круглых скобок в конце. Не вызывайте функцию обработчика событий: вам нужно только передать ее вниз. React вызовет ваш обработчик событий, когда пользователь нажмет кнопку.
Обновление компонентов
Часто необходимо, чтобы компонент «запоминал» некоторую информацию и отображал ее. Например, может быть, вы хотите подсчитать, сколько раз была нажата кнопка. Для этого нужно добавить состояние к компоненту. Во-первых, импортируйтеuseState
из React:
Теперь вы можете объявить переменную состояния внутри вашего компонента:
Отfunction MyButton() { const [count, setCount] = useState(0);
useState
вы получите две вещи: текущее состояние (count
) и функцию, которая позволяет вам его обновить (setCount
). Вы можете давать им любые имена, но принято называть их как [something, setSomething]
.
При первом отображении кнопки count
будет равен 0
, потому что вы передали 0
в useState()
. Если вы хотите изменить состояние, вызовите setCount()
и передайте ему новое значение. Нажатие на эту кнопку увеличит счетчик:
React снова вызовет функцию вашего компонента. На этот раз счет будетfunction MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <button onClick={handleClick}>Clicked {count} times</button>; }
1
. Затем будет 2
. И так далее.
Если вы визуализируете один и тот же компонент несколько раз, каждый из них получит свое собственное состояние.
Обратите внимание, как каждая кнопка «запоминает» свое собственное состояние счетчика и не влияет на другие кнопки.import { useState } from 'react'; export default function MyApp() { return ( <div> <h1>Counters that update separately</h1> <MyButton /> <MyButton /> </div> ); } function MyButton() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <button onClick={handleClick}>Clicked {count} times</button>; }
Использование хуков
Функции, начинающиеся сuse
, называются хуками. useState
— это встроенный хук, предоставляемый React. Вы можете найти другие встроенные хуки в справочнике React API. Вы также можете написать свои собственные хуки, комбинируя существующие.
Хуки накладывают больше ограничений, чем обычные функции. Вы можете вызывать хуки только на верхнем уровне ваших компонентов (или других хуков). Если вы хотите использовать useState
в условии или цикле, создайте новый компонент и поместите его туда.
Обмен данными между компонентами
В предыдущем примере у каждойMyButton
был собственный независимый счетчик, и при нажатии каждой кнопки менялся только счетчик нажатой кнопки.
Однако часто вам потребуются компоненты для обмена данными и постоянного обновления вместе.
Чтобы оба компонента MyButton
отображали одно и то же число и обновлялись вместе, вам нужно переместить состояние от отдельных кнопок «вверх» к ближайшему родительскому компоненту, содержащему их все.
Теперь, когда вы нажмете любую кнопку, счетчик в MyApp
изменится, что изменит оба счетчика в MyButton
. Вот как это можно выразить в коде.
MyButton
в MyApp
:
Затем передайте состояние изexport default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Counters that update separately</h1> <MyButton /> <MyButton /> </div> ); } function MyButton() { // }
MyApp
в каждый MyButton
вместе с общим обработчиком кликов. Вы можете передавать информацию в MyButton
с помощью фигурных скобок JSX, точно так же, как вы делали это раньше со встроенными тегами, такими как <img>
:
Информация, которую вы передаете таким образом, называется пропсами. Теперь компонентexport default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Счетчики, изменяющиеся вместе</h1> <MyButton count={count} onClick={handleClick} /> <MyButton count={count} onClick={handleClick} /> </div> ); }
MyApp
содержит состояние счетчика и обработчик события handleClick
и передает их оба в качестве пропсов каждой из кнопок.
Наконец, измените MyButton
, чтобы он считывал пропсы, которые вы передали из его родительского компонента:
function MyButton({ count, onClick }) { return <button onClick={onClick}>Clicked {count} times</button>; }
onClick
. Проп onClick
каждой кнопки было установлено на функцию handleClick
внутри MyApp
, поэтому код внутри него выполняется. Этот код вызывает setCount(count + 1)
, увеличивая переменную состояния count
. Новое значение счетчика передается в качестве пропса каждой кнопке, поэтому все они показывают новое значение.
Это называется «подъем состояния вверх». Переместив состояние вверх, мы разделили его между компонентами.
Подробнее о всех случаях передачи данных между компонентами можно прочитать здесь.import { useState } from 'react'; export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <div> <h1>Счетчики, изменяющиеся вместе</h1> <MyButton count={count} onClick={handleClick} /> <MyButton count={count} onClick={handleClick} /> </div> ); } function MyButton({ count, onClick }) { return <button onClick={onClick}>Clicked {count} times</button>; }
Передача данных между компонентами в React
год назад·6 мин. на чтение
Иногда нужно, чтобы состояние двух компонентов всегда менялось вместе. Для этого нужно удалить их собственное состояние, переместить его к их ближайшему общему родителю, а затем передать его им через пропсы. Это известно как поднятие состояния вверх, и это одна из самых распространенных вещей, которые вы будете делать при написании React кода.
Содержание туториала по React
Иногда нужно, чтобы состояние двух компонентов всегда менялось вместе. Для этого нужно удалить их собственное состояние, переместить его к их ближайшему общему родителю, а затем передать его им через пропсы. Это известно как поднятие состояния вверх, и это одна из самых распространенных вещей, которые вы будете делать при написании React кода.
Обратите внимание, что нажатие кнопки одной панели не влияет на другую панель — они независимы.
Но теперь предположим, что вы хотите изменить его так, чтобы в любой момент времени раскрывалась только одна панель. При таком дизайне расширение второй панели должно привести к сворачиванию первой. Как бы Вы это сделали?
Чтобы согласовать эти две панели, вам нужно «поднять их состояние» до родительского компонента в три шага:
Поднятие состояния на примере
В этом примере родительский компонентAccordion
отображает две отдельные панели:
Accordion
Panel
Panel
Panel
имеет булевское состояние isActive
, которое определяет, видимо ли его содержимое.
import { useState } from 'react'; function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( <section className="panel"> <h3>{title}</h3> {isActive ? ( <p>{children}</p> ) : ( <button onClick={() => setIsActive(true)}>Show</button> )} </section> ); } export default function Accordion() { return ( <> <h2>Almaty, Kazakhstan</h2> <Panel title="About"> With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. </Panel> <Panel title="Etymology"> The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple. </Panel> </> ); }
- Удалить состояние из дочерних компонентов.
- Передать захардкоженные данные от общего родителя.
- Добавить состояние к общему родителю и передать его вместе с обработчиками событий.
Accordion
координировать обе панели и разворачивать только одну за раз.
Шаг 1: Удалить состояние из дочерних компонентов
Вы передадите контроль надisActive
панели ее родительскому компоненту. Это означает, что вместо этого родительский компонент будет передавать isActive
в Panel
в качестве пропса. Начните с удаления этой строки из компонента Panel
:
Вместо этого добавьтеconst [isActive, setIsActive] = useState(false);
isActive
в список пропсов Panel
:
Теперь родительский компонент компонентаfunction Panel({ title, children, isActive }) {
Panel
может управлять isActive
, передавая его как проп. И наоборот, компонент Panel
теперь не имеет контроля над значением isActive
— теперь это зависит от родительского компонента.
Шаг 2. Передать захардкоженные данные от общего родителя
Чтобы поднять состояние, вы должны найти ближайший общий родительский компонент обоих дочерних компонентов, которые вы хотите скоординировать:Accordion
(ближайший общий родитель)Panel
Panel
Accordion
. Поскольку он находится над обеими панелями и может управлять их пропсами, он станет «источником правды» для той панели, которая в данный момент активна. Заставим компонент Accordion
передавать жестко заданное значение isActive
(например, true
) на обе панели:
import { useState } from 'react'; export default function Accordion() { return ( <> <h2>Almaty, Kazakhstan</h2> <Panel title="About" isActive={true}> With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. </Panel> <Panel title="Etymology" isActive={true}> The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple. </Panel> </> ); } function Panel({ title, children, isActive }) { return ( <section className="panel"> <h3>{title}</h3> {isActive ? ( <p>{children}</p> ) : ( <button onClick={() => setIsActive(true)}>Show</button> )} </section> ); }
Шаг 3: Добавить состояние к общему родителю
Поднятие состояния часто меняет характер того, что вы храните как состояние. При этом одновременно должна быть активна только одна панель. Это означает, что общий родительский компонентAccordion
должен отслеживать, какая панель является активной. Вместо булевского значения он может использовать число в качестве индекса активной панели для переменной состояния:
Когдаconst [activeIndex, setActiveIndex] = useState(0);
activeIndex
равен 0
, активна первая панель, а когда 1
— вторая.
При нажатии кнопки «Показать» на любой из панелей необходимо изменить активный индекс в Accordion
. Panel
не может установить состояние activeIndex
напрямую, потому что оно определено внутри Accordion
. Компонент Accordion
должен явно разрешить компоненту Panel
изменять свое состояние, передав обработчик событий в качестве пропса:
<> <Panel isActive={activeIndex === 0} onShow={() => setActiveIndex(0)}> ... </Panel> <Panel isActive={activeIndex === 1} onShow={() => setActiveIndex(1)}> ... </Panel> </>
<button>
внутри Panel
теперь будет использовать проп onShow
в качестве обработчика события click
:
Это завершает подъем состояния вверх. Перемещение состояния в общий родительский компонент позволило согласовать две панели. Использование активного индекса вместо двух флажков «показано» гарантировало, что в данный момент активна только одна панель. А передача обработчика событий дочернему компоненту позволяла дочернему компоненту изменять состояние родителя.import { useState } from 'react'; export default function Accordion() { const [activeIndex, setActiveIndex] = useState(0); return ( <> <h2>Almaty, Kazakhstan</h2> <Panel title="About" isActive={activeIndex === 0} onShow={() => setActiveIndex(0)} > With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. </Panel> <Panel title="Etymology" isActive={activeIndex === 1} onShow={() => setActiveIndex(1)} > The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple. </Panel> </> ); } function Panel({ title, children, isActive, onShow }) { return ( <section className="panel"> <h3>{title}</h3> {isActive ? <p>{children}</p> : <button onClick={onShow}>Show</button>} </section> ); }
Управляемые и неуправляемые компоненты
Обычно компонент с некоторым локальным состоянием называют "неуправляемым". Например, исходный компонентPanel
с переменной состояния isActive
не контролируется, поскольку его родитель не может влиять на то, активна панель или нет.
Напротив, вы можете сказать, что компонент "управляется", когда важная информация в нем управляется пропсами, а не его собственным локальным состоянием. Это позволяет родительскому компоненту полностью определять свое поведение. Последний компонент Panel
с пропсом isActive
управляется компонентом Accordion
.
Неуправляемые компоненты проще использовать в своих родительских компонентах, поскольку они требуют меньшей настройки. Но они менее гибкие, когда вы хотите скоординировать их вместе. Управляемые компоненты максимально гибкие, но требуют от родительских компонентов полной настройки их пропсами.
На практике «управляемый» и «неуправляемый» не являются строгими техническими терминами — каждый компонент обычно имеет некоторое сочетание локального состояния и свойств. Тем не менее, это полезный способ рассказать о том, как устроены компоненты и какие возможности они предлагают.
При написании компонента учитывайте, какая информация в нем должна управляться (через пропсы), а какая информация не должна управляться (через состояние). Но вы всегда можете передумать и провести рефакторинг позже.
Единый источник правды для каждого состояния
В React приложении многие компоненты будут иметь собственное состояние. Некоторое состояние может «жить» рядом с компонентами-листьями (компонентами в нижней части дерева), такими как инпуты (<input />
). Другое состояние может «жить» ближе к верху приложения. Например, даже клиентские библиотеки маршрутизации обычно реализуются путем сохранения текущего маршрута в состоянии React и передачи его в пропсах
Для каждой уникальной части состояния вы выберете компонент, который «владеет» им. Этот принцип также известен как наличие «единого источника истины». Это не означает, что все состояния хранятся в одном месте, но для каждой части состояния существует определенный компонент, который содержит эту часть информации. Вместо того, чтобы дублировать общее состояние между компонентами, вы поднимете его до их общего родителя и передадите его дочерним элементам, которым оно нужно.
Ваше приложение будет меняться по мере того, как вы будете над ним работать. Обычно вы перемещаете состояние вниз или назад, пока вы все еще выясняете, где «живет» каждая часть состояния. Это все часть процесса.
Чтобы увидеть, как это выглядит на практике с еще несколькими компонентами, прочитайте статью Мышление в стиле React.
Резюме
- Если вы хотите скоординировать два компонента, переместите их состояние в их общий родитель.
- Затем передайте информацию через пропсы от их общего родителя.
- Наконец, передайте обработчики событий, чтобы потомки могли изменить состояние родителя.
- Полезно рассматривать компоненты как «управляемые» (управляемые пропсами) или «неуправляемые» (управляемые состоянием).
-
Таким образом можно выделить такие случаи передачи данных в React:
- от родительского компонента к дочернему;
- от дочернего компонента к родительскому;
- между соседними компонентами;
- от компонента к компоненту-потомку (через несколько уровней вниз);
- от компонента к компоненту-предку (через несколько уровней вверх).