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

我正在阅读反应生命周期,我感到有点困惑.有人建议使用componentwillMount进行ajax调用：

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

Calling setState in componentDidMount will trigger another render()
call and it can lead to layout thrashing.

而在其他地方,它说不要在componentwillMount中放置ajax调用：

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

…this function might end up being called multiple times before the
initial render is called so might result in triggering multiple
side-effects. Due to this fact it is not recommended to use this
function for any side-effect causing operations.

哪个是对的？

解决方法:

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

componentDidMount() is invoked immediately after a component is
mounted. Initialization that requires DOM nodes should go here. If you
need to load data from a remote endpoint, this is a good place to
instantiate the network request.

Calling setState() in this method will trigger an extra rendering, but
it is guaranteed to flush during the same tick. This guarantees that
even though the render() will be called twice in this case, the user
won’t see the intermediate state.

根据componentwillMount的情况：

编辑：

这个生命周期从反应的v16.3.0开始被弃用,并且不再被鼓励使用.但是它被重命名为UNSAFE_componentwillUpdate并且预计至少工作到v17的反应

在v16.3.0之前

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

没有办法“暂停”渲染以等待数据到达.你不能以某种方式从componentWout中的componentwillMount或wrangle返回一个promise.处理此问题的正确方法是设置组件的初始状态,以使其对渲染有效.

把它们加起来

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

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