Contexto en reaccionar

En este artículo, se le presentará React Context, una de las últimas características de React Applications.
Requisitos previos: ReactJS-Basics, Typescript (con interfaces), notación ES6

¿Qué es el contexto de reacción?
React Context es un método para pasar accesorios de componentes primarios a secundarios, almacenando los accesorios en una tienda (similar a Redux) y usando estos accesorios de la tienda por componentes secundarios sin pasarlos manualmente en cada nivel del árbol de componentes.

¿Por qué reaccionar contexto? Tenemos Redux!!
El uso de Redux para interactuar con los estados de los componentes principal a secundario no solo es bastante difícil de entender, sino que también le brinda un código más complejo. Mediante el uso de Contexto, la comprensión del concepto y el código es mucho más fácil que la de Redux.

¿Cuándo usar React Context?
¡En cualquier momento que desee! No existe una regla infalible como cuándo usar Context en su aplicación. Siempre que desee una tienda para mantener sus estados o variables y usarlos en otra parte de su programa, use Context. Generalmente, cuando tenemos dos o más niveles (altura) en nuestro árbol de componentes, es viable usar una tienda en lugar de pasar accesorios y luego levantar el estado, ya que esto creará confusión y un código extenso innecesario. 
Ejemplo: 
si tenemos tres componentes en nuestra aplicación, A->B->C donde A es el padre de B y B es el padre de C. Para cambiar un estado de C y pasarlo a A, mantenga el estado de A en una tienda, luego extraiga el estado de la tienda y utilícelo en C. Esto elimina por completo la necesidad de que el estado pase por B. Entonces, el flujo es como A->C.

Uso
Ahora entendamos con un ejemplo simple. 
primero, definamos una interfaz (o clase) que consista en el nombre y las calificaciones de un estudiante:  

interfaz MarksContext{ 
nombre: string; 
marcas: número; 
} 
 

Ahora defina esta interfaz en un contexto.  

const marcas de contexto = React.createContext(null); 
// Contexto definido con propiedades de la interfaz MarksContext inicializada con nulo 
 

Crear proveedor y consumidor 

const MarksContextProvider = contextmarks.Provider; 
// Esta es la tienda en la que se mantendrán los estados y se pasarán como accesorios.
const MarksContextConsumer = contextmarks.Consumidor; 
// Esta es la tienda desde la cual los estados almacenados en el Proveedor 
// Contexto serán extraídos por el componente secundario y utilizados de acuerdo con el usuario. 
 

Ahora, permita que nuestra estructura de árbol de componentes sea como A->B->C (desde arriba). Almacenaremos algún valor de nombre y marcas en un diccionario, pasaremos la información de A para mostrarla en C sin interferir con B. A es la aplicación raíz.

Código completo: 

Nota: mantenga los dos archivos en el mismo directorio.
1. MarksContext.tsx (TypeScript)  

import * as React from "react";
 
export interface MarksContext{
  name: string;
  marks: number;
}
const contextmarks = React.createContext<MarksContext | null>(null);
export const MarksContextProvider = contextmarks.Provider;
export const MarksContextConsumer = contextmarks.Consumer;

2. App.tsx (TypeScript) 

import * as React from "react";
import { render } from "react-dom";
import { MarksContext, MarksContextProvider } from "./MarksContext";
import {  MarksContextConsumer } from "./MarksContext";
 
const sample: MarksContext = {
  name: "X",
  marks: 20
  
};
 
export const A = () => (
  <MarksContextProvider value={sample}>
    <B />
  </MarksContextProvider>
);
 
const B = () => (
  <div>
    <h2>Student Info</h2>
    <C />
  </div>
);
 
 
const C = () => (
  <MarksContextConsumer>
    {appContext =>
      appContext && (
        <div>
          Name: {appContext.name} <br />
          Marks: {appContext.marks} <br />
        </div>
      )
    }
  </MarksContextConsumer>
);
 
render(<A />, document.getElementById("root"));

Producción: 

Trabajo: 
la información se declara primero en una interfaz MarksContext , luego la información de la interfaz se define en contextmarks . Provider( MarksContextProvider ) y consumidor( MarksContextConsumer ) se definen en este contexto. 
MarksContextProvider se coloca en A , la raíz de nuestra aplicación con el valor inicializado como se indica en el ejemplo . Más tarde , MarksContextConsumer se coloca en C, desde donde se extrae el valor de la interfaz a través de appContext, que sirve como una instancia de la interfaz MarksContext . Por último, el valor se muestra en C.

Nota: Solo los componentes mencionados dentro del Proveedor ( MarksContextProvider ) y sus hijos pueden modificar los estados usando Consumer ( MarksContextConsumer ).