0Pricing
React Academy · Урок

Выбор подходящего места для состояния

Применяйте схему выбора: локальное состояние, поднятое состояние или глобальное состояние

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

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

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

Шаг 1: кто использует это состояние

Сначала спросите себя: какие компоненты отрисовываются с использованием этого состояния? Перечислите их. Если состояние использует только один компонент, оставьте его локальным в этом компоненте.

Локальное состояние

Состояние, используемое ровно одним компонентом, хранится в этом компоненте с помощью useState. Примеры: открыт ли раскрывающийся список, текущее значение управляемого поля ввода, видна ли всплывающая подсказка.
function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

Шаг 2: найдите общего предка

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

Поднятое состояние (2–3 уровня)

Состояние, общее для 2–3 компонентов на примерно одном уровне вложенности, хорошо подходит для подъёма. Им владеет общий родитель, который передаёт его вниз через пропсы.

Шаг 3: не слишком ли глубок проброс пропсов

Если общий предок находится на 4 и более уровней выше компонентов-потребителей, передача пропсов через промежуточные компоненты создаёт лишний шум. Рассмотрите контекст.

Состояние в контексте

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

Шаг 4: является ли состояние сложным или общим для разных страниц

Если состояние имеет сложную логику обновления, требует отмены и повтора действий, должно сохраняться при навигации или используется в полностью отдельных деревьях компонентов, применяйте специализированную библиотеку управления состоянием (Zustand, Redux).

Состояние сервера отличается

Данные, полученные с сервера, являются *состоянием сервера*, а не состоянием интерфейса. Не храните их в useState или глобальном хранилище — используйте React Query, SWR или RTK Query, которые автоматически обрабатывают кэширование, повторную загрузку и состояния ошибок.

Схема принятия решения

1 потребитель → локальный useState. 2–3 потребителя на примерно одном уровне → поднять состояние в родительский компонент. Проброс через 4 и более уровней → контекст. Сложная логика или разные деревья → Zustand/Redux. Данные сервера → React Query/SWR.

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

Какое место для состояния лучше всего подходит текущему аутентифицированному пользователю, к которому нужен доступ многим компонентам большого приложения?

Итоги

Соотносите место хранения состояния с потребителями: локальное — для одного, поднятое — для нескольких близких, контекст — для многих на разных уровнях, библиотека управления состоянием — для сложного состояния или разных деревьев, React Query — для данных сервера.

Курс завершён

Поздравляем! Вы завершили курс **Подъём состояния и решения для проброса пропсов**. Теперь у вас есть понятная схема, которая помогает решать, где хранить состояние и как правильно им делиться.

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

Урок «Выбор подходящего места для состояния» бесплатный?

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

Чему я научусь в уроке «Выбор подходящего места для состояния»?

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

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

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

Сколько времени занимает урок «Выбор подходящего места для состояния»?

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

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

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

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

  1. Подъём состояния: принципы и примеры
  2. Проброс props: когда он мешает, а когда уместен
  3. Шаблоны взаимодействия соседних компонентов
  4. Выбор подходящего места для состояния
← Назад к React Academy