Dominar la API de contexto de React: una guía completa

React JS es un marco de desarrollo web frontend ampliamente utilizado escrito en Javascript. Fue desarrollado en Facebook y lanzado en 2013 para todos los desarrolladores como un marco de código abierto para crear interfaces de usuario web dinámicas y reactivas.

Una interfaz de usuario web reactiva es una vista de aplicación web que se actualiza automáticamente en respuesta a cualquier cambio de datos o entrada del usuario, sin necesidad de actualizar la página.

ReactJS utiliza un DOM virtual para actualizar eficientemente la interfaz de usuario cuando cambian los datos, lo que resulta en una experiencia de usuario rápida y receptiva.

El siguiente ejemplo es una pequeña aplicación reactiva que actualiza la etiqueta de recuento cada vez que se hace clic en el botón de incremento, sin actualizar la página.

 importar React, {useState} de 'react';

 función Contador {
 const (recuento, setCount) = useState(0);

 incremento de función {
 setCount(cuenta + 1);
 }

 devolver (
 <div>
 < p >Recuento: {recuento}</ p > 
< botón onClick={incremento}>Incrementar</ botón >
 </div>
 );
 }

Puedes probar el ejemplo anterior en

Componentes ReactJS y DOM virtual

¿Qué son los componentes de React?

Un componente ReactJS es una pieza de código Javascript que se puede utilizar como un bloque de construcción independiente para crear aplicaciones web front-end.

En ReactJS, usted crea componentes web reutilizables que se pueden representar innumerables veces en una página web y luego volver a representar reactivamente ante cualquier actualización de datos o entrada del usuario.

ReactJS actualiza estos componentes sin necesidad de actualizar la página completa, aprovechando su concepto DOM virtual.

¿Qué es un regalo virtual?

DOM virtual es un concepto en el que una representación "virtual" de la interfaz de usuario (documento HTML) se almacena en la memoria y se mantiene sincronizada con la representación "real". DOM usando una biblioteca como ReactDOM.

Un ejemplo de un componente Reactjs usando accesorios

En el siguiente ejemplo, hay un componente ReactJS simple que representa un botón: –

 importar Reaccionar desde "reaccionar";

 Botón de función predeterminada de exportación (accesorios) {
 return < botón onClick={props.onClick}>{props.label}</ botón >;
 }

El componente ReactJS anterior es una función JS que toma un único argumento llamado props y devuelve una etiqueta HTML con la propiedad onClick y algo de texto.

La etiqueta del botón se muestra como el texto del botón y, cuando se hace clic en el botón, se llama a la función onClick.

Para usar este componente en su aplicación ReactJS, simplemente puede importarlo y renderizarlo así: –

 importar Reaccionar desde 'reaccionar';

 Importar botón desde './Button'; exportar función predeterminada de la aplicación {

 función handleClick {

 console.log('¡Se hizo clic en el botón!');

 }

 devolver (
 <div>
 < Button onClick={handleClick} label="¡Haz clic en mí!" /> <br /> < Button onClick={handleClick} label="¡Haz clic en mí OTRA VEZ!" />
 </div>
 );
 }

Estoy renderizando el mismo componente dos veces, pero con diferentes accesorios (etiqueta).

Puedes probar el ejemplo anterior en

En la captura de pantalla anterior también puedes ver el DOM virtual en la esquina inferior derecha (resaltado en SkyBlue).

¿Cómo pasar datos de un componente de Reactjs a otro?

En los ejemplos anteriores, creamos nuestras aplicaciones ReactJS con un solo componente, ya sea la aplicación de contador o la aplicación Click Me.

Sin embargo, en una aplicación web ReactJS del mundo real, a menudo tenemos múltiples componentes que interactúan entre sí a través de una metodología de paso de datos llamada "perforación de soporte".

¿Qué son los accesorios?

Así como podemos pasar datos a una función JS usando una característica llamada 'argumentos', de manera similar podemos pasar datos a un componente ReactJS usando una característica llamada props que es una abreviatura de propiedades para realizar algunas operaciones en ellos y luego devolvernos un reactivo. Interfaz de usuario.

Vea el ejemplo anterior de la aplicación Click Me, donde pasamos el texto de la etiqueta y los datos del evento onClick como accesorios para nuestro componente.

