Pregunta de la entrevista: React (9): Contexto de React: implementación de comunicación de componentes que no son entre padres e hijos

En React, la comunicación entre componentes es una de las cuestiones clave en la creación de aplicaciones complejas. Aunque el flujo de datos de React suele ser de arriba hacia abajo, es decir, se pasa del componente principal al componente secundario, a veces necesitamos implementar la comunicación entre los componentes secundarios y no principales. Para resolver este problema, React presenta Context, un mecanismo que puede pasar datos entre niveles.

1. Descripción general del contexto de React

Context es una solución de gestión de estado global que nos permite compartir datos en todo el árbol de componentes sin pasarlos por accesorios. El contexto generalmente se usa para compartir datos comunes entre componentes, como temas, estado de inicio de sesión del usuario, etc.

2. Utilice Contexto para implementar la comunicación de componentes que no son padre-hijo.

A través del contexto, podemos implementar la comunicación entre componentes no principales y secundarios. Los siguientes son los pasos de implementación:

1. Crear contexto:

Primero, necesitamos crear un contexto. Esto se puede hacer en cualquier lugar, pero normalmente definiremos el Contexto en un archivo separado.

// DataContext.js
import React from 'react';

const DataContext = React.createContext();

export default DataContext;

2. Proporcionar datos:

En el componente principal que necesita compartir datos, utilizamos <DataContext.Provider>para proporcionar los datos. Este proveedor empaquetará los componentes secundarios para que estos componentes secundarios puedan acceder a los datos proporcionados.

// ParentComponent.js
import React from 'react';
import DataContext from './DataContext';

class ParentComponent extends React.Component {
  state = { data: 'Hello from parent!' };

  render() {
    return (
      <DataContext.Provider value={this.state.data}>
        {this.props.children}
      </DataContext.Provider>
    );
  }
}

3. Datos de uso:

En los componentes secundarios, podemos obtener los datos proporcionados a través de useContextganchos o archivos .Context.Consumer

// ChildComponent.js
import React, { useContext } from 'react';
import DataContext from './DataContext';

function ChildComponent() {
  const data = useContext(DataContext);

  return <p>Data from parent: {data}</p>;
}