Gancho de useContext de reacción
Contexto de reacción
React Context es una forma de administrar el estado globalmente.
Se puede usar junto con useStateHook para compartir el estado entre componentes profundamente anidados más fácilmente que useStatesolo.
El problema
El estado debe estar en manos del componente principal más alto en la pila que requiere acceso al estado.
Para ilustrar, tenemos muchos componentes anidados. El componente en la parte superior e inferior de la pila necesita acceso al estado.
Para hacer esto sin contexto, necesitaremos pasar el estado como "accesorios" a través de cada componente anidado. Esto se llama "perforación de apoyo".
Ejemplo:
Pasando "accesorios" a través de componentes anidados:
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"));
Aunque los componentes 2-4 no necesitaban el estado, tenían que pasar el estado para que pudiera llegar al componente 5.
¡Obtener la certificación!
$95 INSCRÍBETE
La solución
La solución es crear contexto.
Crear contexto
Para crear contexto, debe importarlo createContexte inicializarlo:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
A continuación, usaremos el proveedor de contexto para envolver el árbol de componentes que necesitan el contexto de estado.
Proveedor de contexto
Envuelva los componentes secundarios en el proveedor de contexto y proporcione el valor del estado.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Ahora, todos los componentes de este árbol tendrán acceso al contexto del usuario.
Usa el useContextgancho
Para usar el Contexto en un componente secundario, necesitamos acceder a él usando el useContextHook.
Primero, incluya useContexten la declaración de importación:
import { useState, createContext, useContext } from "react";
Luego puede acceder al Contexto del usuario en todos los componentes:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Ejemplo completo
Ejemplo:
Aquí está el ejemplo completo usando 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"));