javascript - logo - react js ejemplos

ReactJS: ¿cómo pasar datos "globales" a componentes secundarios profundamente anidados?

Question

¿Cómo se suele acercar la gente a tener datos "globales" en una aplicación React?

Por ejemplo, supongamos que tengo los siguientes datos para un usuario una vez que haya iniciado sesión en mi aplicación.

user: {
  email: ''[email protected]'',
  name: ''John Doe''
}

Estos son datos que casi cualquier componente de mi aplicación podría desear conocer, por lo que podría procesarse en un estado de inicio de sesión o de cierre de sesión, o tal vez mostrar la dirección de correo electrónico de los usuarios si se registraron.

Desde mi punto de vista, la forma React de acceder a estos datos en un componente secundario es que un componente de nivel superior sea el propietario de los datos y los pase a los componentes secundarios usando propiedades, por ejemplo:

<App>
  <Page1/>
  <Page2>
    <Widget1/>
    <Widget2 user={user}/>
  </Page2>
</App>

Pero esto me parece difícil de manejar, ya que eso significaría que tendría que pasar los datos a través de cada compuesto, solo para que se lo diera al niño que lo necesitaba.

¿Hay alguna manera de reaccionar para gestionar este tipo de datos?

Nota: Este ejemplo es muy simplificado: me gusta envolver los intentos como materiales compuestos para que los detalles de implementación de las funciones de UI completas se puedan cambiar drásticamente como mejor me parezca.

EDITAR : Soy consciente de que, de forma predeterminada, llamar a setState en mi componente de nivel superior provocaría que todos los componentes secundarios se setState nuevamente , y que en cada componente secundario puedo representar usando cualquier dato que me guste (por ejemplo, datos globales, no solo o accesorios). Pero, ¿cómo las personas eligen notificar solo ciertos componentes secundarios para que se los proporcione?

Answer 1

¿Qué pasa con solo pasar datos a lo largo de la cadena de componentes a través de la representación de todos los niños con {... restOfProps}?

render(){
  const {propIKnowAbout1, propIKnowAbout2, ...restOfProps} = this.props;
  return <ChildComponent foo={propIKnowAbout1} bar={propIKnowAbout2} {...restOfProps}/>
}

Answer 2

Desde que originalmente respondí esta pregunta, me resultó obvio que React en sí no admite datos "globales" en ningún sentido; realmente está destinado a administrar la interfaz de usuario y eso es todo. Los datos de su aplicación necesitan vivir en otro lugar. Una vez dicho esto, ahora admite el acceso a datos de context global como se detalla en esta otra respuesta en esta página . Este repositorio (no Unstated ) supuestamente envuelve el context de una manera más agradable, para aquellos que están interesados, y aquí hay un buen artículo de Kent Dodds sobre cómo ha evolucionado la API de context , y ahora es oficialmente compatible con React.

El enfoque context solo debe usarse para datos verdaderamente globales. Si sus datos entran en cualquier otra categoría, entonces debe hacer lo siguiente:

• Los propios Facebook resuelven este problema utilizando su propia biblioteca Flux .
• Mobx y Redux son similares a Flux, pero parecen tener un atractivo más popular. Hacen lo mismo, pero de una manera más limpia e intuitiva.

Dejo mis ediciones originales a esta respuesta a continuación, para un poco de historia.

ANTIGUA RESPUESTA:

La mejor respuesta que he encontrado para esto hasta el momento son estas 2 mezclas de React, que no he tenido la oportunidad de probar, pero parece que abordarán este problema:

https://github.com/dustingetz/react-cursor

y esta biblioteca similar:

https://github.com/mquan/cortex

NOTA IMPORTANTE: Creo que este es un trabajo para Flux , o algo similar (que es el anterior). Cuando el flujo de datos se vuelve demasiado complejo, se requiere otro mecanismo para comunicarse entre componentes que no sean devoluciones de llamada, y Flux y sus clones parecen serlo ...

Answer 3

Usar la propiedad React Context Esto es específicamente para pasar conjuntos de datos globales por la cadena sin reenviarlos explícitamente. Sin embargo, complica las funciones del ciclo de vida de su Componente y toma nota de las precauciones que se ofrecen en la página que he vinculado.