在React中使用componentWillMount或componentDidMount生命周期函数进行异步请求

在React中使用componentWillMount或componentDidMount生命周期函数进行异步请求

React docs建议使用

componentDidMount

发出网络请求

componentDidMount()

挂载组件后立即调用。需要DOM节点的初始化应该在这里进行。如果需要从远程端点加载数据，这是实例化网络请求的好地方。

调用

setState()

此方法将触发额外的渲染，但是可以保证在同一刻度内刷新。这样可以保证，即使

render()

在这种情况下将调用两次，用户也不会看到中间状态。

根据情况

componentWillMount

：

编辑：

这个生命周期废弃了，因为

v16.3.0

的反应，并且不再鼓励usage.However其重命名为

UNSAFE_componentWillUpdate

和至少预计工作到
V17 的反应

v16.3.0之前

在呈现发生之前，将不会返回异步调用以获取数据。这意味着组件将使用空数据至少渲染一次。

无法“暂停”渲染以等待数据到达。您不能

componentWillMount

以

setTimeout

某种方式退还诺言或争执。处理此问题的正确方法是设置组件的初始状态，以使其对渲染有效。

把它们加起来

实际上，

componentDidMount

由于两个原因，这是发出调用以获取数据的最佳位置：

• 使用DidMount可以清楚地表明，只有在初始渲染之后才会加载数据。这提醒您正确设置初始状态，以免最终

  undefined

  导致出现错误的状态。
• 如果您需要在服务器上呈现您的应用程序，

  componentWillMount

  则实际上会被调用两次-一次在服务器上，再一次在客户端上-这可能不是您想要的。放入数据加载代码

  componentDidMount

  将确保仅从客户端获取数据。