Reagir useContext Hook
Reagir Contexto
React Context é uma maneira de gerenciar o estado globalmente.
Ele pode ser usado junto com o useStateHook para compartilhar o estado entre componentes profundamente aninhados mais facilmente do que useStatesozinho.
O problema
O estado deve ser mantido pelo componente pai mais alto na pilha que requer acesso ao estado.
Para ilustrar, temos muitos componentes aninhados. O componente na parte superior e inferior da pilha precisa de acesso ao estado.
Para fazer isso sem Contexto, precisaremos passar o estado como "props" por meio de cada componente aninhado. Isso é chamado de "perfuração de hélice".
Exemplo:
Passando "props" através de componentes aninhados:
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"));
Mesmo que os componentes 2-4 não precisassem do estado, eles tinham que passar o estado adiante para que pudesse alcançar o componente 5.
Obter certificação!
$ 95 INSCRIÇÃO
A solução
A solução é criar contexto.
Criar contexto
Para criar contexto, você deve importar createContexte inicializá-lo:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Em seguida, usaremos o Context Provider para agrupar a árvore de componentes que precisam do estado Context.
Provedor de contexto
Envolva os componentes filho no Provedor de Contexto e forneça o valor do estado.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Agora, todos os componentes desta árvore terão acesso ao usuário Context.
Use o useContextgancho
Para usar o Context em um componente filho, precisamos acessá-lo usando o useContextHook.
Primeiro, inclua o useContextna instrução de importação:
import { useState, createContext, useContext } from "react";
Então você pode acessar o Contexto do usuário em todos os componentes:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Exemplo completo
Exemplo:
Aqui está o exemplo completo usando o 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"));