javascript - que - qué sucede durante el lifecycle de los componentes de react

ReactJs: ¿Cómo pasar el estado inicial mientras se renderiza un componente?

Question

Sé que puedo pasar props mientras renderizo un componente. También estoy al tanto del método getInitialState . Pero el problema es que getInitialState no ayuda mucho porque mi componente no sabe su estado inicial. Hago. Así que quiero pasarlo mientras lo estoy renderizando.

Algo así (pseudo-código):

React.render(<Component initialState={...} />);

Sé que podría usar un prop para funcionar como estado inicial, pero esto huele como un antipatrón.

¿Qué tengo que hacer?

EDITAR PARA LA CLARIDAD

Imagina que tengo un componente CommentList . Cuando lo represento por primera vez, el estado inicial corresponde a la instantánea de los comentarios actuales de mi base de datos. A medida que el usuario incluye comentarios, esta lista cambiará, y es por eso que debe ser un state y no props . Ahora, para generar la instantánea inicial de los comentarios, debo pasarla al componente de la CommentsList , porque no tiene forma de saberlo. Mi confusión es que la única manera que veo para pasar esta información es a través de un props que parece ser un anti-patrón.

Answer 1

Después de ver las otras respuestas y estudiar un poco al respecto, llegué a esta conclusión:

Si está representando React en el cliente (compilado o no), que es el enfoque predeterminado, debe intentar realizar una llamada Ajax adicional desde su componente para obtener el estado inicial. Es decir, no uses props . Es más limpio y menos propenso a errores.

Sin embargo, si está renderizando en el servidor (Node.js o ReactJs.NET), no hay razón para hacer esta llamada Ajax extra para cada solicitud. Además, no es amigable con SEO. Desea que la página completa venga como resultado de su solicitud (incluidos los datos). Entonces, como lo señaló @RandyMorris, en este caso está bien usar accesorios como estado inicial, siempre que sea exclusivamente el estado inicial. Es decir, no hay sincronización.

Answer 2

Para citar facebook.github.io/react/tips/… :

El uso de accesorios, pasados ​​de los padres, para generar el estado en getInitialState menudo conduce a la duplicación de la "fuente de la verdad", es decir, donde se encuentran los datos reales. Siempre que sea posible, calcule los valores sobre la marcha para asegurarse de que no pierdan la sincronización más adelante y causen problemas de mantenimiento

Y:

Sin embargo, no es un antipatrón si deja en claro que la sincronización no es el objetivo aquí.

Entonces, si sus accesorios incluyen un value y un value initialValue , entonces está claro que esto último es para la inicialización, y no hay confusión.

Ver facebook.github.io/react/tips/… para ejemplos de código.

Answer 3

Si conoces el estado, tenderé a argumentar que el componente que estás representando no tiene realmente el control sobre él. La idea de React es que cualquier parte del estado en particular vive en una sola ubicación.

Answer 4

Solo los componentes permanentes pueden usar accesorios en getInitialState . Los apoyos en getInitialState son un antipatrón si tu objetivo es la sincronización. getInitialState solo se llama cuando el componente se crea por primera vez, por lo que puede provocar algunos errores porque la fuente de la verdad no es única. Comprueba esta respuesta .

facebook.github.io/react/tips/…

El uso de accesorios, pasados ​​de los padres, para generar el estado en getInitialState a menudo conduce a la duplicación de la "fuente de la verdad", es decir, donde se encuentran los datos reales. Siempre que sea posible, calcule los valores sobre la marcha para asegurarse de que no pierdan la sincronización más adelante y causen problemas de mantenimiento

Todavía puedes hacer:

getInitialState: function() {
   return {foo: this.props.foo}
}

Como serán los accesorios por defecto para tu aplicación. Pero mientras esté utilizando un prop para establecer un valor que presumiblemente no cambiará, puede usar el mismo prop dentro de la función de render .

<span>{this.props.foo}</span>

Estos accesorios no se modificarán, por lo que no hay problema en usarlos cada vez render se llame al render .

Respuesta editada:

En este caso, su estado inicial no debe ser un prop, debe ser una llamada ajax que rellena la lista de comentarios.