importar Reaccionar desde 'reaccionar';

 aplicación de función {

En el ejemplo anterior, tenemos una aplicación ReactJS donde los datos const isLoggedIn se pasan a los componentes Encabezado y Principal, y también a los componentes Perfil y Configuración de tercer nivel a través de un componente Principal intermedio utilizando accesorios y metodología de perforación de accesorios.

¿Qué es un árbol de componentes?

Un árbol de componentes en una aplicación ReactJS es una representación de componentes organizados en una jerarquía.

Esta estructura jerárquica se construye anidando componentes entre sí, siendo el componente de nivel superior el componente raíz y el componente secundario ubicado debajo de él.

La imagen de arriba representa un árbol de componentes del ejemplo de perforación vertical mencionado en la sección anterior.

Desventajas de pasar datos mediante la exploración de soporte en un árbol de componentes

Hay ocasiones en las que es mejor evitar la perforación con hélice ya que tiene sus desventajas:

Flujo de paso de datos: cuando utilice accesorios, debe pasar accesorios en cada nivel de un árbol de componentes.

Complejidad : la complejidad de la exploración puede aumentar a medida que su aplicación web ReactJS crece y se vuelve más difícil de mantener y depurar.

Código repetitivo : la perforación de accesorios requiere que escriba más código durante el desarrollo de la aplicación React para pasar los mismos datos a través de múltiples niveles de componentes, lo que genera un aumento en el código repetitivo y una base de código menos eficiente para su aplicación ReactJS.

Acoplamiento : puede crear un acoplamiento estrecho entre componentes, lo que significa que los cambios en un componente pueden afectar a otros componentes, haciendo que el código base de su aplicación sea más frágil.

Problemas de rendimiento : pasar datos grandes o complejos a través de múltiples niveles de componentes utilizando accesorios puede afectar negativamente el rendimiento de su aplicación ReactJS.

Reaccionar API de contexto

Para desarrollar aplicaciones web ReactJS de manera más eficiente, ayudando a los desarrolladores a resolver los inconvenientes anteriores, el equipo central de ReactJS introdujo en la versión 16.3 una API llamada Context API, con la que se pueden pasar datos en un árbol de componentes sin accesorios.

Con esta API en ReactJS, puedes compartir datos entre componentes, en un árbol de componentes, que no están directamente relacionados entre sí, eliminando la necesidad de pasar accesorios manualmente en cada nivel.

¿Cuáles son los beneficios de utilizar la API Context sobre Prop Drilling?

El uso de React Context API en lugar de la exploración de soporte nos brinda beneficios que son: –

Ejemplo

Por ejemplo, en nuestro árbol de componentes, que se muestra en la sección anterior, utilizando la API de contexto de ReactJS podemos pasar datos directamente desde el componente de la aplicación a los componentes de perfil y configuración sin pasar datos a través del componente principal.

Veamos el mismo ejemplo de perforación de soporte reescrito usando la API de contexto ReactJS: –

importar React, {createContext, useState} desde 'react';

 const AppContext = crearContexto;

 aplicación de función {
 const (isLoggedIn, setIsLoggedIn) = useState(false);

 devolver (
 < Valor de AppContext.Provider = {{ isLoggedIn, setIsLoggedIn }} >
 <div>
 < encabezado />
 < Principal />
 < Pie de página />
 </div>
 </ AppContext.Provider >
 );
 }

 encabezado de función {
 const {isLoggedIn} = useContext(AppContext);

 devolver (
 <encabezado>
 < nav >
 {¿está registrado? < Botón de cierre de sesión /> : < Botón de inicio de sesión />}
 </nav>
 </encabezado>
 );
 }

 función principal {
 devolver (
 < principal >
 < Perfil />
 < Configuración />
 </principal>
 );
 }

 perfil de función {
 const {isLoggedIn} = useContext(AppContext);

 devolver (
 <div>
 < h2 >Perfil</ h2 >
 {¿está registrado? < p >¡Bienvenido de nuevo!</ p > : < p >Por favor, inicia sesión.</ p >}
 </div>
 );
 }
 
Configuración de función {
 const { isLoggedIn, setIsLoggedIn } = useContext(AppContext);

 devolver (
 <div>
 < h2 >Configuración</ h2 >
 {¿está registrado? (
 < botón onClick={ => setIsLoggedIn(false)}>Cerrar sesión</ botón >
 ): (
 < p >Inicie sesión para cambiar su configuración.</ p >
 )}
 </div>
 );
 }

 función Pie de página {
 devolver < pie de página >&copy; 2023 Mi aplicación </footer> ;
 }

En el código anterior, primero creé un contexto llamado AppContext usando un método createContext proporcionado por la API React Context.

Luego proporcioné este contexto devolviendo el componente AppContext.Provider con la propiedad 'valor', desde mi componente de aplicación principal, a los componentes secundarios con los que quiero compartir mis datos.

Y finalmente, consumí datos, usando el enlace useContext(AppContext), en mis componentes secundarios Encabezado, Perfil y Configuración.

Como puede ver, hemos eliminado por completo la necesidad de pasar datos al componente principal intermedio, lo que hace que nuestro código ReactJS sea más fácil de mantener.

¿Cómo utilizar la API React Context en su aplicación React?

Hay 5 pasos necesarios para utilizar la API React Context al desarrollar su aplicación Reactjs: –

1. Cree su objeto de contexto usando el método createContext

Necesita crear un contexto, utilizando el método createContext, que actuará como un almacén de datos. Nota: - Puede crear cualquier cantidad de contextos en su aplicación React.

const AppContext = crearContexto;

2. Componentes de proveedores y consumidores

El objeto AppContext que creamos usando el método createContext anterior básicamente devuelve dos componentes; el Proveedor pasa los datos a través del árbol de componentes utilizando la propiedad 'valor' y el Consumidor lee estos datos pasados.

3. Envuelva su árbol de componentes en el componente Proveedor

Envuelva su árbol de componentes con el componente Proveedor. Esto debe hacerse en el nivel más alto del árbol de componentes que necesita acceso a los datos de contexto.

 devolver (

 < Valor de AppContext.Provider = {{ isLoggedIn, setIsLoggedIn }} >

 <div>

 < encabezado />

 < Principal />

 < Pie de página />

 </div>

 </ AppContext.Provider >

 );

4. Pase datos de contexto a su componente Provider React

Puede agregar cualquier valor que desee al componente Proveedor utilizando la propuesta de valor. Este valor puede ser una cadena, un objeto o una función y estará disponible para todos los componentes consumidores.

 < Valor de AppContext.Provider = {{ isLoggedIn, setIsLoggedIn }} >

5. Leer datos de contexto utilizando el componente Consumidor.

Lea el valor de contexto en cualquier componente que lo necesite utilizando el componente Consumidor. El componente Consumidor toma una función como hija y pasa el valor del contexto actual como argumento a esa función. Sin embargo, en nuestro ejemplo anterior, utilizamos el gancho useContext para obtener datos.

const {isLoggedIn} = useContext(AppContext);

¿Cuál es el valor del contexto?

Como se mencionó anteriormente en el paso 4, el componente Proveedor en la API React Context acepta un argumento, la propiedad 'valor', que es básicamente un almacén de datos global, también llamado valor de contexto.

Este valor de contexto luego se comparte entre todos los componentes consumidores, que descienden del componente Provider React, y pueden acceder a él usando el componente Component o usando el gancho useContext.

 < Valor de AppContext.Provider = {{ isLoggedIn, setIsLoggedIn }} >

 <div>

 < encabezado />

 < Principal />

 < Pie de página />
 
</div>

 </ AppContext.Provider >

Es importante utilizar el valor de contexto con prudencia, ya que puede generar código complejo y difícil de depurar. Por lo tanto, no debes utilizar un valor de contexto como almacenamiento global para toda tu aplicación React.

Restaurado como se explica en la sección siguiente, sería la mejor solución para administrar un almacén de datos global con estado para toda su aplicación React.

¿Cuál es la diferencia entre el componente Consumer y el gancho Usecontext?

Tanto el componente Consumer como el gancho useContext son formas de consumir datos de un contexto React que crea en su aplicación ReactJS usando la API Context, sin embargo, difieren en sintaxis y uso.

El componente Consumer lo proporciona el método createContext, por lo que es una forma tradicional de consumir datos, mientras que useContext es una forma más nueva y sencilla de consumir datos del contexto.

A continuación se muestra una tabla comparativa que explica ambos: –

¿Cuáles son los casos de uso de la API de contexto Reactjs?

Esta API puede resultar útil en varios escenarios para desarrollar su aplicación web React. Sin embargo, los casos de uso comunes son: –

Tema

Uno de los casos de uso más comunes de la API React Context es administrar diferentes temas para su aplicación web.

Por ejemplo , proporcionar y consumir datos de color del tema, como claro y oscuro. Los usuarios de su aplicación web pueden cambiar entre temas claros y oscuros sin recargar la página.

Autenticación

Muchos desarrolladores web de ReactJS utilizan Context API para gestionar la autenticación.

Al almacenar datos de autenticación en un contexto, puede acceder fácilmente a ellos desde cualquier componente de su aplicación web React.

Por ejemplo :-

 importar React, {createContext, useContext, useState} de "react";

 const AuthContext = crearContexto;

 exportar función predeterminada App {
 const (isLoggedIn, setIsLoggedIn) = useState(false);

 inicio de sesión constante = => {
 setIsLoggedIn(verdadero);
 };

 cierre de sesión constante = => {
 setIsLoggedIn (falso);
 };

 devolver (
 < AuthContext.Valor del proveedor = {{ isLoggedIn, login, logout }} >
 {¿está registrado? < LogoutComponent /> : < LoginComponent />}
 </ AuthContext.Provider >
 );
 }

 función Componente de inicio de sesión {
 const {iniciar sesión} = useContext(AuthContext);

 devolver (
 <div>
 < h1 >Página de inicio de sesión</ h1 >
 < botón onClick={login}>Iniciar sesión</ botón >
 </div>
 );
 }

 función Cerrar sesiónComponente { 
const { cerrar sesión } = useContext(AuthContext);

 devolver (
 <div>
 < h1 >Cerrar sesión</ h1 >
 < botón onClick={logout}>Cerrar sesión</ botón >
 </div>
 );
 }

Ubicación

Puede utilizar la API React Context para gestionar la localización en su aplicación web. Al almacenar datos de idioma en contexto, puede cambiar fácilmente entre diferentes idiomas y actualizar el texto en su aplicación sin tener que volver a cargar la página.

Gestionar el Estado

Puede utilizar la API React Context para administrar el estado creando un contexto y proporcionándole componentes secundarios en su aplicación web.

Por ejemplo, conviertamos nuestro ejemplo de 'contador' creado al principio de este artículo, usando la API:-

 importar React, {createContext, useContext, useState} de "react";

 const CountContext = crearContexto;

 función Contador {
 const (recuento, setCount) = useState(0);

 devolver ( 
<CountContext.Valor del proveedor= {{ count, setCount }} >
 <Visualización de recuento/>
 <BotónContar/>
 </CountContext.Provider>
 );
 }

 función CountDisplay {
 const {cuenta} = useContext(CountContext);

 return <p>Contar: {contar}</p>;
 }

 función BotónContar {
 const {setCount} = useContext(CountContext);

 incremento de función {
 setCount((prevCount) => prevCount + 1);
 }

 return <botón onClick={incremento}>Incremento</botón>;
 }

Una alternativa popular a la API Context para administrar el estado de los datos en su aplicación React es Redux.

Redux es una biblioteca que ofrece una forma más sólida y compleja de gestionar el estado de su aplicación.

Si bien Context API es una solución más simple y liviana, Redux puede ofrecer funciones más avanzadas, como depuración de viajes en el tiempo y middleware.

API de contexto frente a Redux para la gestión del estado

¿Cuáles son las desventajas de utilizar la API React Context?

Aunque utilizar la API React Context nos brinda muchas ventajas a la hora de compartir datos y gestionar el estado de los componentes, todavía tiene algunas desventajas.

La siguiente tabla enumera las desventajas más comunes de la API React Context, además de sugerir una solución para cada una: –

Conclusión

En este artículo, expliqué cómo pasar datos a un árbol de componentes en una aplicación web ReactJS usando un método llamado 'perforación de accesorios' que tiene algunas desventajas como código repetitivo, acoplamiento de código, problemas de rendimiento, etc.

Estas desventajas se pueden superar utilizando la API React Context, que utiliza el marco Proveedor-Consumidor para pasar datos a un árbol de componentes junto con la gestión del estado.

Además, mencioné algunos casos de uso comunes en los que usar la API React Context resulta más beneficioso que usar accesorios.

Sin embargo, el uso de Context API también tiene algunas desventajas, como la repetición de renderizado, etc., que se pueden superar utilizando las soluciones analizadas en este artículo.

Si te gustó esto, asegúrate de consultar nuestros otros artículos sobre React.

• Las 13 principales bibliotecas de gráficos y gráficos de React
• Los 6 mejores IDE y editores de React
• Mejores prácticas de React para mejores aplicaciones ReactJS
• React Force Rendering: tutorial completo
• Ciclo de vida de React: métodos y ganchos en detalle