В React контекст предоставляет механизм для передачи данных вниз по иерархии компонентов без явной передачи пропсов через каждый уровень. Контекст позволяет создать “глобальные” данные, которые могут быть доступны любому компоненту внутри определенного контекста.
Создание контекста
Для создания контекста в React используется функция createContext(). Она возвращает объект, который содержит провайдер и потребитель контекста.
// Создание контекста
const MyContext = React.createContext();
// Провайдер контекста
<MyContext.Provider value={/* значение контекста */}>
{/* Вложенные компоненты */}
</MyContext.Provider>Использование контекста
Для использования контекста в компонентах используется компонент Consumer или хук useContext().
// Компонент, использующий контекст
<MyContext.Consumer>
{value => (
// Использование значения контекста
<div>{value}</div>
)}
</MyContext.Consumer>
// Хук useContext()
const value = useContext(MyContext);Передача значения контекста
Значение контекста передается через value в провайдере контекста. Все компоненты, вложенные в провайдер, получают доступ к этому значению.
const App = () => {
return (
<MyContext.Provider value="Значение контекста">
<ChildComponent />
</MyContext.Provider>
);
};Потребители контекста по умолчанию
Если компонент не найдет соответствующего провайдера контекста в своей иерархии, то он будет использовать значение по умолчанию, указанное при создании контекста.
// Создание контекста с значением по умолчанию
const MyContext = React.createContext("Значение по умолчанию");
// Компонент без провайдера
const ChildComponent = () => {
const value = useContext(MyContext);
return <div>{value}</div>; // Выводит "Значение по умолчанию"
};Использование контекста позволяет передавать данные между компонентами без необходимости явной передачи пропсов через каждый уровень иерархии. Однако, следует быть осторожным при использовании контекста, чтобы не злоупотреблять им и не усложнять понимание потока данных в приложении.
