Почему запрос ajax должен выполняться в компонентах Componentid в компонентах React?

Question

Реагирующая документация заявляет, что запрос ajax должен быть инициирован из componentDidMount события жизненного цикла (см. react docs).

Почему это событие?

В большинстве случаев, при загрузке данных с помощью Ajax, я хочу, чтобы отобразить какое-то полоса загрузки, например:

componentDidMount() { 
    this.setState({isLoading: true}); 
    fetch(...) 
     .then(...) 
     .then(() => this.setState({isLoading: false}) 
} 

, но это срабатывает render метод 3 раза (начальная рендер мгновенным следует настройки isLoading = true, а затем по isLoading = false

Что плохого об отправке Ajax запрос от componentWillMount события?

Answer 1

Ну, isLoading: true может быть частью исходного состояния, нет необходимости установить его после того, как компонент сделал крепление => только 2 визуализаций, а не 3.

Согласно https://github.com/reactjs/react-redux/issues/210, следствием вызова render только один раз из componentWillMount означает, что если setState будет асинхронно вызывается после render, он не будет иметь никакого эффекта (если я правильно понимаю комментарии).

Не уверен, что существует вероятность того, что обратный вызов с setState может быть выполнен до render, и, таким образом, экран загрузки не будет виден, только результаты, поэтому иногда он «работает» (скорее всего, в DEV), но на самом деле это будет состояние гонки очень трудно отлаживать ...

Смотрите также https://facebook.github.io/react/tips/initial-ajax.html

Answer 2

Пойнт пусть ваш реагировать компонент визуализации с начальным состоянием, так что вы увидите полосу загрузки (загрузки: правда).

Вы можете перемещать строку: this.setState ({isLoading: true}) в компонентеWillMount(). Потому что состояние установки в компонентеWillMount не вызовет повторителя вашего компонента. Ваш метод визуализации получит обновленный компонент.