Conozca la nueva API de contexto de React

Introducción

En un mundo en el que hay muchos frameworks front-end diferentes, siempre es difícil saber cuál elegir. ¿Quiero usar el popular Angular? ¿O profundizar en VueJS sería beneficioso para mi ámbito de conocimiento?

Luego tenemos ReactJS, un framework creado por Facebook que parece estar conquistando el mundo de los frameworks front-end. Al utilizar componentes, un DOM virtual y JSX (¡eso es para otro día!), React parece abarcarlo todo, lo que lo convierte en un framework poderoso.

La nueva API de contexto se introdujo recientemente en React 16.3 como:

Una forma de pasar datos a través del árbol de componentes sin tener que pasar propiedades manualmente en cada nivel

¡Suena genial! Vamos a profundizar en ello.

Props y Estado

En React, tienes propsy state. Dos cosas muy importantes que debes entender.

Props , abreviatura de propiedades, son los datos que se pasan al componente desde un componente principal.

El estado son datos que se administran dentro del componente. Entonces, si cada componente tiene su propio estado, ¿cómo compartimos esa información con otro componente? Podrías usar propiedades, pero estas solo se pueden pasar entre componentes principales y secundarios.

Entonces, ¿qué debemos hacer si tenemos muchas capas de componentes para pasar solo un bit de información? También conocido como perforación de apoyo.

Perforación de apoyos (qué resuelve la API de contexto)

Veamos un ejemplo de perforación de propiedades para comprender qué resuelve la API de contexto. En este ejemplo, veremos cómo podemos pasar información de un componente al componente secundario y, luego, al componente secundario de ese componente.

const Lowest = (props) = (  div className="lowest"{props.name}/div)const Middle = (props) = (  div className="middle"    Lowest name={props.name} /  /div) class Highest extends Component {  state = {    name: "Context API"  }    render() {    return  div className="highest"      {this.state.name}      Middle name={this.state.name} /    /div  }}

Sé que el nombre no es el más realista, pero ayuda a demostrar la capacidad del contexto para transmitirse a los componentes anidados. Un escenario más realista es el que puede ocurrir dentro de una interfaz de usuario basada en tarjetas: CardGrid– CardContent– CardFooter– LikeButton.

Volviendo a nuestro ejemplo, así es como se anidarían esos componentes Highest– Middle– :Lowest

HighestMiddle  Lowest    {/* we want our content here but dont want to prop pass ALLLL the way down ! */}      /Lowest    /Middle  /Highest

¿Observa cómo para que el Más Alto y el Más Bajo puedan hablar, necesitan que el Medio sea el mensajero?

Pues bien, he aquí que tenemos React Context que puede encargarse de todo el trabajo por nosotros.

API de contexto de React

React Context nos permite tener un estado que puede verse globalmente en toda la aplicación .

Tenemos que empezar con el proveedor de contexto ( Provider /) para definir los datos que queremos enviar y necesitamos el consumidor de contexto ( Consumer /) que toma esos datos y los usa donde se le llama.

Con Context, ahora tienes la capacidad de declarar el estado una vez y luego usar esos datos, a través del consumidor de contexto, en cada parte de la aplicación.

Suena increíble, ¿verdad? Veamos cómo podemos configurarlo en una aplicación React sencilla.

¡Construyamos!

Creación de una transferencia de nombre con la API de contexto

Hoy vamos a configurar una aplicación básica de React. ¡Hagamos una aplicación que pase un nombre de un componente a otro componente que no sea el componente secundario! ¡Genial! Tendremos tres niveles diferentes, uno será el componente más alto que tiene el nombre almacenado en el estado, tendremos el componente del medio y luego tendremos el componente más bajo.

Nuestra aplicación enviará el nombre en el estado desde el más alto hasta el más bajo sin tener que hablar con el del medio. ¡ Abre el editor de código que quieras usar y comencemos a codificar!

Primero, necesitaremos la reactdependencia para nuestra aplicación. Añádela a tus dependencias o, si estás trabajando en un editor de texto, sigue estos pasos para instalarla:

1. Instale npm globalmente en su máquina si aún no lo tiene.
2. npm install —save react
3. Verifique su paquete.json para ver la reactdependencia.

En nuestro .jsarchivo principal, aquí es donde ocurre la magia. Siempre que creamos una aplicación React, debes importar tus dependencias; de lo contrario, ese archivo no sabrá que debe usarlas. Entonces, en la parte superior del index.jsarchivo, importemos lo que necesitamos:

import React, { Component } from 'react';

Ya tenemos nuestra importación, ahora pasemos al componente. Queremos declarar nuestro contexto en una variable para facilitar su lectura. En nuestra importación, hagamos lo siguiente:

const AppContext = React.createContext()

Nuestras capas de componentes

Nuestro Highestcomponente tendrá el estado. Nuestro estado tendrá un nombre que querremos pasar al Lowestcomponente sin tener que hablar con el Middlecomponente:

class Highest extends Component {state = {name : “React Context API”,}render() {return ( AppContext.Provider value={this.state}  {this.props.children}/AppContext.Provider)}}

Construiremos nuestro componente hijo llamándolo Middlecomponente:

const Middle = () = (  div    pI’m the middle component/p    Lowest /  /div)

Y el componente hijo se llamará Lowest:

const Lowest = () = (  div     AppContext.Consumer        {(context) = context.name}      /AppContext.Consumer  /div)

Repasemos esto. Verás que tenemos un estado en Highestel que queremos pasar a Lowest. Tenemos nuestra propiedad estática que nos permitirá declarar lo que queremos que sea nuestro contexto. En nuestro caso, el nombre “React Context API”.

El componente Providerse aferra a esos datos para que, cuando los reciba consumedotro componente, sepa qué darles. En nuestro Lowestcomponente, verá que queremos Consumeresos datos sin tener que pasárselos primero al Middlecomponente. Ese componente simplemente se queda esperando y declara que Lowestes su componente secundario.

Cuándo no utilizar el contexto

Para una solución de perforación de apoyo simple que pueda escalar decentemente, ¡pruebe el contexto! Para aplicaciones de mayor escala que tienen múltiples estados (y más complejos), reductores, etc., Redux puede ser una mejor opción.

No es necesario utilizar el contexto en toda la aplicación, ya que esto puede complicar un poco las cosas. Sea ingenioso con su código, no utilice el contexto solo para evitar escribir más.

Conclusión

La API de contexto de React es bastante impresionante, pero no la uses a menos que sepas que será beneficiosa para ti y tu código. Redux podría ser una buena opción. Mantente alejado de la perforación de propiedades y recuerda que algo como context puede ayudarte a evitarlo. ¡Es una gran alternativa!

Si quieres consultar el código completo, puedes obtenerlo todo en codesandbox .