为什么ajax请求应该在React组件中的componentDidMount中完成？

Question

React文档声明应该从componentDidMount生命周期事件启动ajax请求 (请参阅react docs).

为什么这个活动？

在大多数情况下,当使用ajax加载数据时,我想显示某种加载条,例如:

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

但是这会激发render方法3次(初始渲染isLoading = true,然后立即设置,然后按isLoading = false

从componentWillMount事件发送ajax请求有什么问题？

Answer 1

好吧,isLoading: true可能是初始状态的一部分,不需要在组件安装后设置它=>只有2个渲染,而不是3.

根据https://github.com/reactjs/react-redux/issues/210,render只调用一次的结果componentWillMount意味着if setState将被异步调用后render,它将没有任何影响(如果我正确理解了注释) ).

不确定回调是否有setState可能在之前执行render,因此没有加载屏幕可见,只有结果,因此有时它会"工作"(最有可能在DEV中),但实际上它将是一个竞争条件非常难以调试......

另见:https://reactjs.org/docs/faq-ajax.html