Доступ до контексту в компоненті
Спосіб 1. Сучасний - через хук useContext (функціональні компоненти)
Це основний і найзручніший спосіб у React з хуками.
javascript
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
function Button() {
const theme = useContext(ThemeContext); // отримуємо поточне значення контексту
return <button className={theme}>Тема: {theme}</button>;
}Що робить useContext(Context):
- повертає значення, передане в найближчому
<Context.Provider>; - автоматично підписує компонент на оновлення цього значення;
- викликає перерендер, якщо
valueу Provider змінилося.
Спосіб 2. Старий - через <Context.Consumer>
Використовується в класових компонентах або там, де хуки недоступні.
javascript
import { ThemeContext } from "./ThemeContext";
function Button() {
return (
<ThemeContext.Consumer>
{theme => <button className={theme}>Тема: {theme}</button>}
</ThemeContext.Consumer>
);
}Працює аналогічно useContext,
але синтаксис громіздкий - використовується рідко, здебільшого для зворотної сумісності.
Спосіб 3. У класовому компоненті через contextType
Якщо ти використовуєш класовий компонент (без хуків):
javascript
import React from "react";
import { ThemeContext } from "./ThemeContext";
class Button extends React.Component {
static contextType = ThemeContext;
render() {
const theme = this.context; // доступ до контексту
return <button className={theme}>Тема: {theme}</button>;
}
}Особливості:
- працює тільки з одним контекстом;
- React автоматично підставляє значення з найближчого
<Provider>.
Приклад повного циклу
javascript
// ThemeContext.js
import { createContext } from "react";
export const ThemeContext = createContext("light");
// App.jsx
import { ThemeContext } from "./ThemeContext";
import Button from "./Button";
export default function App() {
return (
<ThemeContext.Provider value="dark">
<Button />
</ThemeContext.Provider>
);
}
// Button.jsx
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
export default function Button() {
const theme = useContext(ThemeContext);
return <button className={theme}>Поточна тема: {theme}</button>;
}У результаті:
компонент Button отримує доступ до "dark" напряму, без передавання props через дерево.
Підсумок
| Спосіб | Де використовувати | Як |
|---|---|---|
useContext(Context) | Сучасний, функціональні компоненти | const value = useContext(MyContext) |
<Context.Consumer> | Універсальний, старий синтаксис | <Context.Consumer>{value => (...)}</Context.Consumer> |
contextType | Класові компоненти | static contextType = MyContext + this.context |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.