在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某种方式回复承诺或争吵.处理此问题的正确方法是设置组件的初始状态,以使其对渲染有效.

把它们加起来

实际上,这componentWillMount是调用获取数据的最佳位置,原因有两个:

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