Быстрый старт с 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>; }
11 ошибок, которых следует избегать при создании React приложений
2 года назад·7 мин. на чтение
Некоторые распространенные ошибки в разработке React приложений, которых следует избегать.
Поскольку React становится все более и более популярным, все больше и больше React разработчиков сталкиваются с различными проблемами в процессе разработки.
В этой статье, мы обобщим некоторые распространенные ошибки в разработке React приложений, чтобы помочь вам их избежать.
Если вы только начинаете использовать React, рекомендуется внимательно ознакомиться с этой статьей. Если вы уже используете React для разработки проектов, также рекомендуется проверить и заполнить пробелы.
Прочитав эту статью, вы узнаете, как избежать эти 11 ошибок React:
Ошибка: При рендеринге списка не используется
Проблема
Когда мы впервые изучали React, мы отображали список следующим образом:
Ошибка: Использование состояния сразу после выполнения
Проблема
Когда мы изменяем данные через
Ошибка: Появление бесконечного цикла при использовании
Проблема
Когда мы напрямую вызываем метод
Приведем 4 случая использования
Ошибка: Отсутствие очистки побочных эффектов в
Проблема
В классовых компонентах мы используем метод жизненного цикла
- При рендеринге списка не используется
key
- Изменение значения состояния прямым присваиванием
- Привязка значения состояния непосредственно к свойству value инпута
- Использование состояния сразу после выполнения
setState
- Появление бесконечного цикла при использовании
useState
+useEffect
- Отсутствие очистки побочных эффектов в
useEffect
- Неправильное использование логических операторов
- Тип пропсов компонента не типизирован
- Передача строк в качестве значений компонентам
- Имя компонента не начинается с заглавной буквы
- Неверная привязка события к элементу
Ошибка: При рендеринге списка не используется key
Проблема
Когда мы впервые изучали React, мы отображали список следующим образом:
После рендеринга консоль выдаст предупреждение, что для элементов списка необходимо указать ключ. Решение Вам просто нужно последовать этой подсказке и добавитьconst items = [ { id: 1, value: 'item1' }, { id: 2, value: 'item2' }, { id: 3, value: 'item3' }, { id: 4, value: 'item4' }, { id: 5, value: 'item5' } ]; const listItems = items.map((item) => { return <li>{item.value}</li> });
key
к каждому элементу:
const items = [ { id: 1, value: ‘item1’ }, { id: 2, value: ‘item2’ }, { id: 3, value: ‘item3’ }, { id: 4, value: ‘item4’ }, { id: 5, value: ‘item5’ } ]; const listItems = items.map((item) => { return <li key={item.id}>{item.value}</li> });
key
помогает React определить, какие элементы были изменены, например, добавлены или удалены. Поэтому нам нужно установить уникальное значение ключа для каждого элемента в массиве.
Для значения ключа лучше всего установить уникальное значение. В приведенном выше примере используется id
. Можно использовать индекс массива, но такой подход не рекомендуется.
Уникальный ключ помогает React следить за изменениями списка - какой элемент удалился или переместился.
Ошибка: Изменение значения состояния прямым присваиванием
Проблема В React нельзя назначать состояние и изменять напрямую, иначе это вызовет проблемы.В этот момент будет выдано предупреждение не изменять состояние напрямую, а использовать// классовый компонент handleChange = () => { this.state.name = "John"; };
setState()
.
Решение
Классовые компоненты могут быть изменены с помощью setState()
, а функциональные компоненты могут быть изменены с помощью useState()
:
// Классовые компоненты: используйте setState() this.setState({ name: "John" }); // Функциональные компоненты:используйте useState() const [name, setName] = useState(""); setName("John");
Ошибка: Привязка значения состояния непосредственно к свойству value инпута
Проблема Когда мы напрямую привязываем значение состояния к свойствуvalue
инпута, мы обнаружим, что независимо от того, что мы вводим в поле ввода, содержимое поля ввода не изменится.
Это связано с тем, что мы используем переменную состояния в качестве значения по умолчанию для присвоения значенияexport default function App() { const [count, setCount] = useState(0); return <input type="text" value={count} />; }
<input>
, а состояние в функциональном компоненте может быть изменено только функцией set*
, возвращаемым useState
. Таким образом, решение также очень простое, просто используйте функцию set*
при изменении. Подробнее о том как работать с инпутом в React можно прочитать в этой статье.
Решение
Просто привяжите событие onChange
к <input>
и измените его, вызвав setCount
:
export default function App() { const [count, setCount] = useState(0); const handleChange= (event) => setCount(event.target.value); return <input type="text" value={count} onChange={handleChange} />; }
Ошибка: Использование состояния сразу после выполнения setState
Проблема
Когда мы изменяем данные через setState()
и сразу же хотим получить новые данные, возникнет ситуация, что возвращаются старые данные:
Это связано с тем, что// Классовые компоненты // инициализация состояния this.state = { name: "John" }; // обновление состояния this.setState({ name: "Hello, John!" }); console.log(this.state.name); // => John
setState()
является асинхронным. Когда setState()
выполняется, реальная операция обновления будет помещена в асинхронную очередь для выполнения, а код, который будет выполняться следующим (т.е. console.log
в примере), выполняется синхронно, поэтому выводимое в консоль состояние не является последним значением.
Решение
Просто передайте последующую операцию, которая будет выполняться как функция, в качестве второго параметра setState()
, эта функция обратного вызова будет выполнена после завершения обновления.
Теперь обновленное значение выводится правильно.this.setState({ name: "Hello, John!" }, () => { console.log(this.state.name); // => Hello, John! });
Ошибка: Появление бесконечного цикла при использовании useState
+ useEffect
Проблема
Когда мы напрямую вызываем метод set*()
, возвращаемый useState()
внутри useEffect()
, и не устанавливаем второй параметр в useEffect()
, мы столкнемся с бесконечным циклом:
После этого можно увидеть, что данные на странице обновляются, и функцияexport default function App() { const [count, setCount] = useState(0); useEffect(() => { setCount(count + 1); }); return <div className="App">{count}</div>; }
useEffect()
вызывается бесконечно, входя в состояние бесконечного цикла.
Решение
Это распространенная проблема неправильного использования useEffect()
. useEffect()
можно рассматривать как комбинацию трех функций жизненного цикла: componentDidMount
, componentDidUpdate
и componentWillUnmount
в классовых компонентах. useEffect(effect, deps)
принимает 2 аргумента:
effect
функция, которая должна выполниться (побочный эффект)deps
массив зависимостей
deps
выполняется функция эффекта. Чтобы изменить метод, вам нужно всего лишь передать []
в качестве второго аргумента useEffect()
:
export default function App() { const [count, setCount] = useState(0); useEffect(() => { setCount(count + 1); }, []); return <div className="App">{count}</div>; }
useEffect
:
- Если второй параметр не передан: при обновлении любого состояния будет запущена функция эффекта
useEffect
.
useEffect(() => { setCount(count + 1); });
- Если второй параметр - это пустой массив: функция эффекта
useEffect
срабатывает только при монтировании и размонтировании.
useEffect(() => { setCount(count + 1); }, []);
- Если второй параметр представляет собой массив с одним значением: функция эффекта
useEffect
будет запускаться только при изменении значения.
useEffect(() => { setCount(count + 1); }, [name]);
- Если второй параметр представляет собой массив c несколькими значениями: функция эффекта
useEffect
будет запускаться при изменении хотя бы одного из значений из списка зависимостей.
useEffect(() => { setCount(count + 1); }, [name, age]);
Ошибка: Отсутствие очистки побочных эффектов в useEffect
Проблема
В классовых компонентах мы используем метод жизненного цикла componentWillUnmount()
для очистки некоторых побочных эффектов, таких как таймеры, слушатели событий и т. д.
Решение
Из функции эффекта useEffect()
может быть возвращена функция очистки, которая аналогична роли метода жизненного цикла componentWillUnmount()
:
useEffect(() => { // ... return () => clearInterval(id); }, [name, age]);
Ошибка: Неправильное использование логических операторов
Проблема В синтаксисе JSX/TSX мы часто используем логические значения для управления отображаемыми элементами, и во многих случаях мы используем оператор&&
для обработки этой логики:
Мы думаем, что в это время страница будет отображать пустой контент, но на самом деле на ней отобразитсяconst count = 0; const Comp = () => count && <h1>Chris1993</h1>;
0
.
Решение
Причина в том, что ложное выражение приводит к тому, что элементы после &&
пропускаются, и будет возвращено значение ложного выражения. Поэтому нужно стараться написать условие оценки как можно более полным, не полагаясь на истинное и ложное логическое значение JavaScript для сравнения:
Теперь страница будет отображать пустой контент, как и ожидается.const count = 0; const Comp = () => count > 0 && <h1>Chris1993</h1>;
Ошибка: Типы просов компонента не типизированы
Проблема Если компоненты, разработанные разными членами команды, не имеют четко определенных типов для просов, то для коллег будет не очевидно, как использовать компоненты, например:Решениеconst UserInfo = (props) => { return ( <div> {props.name} : {props.age} </div> ); };
- Определить типы пропсов компонента, используя TypeScript.
// Классовые компоненты interface AppProps { value: string; } interface AppState { count: number; } class App extends React.Component<AppProps, AppStore> { // ... } // Функциональные компоненты interface AppProps { value?: string; } const App: React.FC<AppProps> = ({ value = "", children }) => { //... };
- Без использования TypeScript типы пропсов могут быть определены с помощью
propTypes
.
const UserInfo = (props) => { return ( <div> {props.name} : {props.age} </div> ); }; UserInfo.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired, };
Ошибка: Передача строк в качестве значений компонентам
Проблема Так как React имеет шаблонный синтаксис, очень похожий на HTML, часто бывает так, что числа передаются напрямую компонентам в пропсы, что приводит к неожиданному результату:Сравнение<MyComp count="99"></MyComp>
props.count === 99
в компоненте MyComp
вернет false
.
Решение
Правильный способ должен заключаться в использовании фигурных скобок для передачи пропсов:
Передача строковых просов будет выглядеть следующим образом:<MyComp count={99}></MyComp>
<MyComp count={"99"}></MyComp>
Ошибка: Имя компонента не начинается с заглавной буквы
Проблема Начинающие разработчики часто забывают называть свои компоненты с заглавной буквы. Компоненты, начинающиеся со строчной буквы в JSX/TSX, компилируются в элементы HTML, такие как<div />
для тегов HTML.
Решение Просто измените первую букву на заглавную:class myComponent extends React.component {}
class MyComponent extends React.component {}
Ошибка: Неверная привязка события к элементу в классовых компонентах
ПроблемаПри нажатии на кнопкуimport { Component } from "react"; export default class HelloComponent extends Component { constructor() { super(); this.state = { name: "John", }; } update() { this.setState({ name: "Hello John!" }); } render() { return ( <div> <button onClick={this.update}>update</button> </div> ); } }
update
консоль сообщит об ошибке, что невозможно прочитать свойства undefined
(чтение setState
)
Решение
Это происходит потому, что this
не привязан к тому контексту, который мы ожидаем. Есть несколько решений:
- Привязать контекст в конструкторе при помощи метода
bind
constructor() { super(); this.state = { name: "John" }; this.update = this.update.bind(this); }
- Использовать стрелочные функции
update = () => { this.setState({ name: "Hello John!" }); };
- Привязать прямо в функции рендеринга
<button onClick={this.update.bind(this)}>update</button>
- Использовать стрелочные функции в функции рендеринга (не рекомендуется, т.к. это создает новую функцию каждый раз при рендеринге компонента, что влияет на производительность)
<button onClick={() => this.update()}>update</button>