React хук useContext
React Context / Контекст
React Context — це спосіб глобального керування станом.
Його можна використовувати разом із хуком useState для легшого обміну станом між глибоко вкладеними компонентами, ніж за допомогою useState окремо.
Проблема
Стан (state) має зберігатися найвищим батьківським компонентом у стеку, якому потрібен доступ до стану.
Для ілюстрації, ми маємо багато вкладених компонентів. Компонент у верхній і нижній частині стеку потребує доступу до стану (state).
Щоб зробити це без контексту, нам потрібно буде передати стан як "реквізити" ("props") через кожен вкладений компонент. Це називається "prop drilling" ("штампове буріння").
Приклад:
Передача "props" через вкладені компоненти:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);
Незважаючи на те, що компоненти 2-4 не потребували стану, вони повинні були передати стан, щоб він міг досягти компонента 5.
Рішення
Рішення — створити контекст.
Створити контекст
Щоб створити контекст, потрібно імпортувати createContext та ініціалізувати його:
import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";
const UserContext = createContext()
Далі ми використаємо постачальник контексту, щоб обернути дерево компонентів, яким потрібен контекст стану.
Постачальник контексту
Оберніть дочірні компоненти в постачальник контексту та надайте значення стану.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Тепер усі компоненти цього дерева матимуть доступ до контексту користувача.
Використовуйте хук useContext
Щоб використовувати контекст у дочірньому компоненті, нам потрібно отримати до нього доступ за допомогою хука useContext.
По-перше, додайте useContext до інструкції імпорту:
import { useState, createContext, useContext } from "react";
Тоді ви зможете отримати доступ до контексту користувача в усіх компонентах:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Повний приклад
Приклад:
Ось повний приклад використання React Context:
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);
