Реагировать на использование контекстного хука
Реагировать на контекст
React Context — это способ глобального управления состоянием.
Его можно использовать вместе с useStateхуком, чтобы легче обмениваться состоянием между глубоко вложенными компонентами, чем useStateотдельно.
Проблема
Состояние должно храниться самым высоким родительским компонентом в стеке, которому требуется доступ к состоянию.
Чтобы проиллюстрировать, у нас есть много вложенных компонентов. Компоненту вверху и внизу стека нужен доступ к состоянию.
Чтобы сделать это без контекста, нам нужно будет передать состояние как «реквизит» через каждый вложенный компонент. Это называется «пропорочное бурение».
Пример:
Передача «реквизита» через вложенные компоненты:
import { useState } from "react";
import ReactDOM from "react-dom";
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>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));
Несмотря на то, что компонентам 2-4 не нужно было состояние, они должны были передать состояние, чтобы оно могло достичь компонента 5.
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Решение
Решение состоит в том, чтобы создать контекст.
Создать контекст
Чтобы создать контекст, вы должны импортировать createContextи инициализировать его:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Далее мы будем использовать Context Provider, чтобы обернуть дерево компонентов, которым нужен контекст состояния.
Поставщик контекста
Оберните дочерние компоненты в Context Provider и укажите значение состояния.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Теперь все компоненты в этом дереве будут иметь доступ к контексту пользователя.
Используйте useContextкрюк
Чтобы использовать Context в дочернем компоненте, нам нужно получить к нему доступ с помощью useContextHook.
Во-первых, включите 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";
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>
);
}
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>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));