在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 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将确保仅从客户端获取数据。