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

Question

我正在阅读反应生命周期并且有点困惑。有人建议使用componentWillMount进行ajax调用：

https://hashnode.com/post/why-is-it-a-bad-idea-to-call-setstate-immediately-after-componentdidmount-in-react-cim5vz8kn01flek53aqa22mby

  

在componentDidMount中调用setState将触发另一个render（）   打电话，它可能导致布局颠簸。

并且在其他地方它说不要在componentWillMount：

中放置ajax调用

https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d

  

...此函数最终可能会被多次调用   调用初始渲染，因此可能导致触发多次   副作用。由于这个事实，不建议使用它   用于任何引起副作用的操作。

哪个是对的？

Answer 1

React文档建议使用componentDidMount进行网络请求

  在组件出现后立即调用

componentDidMount()   安装。需要DOM节点的初始化应该放在这里。如果你   需要从远程端点加载数据，这是一个好地方   实例化网络请求。

     

在此方法中调用setState()将触发额外渲染，但是   保证在相同的时间内冲洗。这保证了   即使在这种情况下render()将被调用两次，用户也是如此   不会看到中间状态。

根据componentWillMount：

的情况

修改

此生命周期自v16.3.0反应后被弃用，不再鼓励使用。但是，如果将其重命名为UNSAFE_componentWillUpdate并且预计至少 v17

在v16.3.0之前

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

没有办法“暂停”渲染等待数据到达。你不能以某种方式从componentWillMount或setTimeout回复承诺。处理此问题的正确方法是设置组件的初始状态，以使其对渲染有效。

总结

实际上，componentDidMount是调用获取数据的最佳位置，原因有两个：

• 使用DidMount可以清楚地知道数据直到之后才会被加载 初始渲染。这会提醒您设置初始状态 正确的，所以你不会导致undefined状态导致 错误。
• 如果您需要在服务器上呈现您的应用，componentWillMount实际上是 调用两次 - 一次在服务器上，再一次在客户端上 - 这是 可能不是你想要的。将数据加载代码放入 componentDidMount将确保仅从中获取数据 客户端。

Answer 2

componentDidMount是按their docs

中所述进行Ajax调用的推荐生命周期方法

Answer 3

ComponentDidMount就是这个地方。

但是，如果你有时间尝试查看Redux并在操作中发出请求，随着应用程序的增长，它将有助于管理应用程序状态。

）