Почему async-запросы должны быть сделаны в компонентеDidMount вместо getInitialState в ReactJS?

Эта страница из React docs показывает, что запрошенные асинхронные данные должны потребляться в событии componentDidMount, а getInitialState инициализировать объект состояния в пустое состояние по умолчанию.

Есть ли причина для этого? Может быть, getInitialState не должен делать это или имеет другую цель? Это связано с некоторой внутренней логикой библиотеки?

Примечание для модераторов и ответчиков: это не вопрос, основанный на мнениях: если причина существует, это был бы ответ, однако, правильный, правильный ответ на мой вопрос мог бы быть также "Нет, какая-либо особая причина, делайте все, что вам лучше"

Ответы

Ответ 1

getInitialState должна быть чистой функцией реквизита (хотя они часто не используются). Другими словами, с теми же реквизитами getInitialState должен возвращать те же данные.

componentDidMount разрешено иметь динамическое поведение и вызывать побочные эффекты, такие как манипуляция с dom и запросы ajax (что является основным намерением этого).

Обычный способ справиться с этим - с ранним возвратом либо пустого div, загружающего сообщения, <div>Loading</div>), либо индикатора загрузки (например, spinkit).

При первом отображении будет показан счетчик, а затем состояние будет обновлено данными, и основная часть рендера может быть запущена.

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

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

Ответ 2

Вы не хотели бы этого делать, потому что ваш компонент будет ждать асинхронного запроса, и он не сможет подключиться, пока он не завершится. Если у вас есть html с переменными состояния пары, пусть сначала реагирует на рендер, а не на ожидание. Я знаю, что это мнение, но это также разделение проблем.