🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Что такое usecontext?
Это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации.
🚩Как он работает
🟠Создание контекста
Для создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.
import React, { createContext, useState } from 'react';
const MyContext = createContext();
🟠Provider
Компонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.
const MyProvider = ({ children }) => {
const [state, setState] = useState('Hello World');
return (
{children}
);
};
🟠useContext
Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.
import React, { useContext } from 'react';
const MyComponent = () => {
const { state, setState } = useContext(MyContext);
return (
{state}
setState('New Value')}>Change Value
);
};
Полный пример
import React, { createContext, useState, useContext } from 'react';
// Создание контекста
const MyContext = createContext();
const MyProvider = ({ children }) => {
const [state, setState] = useState('Hello World');
return (
{children}
);
};
const MyComponent = () => {
const { state, setState } = useContext(MyContext);
return (
{state}
setState('New Value')}>Change Value
);
};
const App = () => (
);
export default App;
Ставь 👍 и забирай 📚 Базу знаний