为什么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可能是初始状态的一部分，在组件执行mount =＆gt;之后无需设置它。只有2个渲染，而不是3个。

根据https://github.com/reactjs/react-redux/issues/210，仅render调用componentWillMount一次的结果意味着如果在setState之后异步调用render，则会赢得'有任何影响（如果我理解正确的话）。

不确定setState的回调是否有可能在render之前执行，因此没有可见的加载屏幕，只有结果，因此有时它会“起作用”（很可能）在DEV）但实际上这将是一个非常难以调试的竞争条件......

另请参阅：https://reactjs.org/docs/faq-ajax.html

Answer 2

Point让你的react组件以初始状态呈现，这样你就会看到加载栏（loading：true）。

您可以在componentWillMount（）中移动line：this.setState（{isLoading：true}）。 因为componentWillMount中的设置状态不会触发组件的重新渲染。您的渲染方法将获得更新的组件。