Когда использовать глобальное и локальное состояние
Применяйте принцип близости: храните состояние как можно ближе к его потребителю и поднимайте его только тогда, когда оно нужно нескольким несвязанным компонентам.
«Когда использовать глобальное и локальное состояние» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Где хранить состояние
Для каждой части состояния есть оптимальное место. Неправильный выбор приводит либо к проблемам из-за передачи свойств через цепочку компонентов, либо к неоправданному усложнению глобального состояния. Основной принцип: храните состояние как можно ближе к компонентам, которые его используют.
Локальное состояние компонента
Если состояние использует только один компонент, оно должно находиться в useState или ref этого компонента. Делить его ни с кем не нужно — оставьте его локальным. Это самый простой и распространённый случай.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}Поднятие состояния
Когда двум соседним компонентам требуется одно и то же состояние, поднимите его в ближайший общий родительский компонент. Передавайте его вниз через свойства и функции обратного вызова. Это стандартный подход в React и Vue до перехода к глобальному хранилищу.
Общий контекст — обмен на среднем уровне
Когда состояние нужно передавать по всему поддереву без последовательной передачи свойств через компоненты, подходящим инструментом будет Context в React или механизм предоставления и внедрения зависимостей в Vue. Это решение для обмена в пределах умеренной области действия (страницы или функционального модуля).
Глобальное хранилище — состояние всего приложения
Используйте глобальное хранилище (Redux, Zustand, Pinia) для состояния, которое: 1) используется множеством не связанных друг с другом компонентов; 2) должно сохраняться при навигации; 3) имеет сложную логику обновления; 4) выигрывает от проверки в DevTools.
Примеры: локальное состояние
Локальное состояние подходит для: значений полей формы, состояния открытия и закрытия всплывающей подсказки, видимости модального окна, состояния при наведении, состояния анимации и индикаторов загрузки, используемых одним компонентом.
Примеры: поднятое состояние
Поднятое состояние подходит для: общего фильтра, используемого двумя соседними списками, выбранной вкладки в группе вкладок и данных формы, общих для двух шагов.
Примеры: контекст и предоставление данных
Контекст подходит для: текущей темы, аутентифицированного пользователя, региональных и языковых настроек, флагов функций и стека уведомлений — данных, которые используются на многих уровнях, но обновляются редко.
Примеры: глобальное хранилище
Глобальное хранилище подходит для: корзины покупок, токенов аутентификации и объекта пользователя, очереди уведомлений (сообщения появляются во всплывающем уведомлении из любого места) и данных реального времени, которые одновременно отображаются в нескольких представлениях.
Состояние сервера и состояние клиента
Сетевые данные, полученные от API, относятся к особой категории — состоянию сервера. Для них нужны обработка загрузки и ошибок, кэширование и инвалидация. React Query, SWR и TanStack Query управляют состоянием сервера, поэтому ваше хранилище может сосредоточиться на настоящем состоянии клиента.
Распространённая ошибка: всё в глобальном хранилище
Не помещайте всё состояние в глобальное хранилище «на всякий случай». Локальное состояние дешевле, проще и удобнее для тестирования. Чрезмерное использование глобального состояния создаёт связь между компонентами, которые должны быть независимыми.
Схема принятия решения
Спросите себя: 1) Нужно ли это другим компонентам? Нет → локальное состояние. 2) Нужно ли это соседним компонентам? Да → поднимите состояние. 3) Нужно ли это поддереву компонентов? Да → контекст или предоставление данных. 4) Нужно ли это множеству не связанных друг с другом компонентов или требуется проверка в DevTools? Да → глобальное хранилище.
Быстрая проверка
Где следует хранить состояние открытия и закрытия одного компонента аккордеона?
Итоги: где хранить состояние
Принцип: храните состояние как можно ближе к компонентам, которые его используют. Для состояния одного компонента применяйте локальные useState или ref. Для обмена между соседними компонентами поднимайте состояние. Для обмена внутри поддерева используйте контекст или предоставление данных. Для состояния всего приложения со сложными обновлениями используйте глобальное хранилище. Состояние сервера (данные API) относится к React Query или SWR, а не к глобальному хранилищу.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «Когда использовать глобальное и локальное состояние» бесплатный?
Да — полный текст урока «Когда использовать глобальное и локальное состояние» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Когда использовать глобальное и локальное состояние»?
Применяйте принцип близости: храните состояние как можно ближе к его потребителю и поднимайте его только тогда, когда оно нужно нескольким несвязанным компонентам. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Когда использовать глобальное и локальное состояние»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Redux Toolkit: createSlice и configureStore
- Zustand для лёгкого состояния React
- Pinia для Vue: defineStore и storeToRefs
- Когда использовать глобальное и локальное состояние