React Context

En una aplicación típica de React, los datos se pasan de arriba hacia abajo (de padres a hijos) a través de props, pero esto puede ser engorroso para ciertos tipos de props (por ejemplo, preferencia de configuración regional, el tema de UI) que requieren muchos componentes dentro de una aplicación.

El contexto proporciona una forma de compartir valores como estos entre los componentes sin tener que pasar explícitamente una prop a través de cada nivel del árbol de componentes.

React Context

El contexto está diseñado para compartir datos que se pueden considerar "globales" para un árbol de componentes de React, como el usuario autenticado actual, el tema seleccionado o el idioma preferido.

Casos de Uso

En el siguiente ejemplo, manualmente pasamos una prop ‘theme’ para darle el estilo correspondiente al componente Button. El componente Toolbar tiene que recibir una prop "extra" para pasarla al ThemedButton, y si todos los botones de nuestra aplicación necesitan esto, es una propiedad que tendríamos que pasar por todos los componentes.

class App extends React.Component {
 render() {
   return <Toolbar theme="dark" />;
 }
}
function Toolbar(props) {
 return (
   <div>
     <ThemedButton theme={props.theme} />
   </div>
 );
}
function ThemedButton(props) {
 return <Button theme={props.theme} />;
}

Si utilizamos el Contexto de React, podemos ahorrarnos el pasaje de props innecesarias en la jerarquía de componentes:

// Creamos un contexto para el tema actual (light como valor por defecto)
const ThemeContext = React.createContext('light');

class App extends React.Component {
 render() {
   // Usamos un Provider para enviar el tema actual al arbol de elementos
   // No importa en que altura, cualquier componente puede leer el valor
   return (
     <ThemeContext.Provider value="dark">
       <Toolbar />
     </ThemeContext.Provider>
   );
 }
}

// El componente en el medio no tiene por que recibir nada
function Toolbar(props) {
 return (
   <div> <ThemedButton /> </div>
 );
}

function ThemedButton(props) {
 // Usamos un Consumer para leer el valor del contexto.
 // React buscara el Provider mas cercano hacia arriba y usar su valor.
 return (
   <ThemeContext.Consumer>
     {theme => <Button {...props} theme={theme} />}
   </ThemeContext.Consumer>
 );
}

Api

React.createContext

Crea un objeto con dos propiedades, Provider y Consumer. Cuando React dibuje el Consumer de un contexto, leerá el valor del Provider del mismo contexto más cercano hacia arriba en el árbol de componentes. El valor por defecto solo es utilizado si no encuentra ningún Provider en la jerarquía hacia arriba.

const { Provider, Consumer } = React.createContext(defaultValue);

Esa linea, es lo mismo que:

const context = React.createContext(defaultValue);
const Provider = context.Provider;
const Consumer = context.Consumer;

Provider

Es un componente de React que permite que Consumers debajo se puedan subscribir a los cambios en el contexto. Acepta una propiedad value que es la que le dará a los Consumers. Un Provider puede tener varios Consumers conectados a el, y tambien puede ser anidado debajo de otro Provider para sobre-escribir un valor más abajo en el árbol de componentes.

<Provider value={/* some value */}>
    {/* hijos */}
</Provider>

Consumer

Es un componente de React que se subscribe a los cambios del contexto. Requiere una función como hijo. Esta función es la que recibe el valor del contexto y retorna un nodo React.

Todos los Consumers descendientes de un Provider se re dibujaran cuando el Provider cambie su valor. La propagación de este cambio no depende del método de ciclo de vida shouldComponentUpdate, ósea que no se detiene aunque un componente superior no se actualice.

<Consumer>
 {value => /* render something based on the context value */}
</Consumer>

Un ejemplo completo

theme-context.js

export const themes = {
 light: {
   foreground: '#000000',
   background: '#eeeeee',
 },
 dark: {
   foreground: '#ffffff',
   background: '#222222',
 },
};

export const ThemeContext = React.createContext(
 themes.dark // default value
);

ThemedButton.js

import {ThemeContext} from './theme-context';

function ThemedButton(props) {
 return (
   <ThemeContext.Consumer>
     {theme => (
       <button
         {...props}
         style={{backgroundColor: theme.background}}
       />
     )}
   </ThemeContext.Consumer>
 );
}
export default ThemedButton;

App.js

import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';

// Un componente intermedio, que usa ThemedButton
function Toolbar(props) {
 return (
   <ThemedButton onClick={props.changeTheme}>
     Change Theme
   </ThemedButton>
 );
}

class App extends React.Component {
 constructor(props) { super(props);
   this.state = { theme: themes.light };
 }
 toggleTheme = () => {
   this.setState(state => ({
     theme: state.theme === themes.dark ? themes.light : themes.dark
   }));
 };
 render() {
   return (
     <div>
       <ThemeContext.Provider value={this.state.theme}>
         <Toolbar changeTheme={this.toggleTheme} />
       </ThemeContext.Provider>
       <ThemedButton> Another Button </ThemedButton>
     </div>
   );
 }
}

Practico

Para este ejercicio, partan del archivo 'step5_App.js' que se encuentra dentro de la carpeta base_steps. Copien el contenido a App.js y corran el proyecto.

Deben implementar la misma solución que en paso anterior, pero esta vez sin utilizar el pasamanos de props, sino que creando un contexto que guarde un objeto con los datos name y age, y desde BeerComponent leer esos valores.