React — компоненты, JSX и поток данных
Маршрут React
| Шаг | Статья |
|---|---|
| 1 | Первая программа |
| 2 | Обзор |
| 3 | Вы здесь |
| 4 | Хуки и формы |
| 5 | Router и данные |
Компонент — единица UI
Компонент — функция (или класс legacy), которая возвращает описание интерфейса:
function Greeting({ name }) {
return <h1>Привет, {name}!</h1>;
}
{ name } в параметрах — это props, данные от родителя. JSX похож на HTML и компилируется в вызовы React.createElement. Родитель передаёт значения так: <Greeting name="Анна" />.
Композиция:
function App() {
return (
<Card>
<Greeting name="Анна" />
<Button label="OK" onClick={() => alert('click')} />
</Card>
);
}
children — вложенное содержимое между тегами компонента.
JSX — правила
| HTML | JSX |
|---|---|
class | className |
for | htmlFor |
| самозакрывающийся тег опционален | <img /> обязателен |
JavaScript в разметке — {expression}:
const items = ['a', 'b'];
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
key — стабильный идентификатор строки в списке (не индекс, если порядок меняется).
Условия: {ok && <span>Да</span>} или {ok ? <A /> : <B />}.
Однонаправленный поток данных
Данные идут сверху вниз через props. Дочерний компонент не меняет props.
Чтобы реагировать на действие пользователя:
- Родитель хранит state.
- Передаёт значение и колбэк:
value+onChange. - Ребёнок вызывает
onChange(newValue).
Это контролируемый компонент — единый источник правды в родителе.
Подъём state (lifting state up): общее состояние переносят к ближайшему общему предку.
Virtual DOM
При изменении state React строит новое дерево описания UI, сравнивает его с предыдущим и вносит в реальный DOM только нужные правки. Вы описываете желаемый экран целиком; фреймворк сам решает, какие узлы обновить.
Типичные ошибки
| Ошибка | Решение |
|---|---|
| Мутировать массив/object в state | Новый объект: [...arr, x], { ...obj, field: v } |
key={index} при сортировке | Уникальный id из данных |
| Props vs state | Props — вход; state — внутренние изменения |
Дальше — 276.md (useState, useEffect, формы).