Hola👋🏻,  Este artículo está creado específicamente para principiantes que desean aprender métodos más efectivos para administrar el estado entre múltiples componentes. También tiene como objetivo abordar el problema común de la perforación de puntales, que puede hacer que su código sea más difícil de mantener y comprender. Comencemos con qué tipo de problema resuelve la API de contexto.  Si prefieres el formato de vídeo, aquí tienes el tutorial que puedes ver en mi canal de YouTube.👇🏻   https://youtu.be/4p_VWn1AEvg?embedable=true  ¿Qué es la perforación de puntal?  ¿Sabes que a veces necesitas pasar datos de un componente principal a un componente secundario y terminas pasando accesorios a través de un montón de componentes intermedios? Eso se llama   y puede resultar complicado rápidamente. Veamos un ejemplo para aclarar esto. perforación de puntal    Como se muestra en el diagrama, imagine que ha obtenido algunos datos en el componente   , que se encuentra en la raíz de su aplicación. Ahora, si un componente profundamente anidado, digamos el componente   , necesita acceder a estos datos, normalmente los transmitirá a través de los componentes   e   como accesorios antes de que llegue   . Esto puede volverse feo a medida que su aplicación crece. App Grandchild Parent Child Grandchild  Aquí hay otra representación visual:    En el ejemplo anterior, el componente   necesita datos del usuario, pero estos datos deben viajar primero a través de los componentes   y   , aunque estos componentes intermedios no usan los datos por sí mismos. Entonces, ¿cómo limpiamos esto? Ahí es donde la API Context resulta útil. Profile App Navigation  Perforación de puntales:  Aumenta la reproducción de componentes.  Aumenta el código repetitivo  Crea dependencia de componentes.  Disminuye el rendimiento  Reaccionar API de contexto  La API de contexto en React.js le permite pasar datos entre componentes sin necesidad de pasarlos como accesorios a través de cada nivel del árbol de componentes. Funciona como un sistema de gestión de estado global en el que usted define su estado en un objeto de contexto y luego puede acceder fácilmente a él en cualquier parte del árbol de componentes. Entendamos esto con un ejemplo.    Como puede ver en el diagrama, tenemos un objeto de contexto que almacena datos a los que pueden acceder varios componentes. Estos datos se obtienen de API o servicios de terceros. Antes de acceder a estos datos de contexto en cualquier componente, debemos empaquetar todos los componentes que requieren estos datos en un componente de proveedor de contexto.  Si solo necesitamos acceder a los datos en los componentes de navegación y perfil, no necesitamos finalizar el componente de la aplicación. Una vez que haya empaquetado los componentes relevantes con   , puede acceder directamente a los datos de contexto en cualquier componente que los consuma. No te preocupes si aún no lo entiendes; Profundicemos en el código y veámoslo en acción. ContextProvider  ¿Cómo utilizar la API de contexto?  Primero, creemos una aplicación React usando   Simplemente copie los siguientes comandos para configurar el proyecto. Vite.js.   npm create vite@latest  Añade el nombre de tu proyecto  Seleccione Reaccionar  Seleccione texto mecanografiado de las opciones   cd project_name // to change to project directory npm install npm run dev  Luego puede abrir su servidor de desarrollo   en su navegador. http://localhost:5173  Primero, creemos las carpetas necesarias. Aquí está la estructura de carpetas de nuestro proyecto.   src | components | context  En la carpeta de componentes, creemos el archivo   y agreguemos el siguiente código. Profile.jsx   import React from 'react' const Profile = () => { return ( <div>Profile</div> ) } export default Profile  Cree un componente más llamado   en la carpeta de componentes. Navbar.jsx   import Profile from './Profile' const Navbar = () => { return ( <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "90%", height: "10vh", backgroundColor: theme === "light" ? "#fff" : "#1b1b1b", color: theme === "light" ? "#1b1b1b" : "#fff", border: "1px solid #fff", borderRadius: "5px", padding: "0 20px", marginTop: "40px", }}> <h1>LOGO</h1> <Profile /> </nav> ) } export default Navbar  Importemos este componente   en el archivo   . <Navbar /> App.jsx   import Navbar from "./components/Navbar"; function App() { return ( <main style={{ display: "flex", flexDirection: "column", justifyContent: "start", alignItems: "center", height: "100vh", width: "100vw", }} > <Navbar /> </main> ); } export default App;  Básicamente, el componente   es hijo de   y   es hijo del componente   . <Profile /> <Navbar /> <Navbar /> <App />  Agregar API de contexto  Creemos el archivo   en la carpeta   . Agregue el siguiente código al archivo. UserContext.jsx context   import { createContext, useEffect, useState } from "react"; export const UserContext = createContext(); export const UserProvider = ({ children }) => { const [user, setUser] = useState(null); const fetchUserData = async (id) => { const response = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ).then((response) => response.json()); console.log(response); setUser(response); }; useEffect(() => { fetchUserData(1); }, []); return ( <UserContext.Provider value={{ user, fetchUserData }} > {children} </UserContext.Provider> ); };  Primero, creamos un objeto   vacío usando   . Nos aseguramos de importarlo desde   . Podemos agregar valores predeterminados dentro del objeto de contexto, pero lo mantenemos nulo por ahora. UserContext createContext react  A continuación, creamos   , que devuelve un proveedor usando   , como   . Envuelve los componentes secundarios y, en el valor, podemos pasar cualquier cosa que queramos usar en los componentes secundarios. UserProvider UserContext UserContext.Provider  En este momento, estamos utilizando   para recuperar los datos del usuario. El   proporciona puntos finales API falsos con fines de prueba. La función   acepta   y la utiliza para recuperar los datos del usuario. Luego almacenamos la respuesta en el estado   . la API jsonplaceholder jsonplaceholder fetchUserData id user  Estamos llamando a la función   en   por lo que al cargar la página, llama a la función e inyecta los datos en el estado   . fetchUserData useEffect user  Ahora, usemos este contexto en el componente   . Envuelva el componente   usando   ; Lo mismo que el siguiente código: <App /> <NavBar /> <UserProvider />   <UserProvider> <Navbar /> </UserProvider>  Usemos el estado   en el componente   . Para eso, usaremos el gancho   . Eso toma   y proporciona los valores que hemos pasado en   , como el estado   y la función   . Recuerde, no necesitamos empaquetar el componente   ya que ya está en el componente   que ya está empaquetado con el proveedor. user <Profile /> useContext UserContext UserProvider user fetchUserData <Profile /> <Navbar />  Abra   y agregue el siguiente código. Profile.jsx  const { user } = useContext(UserContext); if (user) { return ( <span style={{ fontWeight: "bold", }} > {user.name} </span> ); } else { return <span>Login</span>; }  Aquí, estamos usando el estado   del   . Mostraremos el nombre de usuario si hay   ; de lo contrario, mostraremos solo un mensaje de inicio de sesión. Ahora, si ve el resultado, debería haber un nombre de usuario en el componente de la barra de navegación. Así es como podemos usar directamente cualquier estado que esté en el contexto de cualquier componente. El componente que utiliza este estado debe incluirse dentro de   . user UserContext user <Provider />  También puede utilizar múltiples contextos. Solo necesita envolver los componentes del proveedor dentro de otro componente del proveedor como se muestra en el siguiente ejemplo.   <ThemeProvider> <UserProvider> <Navbar /> </UserProvider> </ThemeProvider>  En el ejemplo anterior, utilizamos   que gestiona el estado del tema. <ThemeProvider />  Puede ver el vídeo de YouTube anterior para ver el ejemplo completo del uso de múltiples proveedores de contexto.  Optimización del renderizado en la API de contexto de React  Hay un problema que ocurre cuando usa la API Context en múltiples componentes. Siempre que el estado o el valor cambia en la API de contexto, vuelve a representar todos los componentes suscritos a ese contexto en particular, incluso si no todos los componentes están utilizando el estado modificado. Para comprender este problema de reproducción, creemos un componente   que utilice el contexto para almacenar y mostrar valores de recuento. <Counter />  Mira el siguiente ejemplo. Puede crear un archivo   en la carpeta de componentes y pegar el siguiente código. Counter.jsx   import { createContext, memo, useContext, useState } from "react"; const CountContext = createContext(); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); return ( <CountContext.Provider value={{ count, setCount }}> {children} </CountContext.Provider> ); }; function CountTitle() { console.log("This is Count Title component"); return <h1>Counter Title</h1>; } function CountDisplay() { console.log("This is CountDisplay component"); const { count } = useContext(CountContext); return <div>Count: {count}</div>; } function CounterButton() { console.log("This is CounterButton component"); const { count, setCount } = useContext(CountContext); return ( <> <CountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </> ); } export default function Counter() { return ( <CountProvider> <CounterButton /> </CountProvider> ); }  En el código anterior:  Primero, creamos un objeto   usando  CountContext createContext.  En   tenemos un estado para almacenar valores de recuento. Estamos enviando   y el método   a los componentes secundarios a través de value prop. CountProvider, count setCount  Hemos creado componentes por separado para ver cuántas veces se vuelven a renderizar los componentes individuales.    : este componente muestra solo el título y ni siquiera utiliza ningún valor del contexto. <CountTitle />    : este componente muestra valores de recuento y utiliza el estado   del contexto. <CountDisplay /> count    : este componente representa tanto el componente anterior como un botón que aumenta los valores de recuento usando   . <CounterButton /> setCount  Al final, envolvemos el componente   dentro del componente   para que los otros componentes puedan acceder a los valores de recuento. <CounterButton /> CountProvider  Ahora, si ejecuta el código y hace clic en el botón   , verá en los registros que cada componente se vuelve a representar cada vez que cambia el estado.   ni siquiera utiliza valores de recuento, pero se está volviendo a representar. Esto sucede porque el componente principal de   que es   está usando y actualizando el valor de recuento y es por eso que se vuelve a representar. Increase <CountTitle /> <CountTitle /> <CounterButton />  ¿Cómo podemos optimizar este comportamiento? La respuesta es   . La   de React le permite omitir volver a renderizar un componente cuando sus accesorios no han cambiado. Después del componente   , agreguemos la siguiente línea. memo memo <CountTitle />   const MemoizedCountTitle = React.memo(CountTitle)  Ahora, en el componente   , donde estamos representando el componente   , reemplace   con   como en el siguiente código: <CounterButton /> <CountTitle /> <CountTitle /> <MemoizedCountTitle />   <> <MemoizedCountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </>  Ahora, si aumenta el recuento y verifica los registros, debería poder ver que ya no representa el componente   . <CountTitle />  Redux frente a API de contexto    es una biblioteca de gestión de estados para una gestión de estados compleja con transiciones de estado más predecibles. Mientras que la API Context está diseñada para una gestión de estado sencilla y para pasar datos a través del árbol de componentes sin necesidad de profundizar. Entonces, ¿cuándo elegir cuál? Redux  Utilice   para una gestión de estado localizada y sencilla donde el estado no cambia con frecuencia. la API React Context  Utilice   para necesidades complejas de administración de estado, especialmente en aplicaciones más grandes donde los beneficios de su administración de estado estructurada superan la configuración adicional. Redux  También hay otra biblioteca que también es una opción popular para la gestión estatal. El   . retroceso de reacción    es una biblioteca de gestión de estado para React que tiene como objetivo proporcionar la simplicidad de Context API con la potencia y el rendimiento de Redux. React Recoil  Si está interesado en aprender más sobre   , hágamelo saber en los comentarios y crearé tutoriales detallados sobre este tema en función de sus comentarios. React Recoil  Conclusión  La API de contexto   ofrece una forma poderosa y eficiente de administrar estados en múltiples componentes, abordando de manera efectiva el problema de la perforación de puntales. Al utilizar la API Context, puede simplificar su código, reducir las reproducciones innecesarias y mejorar el rendimiento general de la aplicación. React.js  Si bien la API Context es ideal para una administración de estado simple, las aplicaciones más complejas pueden beneficiarse del uso de   u otras bibliotecas de administración de estado como   . Comprender cuándo y cómo utilizar estas herramientas le permitirá crear aplicaciones React más escalables y fáciles de mantener. Redux React Recoil  Gracias por leer este artículo, espero que te haya resultado útil. Si está interesado en aprender y crear proyectos usando React, Redux y Next.js, puede visitar mi canal de YouTube aquí:  CodeBucks  Aquí están mis otros artículos que quizás le guste leer:   Cómo implementar un desplazamiento suave en Next.js con Lenis y GSAP   Cómo obtener la ubicación del usuario en React.js   Los 10 temas más populares de VS Code que deberías probar  Visita mi blog personal:  DevDreaming

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

2021 - HackerNoon Contributor of the Year - CSS3

Checkout my new website🤩

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

Este audio es producido en el idioma original de la historia!

Cómo simplificar la gestión del estado con la API de contexto React.js: un tutorial

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Telegram: el puente de Crypto Island hacia el continente

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Telegram: el puente de Crypto Island hacia el continente

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps