Этап 2 из 12 · ≈ 8 ч

Компоненты, props и state

Основа с Junior

Из чего строится React-приложение — компоненты, однонаправленный поток данных, списки и ключи.

Props — входные данные от родителя, только для чтения. State — собственное состояние компонента; его изменение вызывает перерисовку. Данные текут сверху вниз, события — снизу вверх через колбэки.

Что важно знать

  • Состояние меняют только через сеттер и неизменяемо: новый объект или массив, а не push в старый — иначе React не заметит изменения.
  • Обновление состояния асинхронно и пакетное; зависимое от предыдущего значения — через функцию: setN(n => n + 1).
  • Подъём состояния: общее для двух компонентов состояние хранят в ближайшем общем родителе.
  • Ключи в списках — стабильный идентификатор элемента, не индекс: иначе при вставке и удалении путаются состояние и поля ввода.
  • Композиция через children вместо глубокой передачи props.
  • Производное значение вычисляют при рендере, а не хранят в отдельном state.

Темы этапа

Критерии освоения

Junior ≈ 8 ч

  • Разделяет props и state, поднимает общее состояние в ближайшего родителя
  • Обновляет состояние неизменяемо и через функцию, если оно зависит от предыдущего
  • Использует стабильные ключи в списках

Практика. Сделать список покупок с добавлением, удалением, отметкой и фильтром, разбитый на 4 компонента.

Middle ≈ 4 ч

  • Вычисляет производные значения при рендере вместо дублирующего состояния
  • Объясняет согласование (reconciliation) и роль ключей

Практика. Найти в существующем коде дублирующее и производное состояние и упростить компоненты.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Чем state отличается от props в React?Junior

props — входные данные от родителя, компонент их только читает. state — собственные данные компонента, меняются через setState и вызывают перерисовку. Данные текут сверху вниз; ребёнок сообщает об изменениях родителю через колбэки в props. Общее состояние…

Полный разбор
Почему в React нельзя изменять состояние напрямую?Junior

React узнаёт об изменении, сравнивая ссылки (Object.is). Мутация (items.push(x), user.name = ...) оставляет ссылку прежней — перерисовки не будет, а memo и useEffect не увидят изменений. Состояние обновляют новым объектом: spread, map, filter, toSorted.

Полный разбор
Что такое виртуальный DOM и зачем в списках нужен key?Junior

Компонент возвращает описание интерфейса (дерево React-элементов). При обновлении React сравнивает новое дерево со старым (reconciliation) и применяет к настоящему DOM минимальные изменения. key помогает сопоставить элементы списка между рендерами: по нему…

Полный разбор
Как поделиться состоянием между соседними компонентами — что значит «поднять состояние»?Junior

Данные в React текут сверху вниз через props. Если двум соседям нужно одно состояние, его поднимают в ближайшего общего родителя: родитель хранит state, передаёт значение вниз через props и функцию изменения (колбэк) тем, кто должен его менять. Так у данных…

Полный разбор
Как работает useState?Junior

const [value, setValue] = useState(initial) — React хранит значение вне функции компонента, привязав его к позиции хука; при следующих рендерах возвращает текущее. setValue планирует перерисовку; если новое значение равно старому (Object.is) — рендер…

Полный разбор

Документация

← Вся карта «React»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования