Cómo trabajar con la API de contexto en React y React Hooks

Introducción

En este artículo, examinará cómo implementar la API de contexto y el React Hook useContext()en su proyecto de React. La API de contexto es una estructura de React que le permite compartir datos específicos de todos los niveles de su aplicación y ayuda a resolver problemas de perforación de apoyo.

Los Hooks de React son funciones que sirven como reemplazo modular de los métodos de estado y ciclo de vida escritos en componentes funcionales. El useContext()método es una alternativa a la exploración de propiedades a través del árbol de componentes y crea un estado global interno para pasar datos.

Prerrequisitos

• Se requiere conocimiento de React. Para obtener más información sobre React, consulta la serie Cómo codificar en React.
• Se recomienda tener conocimientos generales sobre React Hooks, pero no es obligatorio. Para obtener más información sobre React Hooks, consulta el tutorial Cómo aplicar React Hooks en tu proyecto React.

Examinando la API de contexto

Para examinar la API de contexto, veamos cómo acceder al contexto en una aplicación React. React ofrece el createContext()método para ayudar a pasar datos como una propiedad.

En su ColorContext.jsarchivo, establezca un colorsobjeto y pase una propiedad como argumento al createContext()método:

ColorContext.js

const colors = {  blue: "#03619c",  yellow: "#8c8f03",  red: "#9c0312"};export const ColorContext = React.createContext(colors.blue);

Esto permitirá .createContext()que el método suscriba la propiedad colors.bluecomo un apoyo de un componente a otro.

A continuación, puede aplicar el .Providercomponente a su contexto en otro archivo. El .Providercomponente habilita los datos en su contexto en toda la aplicación. En su index.jsarchivo, importe su ColorContextfunción y añádala al .Providercomponente en su declaración de retorno:

[label index.js] import React from 'react';import { ColorContext } from "./ColorContext";function App() {  return (    ColorContext.Provider value={colors}      Home /    /ColorContext.Provider  );}

Esto envuelve el contexto de su ColorContextfunción para darle color a su aplicación. Mientras su ColorContextfunción exista en el árbol de componentes, el .Providercomponente facilitará su funcionalidad en todo momento. Aquí, el Homecomponente absorberá los datos dentro de su ColorContextfunción. Los componentes secundarios de Hometambién obtendrán los datos de ColorContext.

También puede aplicar el .Consumercomponente para suscribirse a los cambios de un contexto. Esto está disponible tanto en componentes de clase como funcionales. El .Consumercomponente solo es accesible dentro de una declaración de retorno. En su index.jsarchivo, establezca un .Consumercomponente para su ColorContextfunción en su declaración de retorno:

[index.js]return (  ColorContext.Consumer    {colors = div style={colors.blue}Hello World/div}  /ColorContext.Consumer);

Cada vez que cambie el contexto, el .Consumercomponente actualizará y ajustará su aplicación en función de la modificación.

Puedes darle a tu componente un tipo de contexto: MyComponent.contextType = ColorContext;luego, puedes acceder al contexto en tu componente: let context = this.context;y eso te permite acceder a tu contexto fuera de JSX. O en su lugar, puedes poner en static contextType = ColorContext;. Esto funciona bastante bien para componentes basados ​​en clases, ya que simplifica cómo traer tu contexto a tu componente. Pero no funcionará en un componente funcional.

También puede declarar un contexto con la .contextTypepropiedad en un componente de clase y asignar su valor a la ColorContextfunción. También puede asignar su ColorContextfunción a la static contextTypeAPI de contexto. Estos métodos se aplican solo dentro de los componentes de clase. Repasemos cómo invocar el contexto dentro de un componente funcional.

Manejo del useContext()método

El useContext()método acepta un contexto dentro de un componente funcional y funciona con un componente .Providery .Consumeren una sola llamada. En su index.jsarchivo, importe el useContext()método y la ColorContextfunción, y declare un componente funcional:

índice.js

import React, { useContext } from "react";import ColorContext from './ColorContext';const MyComponent = () = {  const colors = useContext(ColorContext);  return div style={{ backgroundColor: colors.blue }}Hello World/div;};

El componente funcional MyComponentestablece el valor dentro de su ColorContextcomo argumento del useContext()método. Su declaración de retorno aplica el color de fondo en su aplicación. Cuando se activa un cambio, el useContext()método se suscribirá a la actualización con el último valor de contexto. En comparación con la API de contexto, el useContext()método le permite compartir y pasar datos a través de su aplicación en menos líneas de código.

Conclusión

La API de contexto de React te proporciona funciones y componentes integrados para evitar la perforación de propiedades en tu árbol de componentes. El Hook de React useContext()aplica la misma funcionalidad en un cuerpo de componente funcional y optimizado en una sola llamada.

Consulta la página de temas de React para obtener proyectos y recursos adicionales.