Ответ
React Context — это механизм для передачи данных через дерево компонентов без явной передачи пропсов на каждом уровне. Он решает проблему "пропс дриллинга" (prop drilling), когда данные приходится передавать через множество промежуточных компонентов.
Основные элементы Context:
React.createContext()— создаёт объект Context.Context.Provider— компонент, который предоставляет данные.Context.ConsumerилиuseContext— способы потребления данных.
Пример:
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div>Current theme: {theme}</div>;
}Когда использовать:
- Глобальные данные (темы, аутентификация, локализация).
- Данные, используемые многими компонентами на разных уровнях.
Недостатки:
- Может усложнить переиспользование компонентов.
- Чрезмерное использование может сделать код менее предсказуемым.
Ответ 18+ 🔞
Слушай, а вот эта ваша React Context, ну просто пиздец какая удобная штука, если честно. Представь себе: тебе надо передать какую-то хуйню, ну там тему или данные юзера, с верхнего уровня приложения куда-нибудь в глубокую-глубокую недра какого-нибудь <SuperNestedButton />. И чтобы не тащить эти пропсы через всех твоих дедушек, бабушек, дядь и троюродных компонентов-племянников — вот тут-то Context и выручает, как родной. Решает проблему этого ёбанного "prop drilling", когда ты прокидываешь одно и то же через десять компонентов, которые на него вообще плевать хотели.
Из чего эта магия состоит, блядь:
React.createContext()— создаёт тебе такую, понимаешь, коробочку-контекст. Пустую пока что.Context.Provider— это ты в эту коробочку что-то кладёшь и говоришь: "Всем детям моим — кушайте!".Context.ConsumerилиuseContext— а это уже сами дети, которые подходят к коробочке и хватают оттуда что им надо, без спросу.
Смотри, как это выглядит в коде, ёпта:
const ThemeContext = React.createContext('light'); // Создали контекст, дефолтное значение 'light'
function App() {
return (
<ThemeContext.Provider value="dark"> {/* Засунули в него 'dark' */}
<Toolbar /> {/* А этот Toolbar где-то там, глубоко внутри */}
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext); // Подошёл, взял 'dark' из контекста. Всё. Ни у кого не спрашивая.
return <div>Current theme: {theme}</div>; // И рисует себе спокойно
}Когда эту дуду применять, чтобы не вышло пиздопроебидны:
- Ну, глобальные вещи, которые нахуй везде нужны: тема светлая/тёмная, залогинен ли юзер, язык интерфейса.
- Когда одни и те же данные нужны кучке компонентов в разных углах приложения.
Но и подлянка тут тоже есть, я тебе скажу:
- Компонент, который жрёт из контекста, становится привязанным к нему. Хочешь переиспользовать его в другом месте — могут быть траблы, если там такого контекста нет.
- Если развесить провайдеры на каждую чих-пых, то потом нихуя не разберёшь, откуда что прилетает. Архитектура может превратиться в спагетти, а отладка — в ебаный квест.
Короче, инструмент охуенный, но как молотком: гвозди забивать — хорошо, а по лбу стучать — так себе.