Tutorial de la API de nuevo contexto de React 16.3

 En este tutorial rápido, aprenderá a usar la nueva API de contexto en React 16.3+.

A partir de la versión 16.3, React tiene una nueva API de contexto. Entonces, en este tutorial, aprenderemos por qué necesita usar la API y cómo comenzar a usarla.

Por qué usar la API de React Context

En la mayoría de los casos del mundo real, su aplicación React constará de varios componentes que forman un árbol con componentes padre e hijo. Ahora, ¿qué suele hacer cuando intenta acceder al estado desde un componente principal en un componente secundario?

Debería usar lo que llamamos perforación de accesorios, lo que simplemente significa que está pasando accesorios a través de un conjunto de componentes intermediarios que no necesitan usar los datos asociados con esos accesorios, pero que los reciben de todos modos solo por enviar datos a el componente que realmente lo necesita.

Muy bien podría resolver este problema utilizando una biblioteca de administración de estado como Redux, pero en caso de que no desee usar una biblioteca de administración de estado, la nueva API de contexto React 16.3 puede ayudarlo a pasar el estado a componentes profundos en su árbol de aplicaciones de una manera más manera elegante y fácil.

Para implementar la nueva API de contexto, debe considerar estas tres cosas.

Usando la API de contexto en React

Para crear un contexto, usa el React.createContext()método que puede tomar algún valor inicial. Este método devuelve un objeto de contexto que proporciona dos componentes:

• Un componente de proveedor,
• Y un componente de consumidor.

Cómo crear un contexto usando el React.createContext()método

Por ejemplo, creemos un contexto usando este método:

const aContext = React.createContext('someInitialValue')

Uso del componente Proveedor de contexto

Debe usar el Providercomponente Contexto ( aContext.Provider) en el componente principal superior del árbol (el componente desde donde desea enviar el estado). El Provideracepta un valor prop que puede tomar cualquier valor.

Uso del componente de consumidor de contexto

Necesita usar el componente Consumer( aContext.Consumer) en cualquier lugar del árbol debajo del proveedor.

El Consumercomponente Context acepta un accesorio para niños que debe ser una función que toma el valor proporcionado y devuelve un elemento React:

class App extends React.Component {
  state = {
    message: 'Hi child!'
  }
  render() {
    return (
      <aContext.Provider value={this.state.message}>
        <!-- Place consumer component-->
      </aContext.Provider>)
  }
}

El Appcomponente tiene un estado de mensaje . Utilizando un Providercomponente de contexto y pasando statecomo valor; pasa a estar disponible como contexto para cualquier Consumercomponente de contexto , en el árbol (es decir, los hijos del Providercomponente).

Ahora, ¿cómo crear un Consumercomponente de contexto ? Simplemente envolviendo un accesorio de renderizado o un componente de orden superior con el objeto Context Consumer:

class MiddleComponent extends React.Component {

  render() {
    return (
      <aContext.Consumer>
        { (value) => <div>My parent component says: {value}</div>}
      </aContext.Consumer>
    )
  }
}

Cambie el Appcomponente de la siguiente manera:

class App extends React.Component {
  state = {
    message: 'Hi child!'
  }
  render() {
    return (
      <aContext.Provider value={this.state.message}>
        <MiddleComponent></MiddleComponent>
      </aContext.Provider>)
  }
}

render(<App />, document.getElementById('root'))

Debería obtener: Mi componente principal dice: ¡Hola, niño!

Resumen: React Context API

El uso de la nueva API de contexto React 16.3 se puede usar como una alternativa para Redux si su único propósito de usar una biblioteca de administración de estado es evitar la perforación de accesorios .

En este tutorial, hemos visto cómo usar los componentes de consumidor y proveedor de API de contexto de React para pasar el estado al árbol de componentes en su aplicación de React sin recurrir a la perforación de accesorios.