javascript - son - ¿Por qué las solicitudes asíncronas se deben realizar en componentDidMount en lugar de getInitialState en ReactJS?

react js

Question

This página de los documentos de React muestra que los datos solicitados asíncronos se deben consumir en el evento componentDidMount , mientras que getInitialState inicializa el objeto de estado a un estado vacío predeterminado.

¿Hay alguna razón para eso? ¿Quizás no se espera que getInitialState haga esto o tenga un propósito diferente? ¿Se debe a alguna lógica interna de la biblioteca?

Nota para los moderadores y respondedores: esta no es una pregunta basada en la opinión: si existe una razón, esa sería la respuesta, sin embargo, una buena y correcta respuesta a mi pregunta también podría ser "No, no hay ninguna particular Razon, haz lo que sientas mejor ".

Answer 1

No querría hacer esto porque su componente estará esperando en la solicitud asíncrona y no podrá montar hasta que finalice. Si tiene html con un par de variables de estado, deje que reaccione primero en lugar de hacerlo esperar. Sé que esto es una opinión, pero también es una cuestión de separación de preocupaciones.

Answer 2

getInitialState debe ser una función pura de los accesorios (aunque a menudo no se utilizan). En otras palabras, con las mismas propiedades, getInitialState debe devolver los mismos datos.

Se permite que componentDidMount tenga un comportamiento dinámico y cause efectos secundarios como la manipulación de dom y las solicitudes de ajax (esa es la intención principal de esto).

Una forma común de manejar esto es con un retorno temprano de un div vacío, mensaje de carga, <div>Loading</div> ), o indicador de carga (por ejemplo, spinkit ).

En el primer renderizado se mostrará el spinner, y luego el estado se actualizará con los datos y se podrá ejecutar la parte principal del render.

render: function(){
   // while loading
   if (!this.state.data){
     return <div className="spinner"></div>
   }

   // loaded, you can use this.state.data here
   return <div>...</div>
}