React Academy · Урок

Подъём состояния: принципы и примеры

Переносите общее состояние в ближайший общий родительский компонент и передавайте его вниз через props

«Подъём состояния: принципы и примеры» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

В этом уроке Вы изучите шаблон поднятия состояния: общее состояние перемещается в ближайший общий родительский компонент, чтобы соседние компоненты оставались синхронизированными.

Проблема: несинхронизированные соседние компоненты

Когда двум соседним компонентам нужны одни и те же данные, раздельное состояние в каждом из них приводит к ошибкам синхронизации. Решение — переместить состояние в их общего родительского компонента.

Определение общего предка

Найдите ближайший компонент, который является родительским одновременно для **обоих** компонентов, которым нужны общие данные. Переместите состояние туда и передавайте его вниз как свойства.

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Пример поднятия состояния счётчика

Предположим, два компонента показывают один и тот же счётчик. Вместо того чтобы управлять count в каждом компоненте, поднимите его в родительский компонент. Оба компонента получают count как свойство и вызывают функцию обратного вызова onChange, чтобы обновить его.

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Свойства-функции обратного вызова для обновлений

Дочерние компоненты не могут напрямую изменять состояние родительского компонента. Родительский компонент передаёт функцию обратного вызова, например `onChange`, как свойство. Дочерние компоненты вызывают эту функцию, когда хотят запросить изменение состояния.

Управляемый и неуправляемый компоненты после поднятия состояния

После поднятия состояния дочерний компонент, который раньше владел состоянием, становится **управляемым компонентом** — он получает текущее значение и onChange от родительского компонента. Родительский компонент становится единственным источником истины.

Поднятие состояния через несколько уровней

Иногда состояние нужно поднять на несколько уровней вверх по дереву. Если состояние приходится поднимать через множество промежуточных компонентов, рассмотрите контекст, чтобы избежать последовательной передачи свойств.

Преимущества поднятия состояния

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

Производное состояние из поднятого состояния

Вычисляйте производные значения из поднятого состояния внутри родительского компонента и передавайте их как дополнительные свойства. Никогда не дублируйте состояние — выводите его из исходного.

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

Когда поднятие состояния становится чрезмерным

Если Вам приходится поднимать состояние через четыре и более уровня, структура дерева компонентов может быть неправильной либо пришло время использовать контекст или библиотеку управления состоянием.

Быстрая проверка

Как правильно поступить, если двум соседним компонентам нужно использовать один и тот же фрагмент состояния?

Повторение

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

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

Часто задаваемые вопросы

Урок «Подъём состояния: принципы и примеры» бесплатный?

Да — полный текст урока «Подъём состояния: принципы и примеры» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Подъём состояния: принципы и примеры»?

Переносите общее состояние в ближайший общий родительский компонент и передавайте его вниз через props Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Подъём состояния: принципы и примеры»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Подъём состояния: принципы и примеры
Проброс props: когда он мешает, а когда уместен
Шаблоны взаимодействия соседних компонентов
Выбор подходящего места для состояния

← Назад к React Academy