Introducción
En este artículo, examinará cómo implementar la API de contexto y el React Hook useContext() en su proyecto React. La API de contexto es un marco de React que le permite compartir datos específicos de todas las capas de su aplicación y ayuda a resolver la perforación helicoidal.
Los React Hooks son funciones que sirven como un sustituto modular de los métodos de estado y ciclo de vida escritos en componentes funcionales. El useContext() es una alternativa a la exploración de accesorios a través del árbol de componentes y crea un estado global interno para pasar datos.
API de contexto (contexto)
Para ver la API de contexto, veamos cómo acceder al contexto en una aplicación React. React ofrece el createContext() para ayudar y respaldar el paso de datos.
Abra un archivo de ejemplo como ColorContext.js, establezca un colors y pase una propiedad como argumento al método createContext()
const colors = {
blue: "#03619c",
yellow: "#8c8f03",
red: "#9c0312"
};
export const ColorContext = React.createContext(colors.blue);Esto permitirá que el .createContext() se suscriba a la colors.blue como respaldo de un componente a otro.
Más tarde, puede aplicar el .Provider a su contexto en otro archivo. El .Provider habilita datos en su contexto en toda la aplicación. En su archivo index.js, importe su función ColorContext y agregue el componente .Provider en su declaración de retorno:
import React from 'react';
import { ColorContext } from "./ColorContext";
function App() {
return (
<ColorContext.Provider value={colors}>
<Home />
</ColorContext.Provider>
);
}Esto pertenece al contexto de su ColorContext para colorear su aplicación. Si bien su ColorContext existe en el árbol de componentes, el .Provider facilitará su funcionalidad todo el tiempo. Aquí, el Home absorberá los datos dentro de su función ColorContext Los componentes ColorContext Home también obtendrán datos de ColorContext.
También puede aplicar el .Consumer para suscribirse a los cambios de contexto. Está disponible tanto en la clase como en los componentes funcionales. El .Consumer es accesible solo dentro de una declaración de devolución. En su archivo index.js, configure un componente .Consumer sobre su función ColorContext en la declaración de retorno:
return (
<ColorContext.Consumer>
{colors => <div style={colors.blue}>Hello World</div>}
</ColorContext.Consumer>
);Siempre que cambie el contexto, el .Consumer actualizará y adaptará su aplicación en función del cambio.
Puede darle a su componente un tipo de contexto: MyComponent.contextType = ColorContext; luego, puede acceder al contexto en su componente: let context = this.context; y esto le permite acceder a su contexto fuera de JSX. O en su lugar, puede ingresar static contextType = ColorContext;. Esto funciona lo suficientemente bien para los componentes basados en clases, ya que le facilita la incorporación de contexto al componente. Pero no funcionará en un componente funcional.
También puede declarar un contexto con la .contextType en un componente de clase y asignar su valor a la función ColorContext También puede asignar su propia función ColorContext API Context static contextType. Estos métodos se aplican solo dentro de los componentes de la clase. Repasemos cómo invocar el contexto dentro de un componente funcional.
Manejo del método useContext ()
El useContext() acepta un contexto dentro de un componente funcional y trabaja con un .Provider y en una llamada .Consumer En su archivo index.js, importa el método useContext() y la función ColorContext y declara un componente funcional:
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 establece el MyComponent dentro de su ColorContext como un argumento para el método useContext() Su declaración de devolución aplica el color de fondo en su solicitud. Cuando se activa un cambio, el useContext() se suscribirá a la actualización con el último valor de contexto. En comparación con la API de contexto, el useContext() 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 en React le proporciona funciones y componentes integrados para evitar perforar objetos en el árbol de componentes. React Hook useContext() aplica la misma funcionalidad en un cuerpo de componente simple y funcional en una llamada.
