El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

La API de Contexto de React es una herramienta poderosa que permite compartir datos entre componentes sin necesidad de pasar props manualmente a través de cada nivel del árbol de componentes. Esto es especialmente útil para datos que deben ser accesibles por muchos componentes en diferentes niveles de la jerarquía, como el tema de la aplicación, el usuario autenticado, o la configuración de la aplicación.

Conceptos Clave

Contexto: Un objeto que contiene datos que pueden ser compartidos entre componentes.
Provider: Un componente que envuelve a otros componentes y proporciona el contexto.
Consumer: Un componente que accede a los datos del contexto.

Creación de un Contexto

Para crear un contexto, utilizamos la función React.createContext. Esta función devuelve un objeto con dos propiedades: Provider y Consumer.

import React from 'react';

// Crear un contexto con un valor por defecto
const MyContext = React.createContext('valor por defecto');

Uso del Provider

El Provider es un componente que envuelve a otros componentes y les proporciona el valor del contexto. El valor del contexto puede ser cualquier tipo de dato: un string, un número, un objeto, una función, etc.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { MyContext } from './MyContext';

const rootElement = document.getElementById('root');

ReactDOM.render(
  <MyContext.Provider value="Hola, Mundo!">
    <App />
  </MyContext.Provider>,
  rootElement
);

Uso del Consumer

El Consumer es un componente que accede al valor del contexto. Utiliza una función como hijo (render prop) para acceder al valor del contexto.

import React from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  return (
    <MyContext.Consumer>
      {value => <div>El valor del contexto es: {value}</div>}
    </MyContext.Consumer>
  );
}

export default MyComponent;

Ejemplo Completo

A continuación, se muestra un ejemplo completo que ilustra cómo crear un contexto, proporcionar un valor y consumir ese valor en un componente.

MyContext.js

import React from 'react';

const MyContext = React.createContext('valor por defecto');

export { MyContext };

App.js

import React from 'react';
import { MyContext } from './MyContext';
import MyComponent from './MyComponent';

function App() {
  return (
    <MyContext.Provider value="Hola, Mundo!">
      <MyComponent />
    </MyContext.Provider>
  );
}

export default App;

MyComponent.js

import React from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  return (
    <MyContext.Consumer>
      {value => <div>El valor del contexto es: {value}</div>}
    </MyContext.Consumer>
  );
}

export default MyComponent;

Uso del Hook useContext

En lugar de usar el Consumer, podemos utilizar el hook useContext para acceder al valor del contexto en componentes funcionales.

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  const value = useContext(MyContext);
  return <div>El valor del contexto es: {value}</div>;
}

export default MyComponent;

Ejercicio Práctico

Ejercicio

Crea un nuevo contexto llamado ThemeContext que tenga un valor por defecto de { theme: 'light' }.
En el componente App, utiliza el ThemeContext.Provider para proporcionar un valor de { theme: 'dark' }.
Crea un componente ThemeComponent que consuma el valor del contexto y muestre el tema actual.

Solución

ThemeContext.js

import React from 'react';

const ThemeContext = React.createContext({ theme: 'light' });

export { ThemeContext };

App.js

import React from 'react';
import { ThemeContext } from './ThemeContext';
import ThemeComponent from './ThemeComponent';

function App() {
  return (
    <ThemeContext.Provider value={{ theme: 'dark' }}>
      <ThemeComponent />
    </ThemeContext.Provider>
  );
}

export default App;

ThemeComponent.js

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemeComponent() {
  const { theme } = useContext(ThemeContext);
  return <div>El tema actual es: {theme}</div>;
}

export default ThemeComponent;

Conclusión

La API de Contexto de React es una herramienta poderosa para compartir datos entre componentes sin necesidad de pasar props manualmente a través de cada nivel del árbol de componentes. Al utilizar Provider y Consumer o el hook useContext, podemos gestionar de manera eficiente el estado global de nuestra aplicación. En el próximo tema, exploraremos cómo utilizar Redux para la gestión del estado en aplicaciones más complejas.

API de Contexto

Conceptos Clave

Creación de un Contexto

Uso del Provider

Uso del Consumer

Ejemplo Completo

MyContext.js

App.js

MyComponent.js

Uso del Hook useContext

Ejercicio Práctico

Ejercicio

Solución

ThemeContext.js

App.js

ThemeComponent.js

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa