Что такое useContext Hook?
React Context — это способ управлять состоянием в глобальном масштабе🌎.
Его можно использовать вместе с перехватчиком useState, чтобы обмен состояниями между глубоко вложенными компонентами был более простым, чем при использовании только useState.
Зачем нам нужен useContext Hook📎?
Чтобы разделить состояние между более чем одним компонентом, нам нужно передать его через реквизиты. Состояние должно удерживаться самым высоким родительским компонентом в стеке, который требуется доступ к состоянию.
Для этого без контекста нам нужно будет передавать свойства состояния через каждый вложенный компонент. Это называется «бурение с пропеллером»✒.
Решение🧪:
Решение состоит в том, чтобы создать контекст.
Чтобы создать контекст, вы должны импортировать createContext и инициализировать его.
import {createContext} from 'react'
const UserContext = createContext()
Далее мы будем использовать UserContext.Provider, чтобы обернуть дерево компонентов, которым требуется состояние🗽.
function Component1() { const [user, setUser] = useState("Jhon doe");
return ( <UserContext.Provider value={user}> <h1>{`Hello ${user}!`}</h1> <Component2 user={user} /> </UserContext.Provider> ); }
Теперь все компоненты дерева🌳 будут иметь доступ к пользовательскому контексту.
Чтобы использовать хук use Context в дочернем компоненте, нам нужно получить к нему доступ через хук useContext.
Сначала включите useContext в импорт, а затем вызовите его.
import {useContext,createContext} from 'react' function Component5() { const user = useContext(UserContext); return ( <> <h1>Component 5</h1> <h2>{`Hello ${user} again!`}</h2> </> ); }
В следующей статье я напишу про useRef Hook🤔 ?
На сегодня все, следите за обновлениями, увидимся в следующем👋🏻.
Спасибо за подписку и аплодисменты😋
Ссылка на День 13