Как создать глобальное состояние с помощью Context API?

Question

Context API — это способ передачи данных через дерево компонентов без необходимости передавать их через пропсы на каждом уровне. Для создания глобального состояния вы создаете контекст с помощью React.createContext(), оборачиваете ваши компоненты в провайдер, а затем используете useContext для доступа к данным в любом дочернем компоненте.

YeaHub · Accepted Answer

Context API в React предоставляет способ управления глобальным состоянием и передачи данных через дерево компонентов, избегая необходимости передавать их через каждый уровень с помощью пропсов. Это особенно полезно в больших приложениях, где одно и то же состояние или данные должны быть доступны в нескольких компонентах на разных уровнях иерархии.Чтобы создать глобальное состояние с использованием Context API, выполните следующие шаги:Создайте контекст:import React, { createContext, useState } from 'react'; const GlobalContext = createContext(); // Создаем контекстСоздайте провайдер для управления состоянием:const GlobalProvider = ({ children }) => { const [state, setState] = useState({ user: null }); const updateUser = (user) => { setState({ user }); // Функция для обновления состояния }; return ( {children} ); };Здесь GlobalProvider хранит состояние и функции для его обновления и предоставляет их через GlobalContext.Provider.Используйте провайдер в вашем приложении:function App() { return ( ); }Получите доступ к данным контекста в дочерних компонентах:import React, { useContext } from 'react'; function ComponentA() { const { state, updateUser } = useContext(GlobalContext); // Используем useContext для доступа к состоянию return (

Пользователь: {state.user ? state.user.name : 'Нет данных'}

); }В этом примере ComponentA использует useContext, чтобы получить доступ к глобальному состоянию и функции updateUser. Когда пользователь нажимает кнопку, состояние обновляется, и все компоненты, подписанные на этот контекст, будут перерисованы с новыми данными.Context API упрощает управление глобальным состоянием, устраняя необходимость в prop drilling