[英]Use componentWillMount or componentDidMount lifecycle functions for async request in React
I am reading up on react lifecycle and am getting a little confused. 我正在阅读反应生命周期,我感到有点困惑。 Some recommend using componentWillMount to make ajax calls:
有人建议使用componentWillMount进行ajax调用:
https://hashnode.com/post/why-is-it-a-bad-idea-to-call-setstate-immediately-after-componentdidmount-in-react-cim5vz8kn01flek53aqa22mby 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.
在componentDidMount中调用setState将触发另一个render()调用,它可能导致布局颠簸。
and in other places it says not to put ajax calls in the componentWillMount: 而在其他地方,它说不要在componentWillMount中放置ajax调用:
https://medium.com/@baphemot/understanding-reactjs-component-life-cycle-823a640b3e8d 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.
由于这一事实,不建议将此功能用于任何引起副作用的操作。
Which is correct? 哪个是对的?
The React docs recommend on using componentDidMount
for making network Requests React文档建议使用
componentDidMount
进行网络请求
componentDidMount()
is invoked immediately after a component is mounted.在装入组件后立即调用
componentDidMount()
。 Initialization that requires DOM nodes should go here.需要DOM节点的初始化应该放在这里。 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.在此方法中调用
setState()
将触发额外的渲染,但保证在同一刻度期间刷新。 This guarantees that even though therender()
will be called twice in this case, the user won't see the intermediate state.这保证了即使在这种情况下将调用
render()
两次,用户也不会看到中间状态。
As per the the case for componentWillMount
: 根据
componentWillMount
的情况:
EDIT: 编辑:
This lifecycle is deprecated since v16.3.0
of react and is no longer encouraged for usage.However its renamed to UNSAFE_componentWillUpdate
and is expected to work till at least v17 of react 因为这个生命周期已被弃用
v16.3.0
反应的,不再鼓励usage.However其重命名为UNSAFE_componentWillUpdate
,预计工作到的反应至少V17
Before v16.3.0 在v16.3.0之前
An asynchronous call to fetch data will not return before the render happens. 在呈现发生之前,不会返回对获取数据的异步调用。 This means the component will render with empty data at least once.
这意味着组件将使用空数据呈现至少一次。
There is no way to “pause” rendering to wait for data to arrive. 没有办法“暂停”渲染以等待数据到达。 You cannot return a promise from
componentWillMount
or wrangle in a setTimeout
somehow. 你不能返回从一个承诺
componentWillMount
在一个或争吵setTimeout
莫名其妙。 The right way to handle this is to setup the component's initial state so that it's valid for rendering. 处理此问题的正确方法是设置组件的初始状态,以使其对渲染有效。
To Sum it up 把它们加起来
In practice, componentDidMount
is the best place to put calls to fetch data, for two reasons: 实际上,
componentDidMount
是调用获取数据的最佳位置,原因有两个:
undefined
state that causes errors. undefined
状态。 componentWillMount
will actually be called twice – once on the server, and again on the client – which is probably not what you want. componentWillMount
实际上将被调用两次 - 一次在服务器上,再一次在客户端上 - 这可能不是您想要的。 Putting the data loading code in componentDidMount
will ensure that data is only fetched from the client. componentDidMount
中将确保仅从客户端获取数据。 componentDidMount
是按照其文档中的描述进行Ajax调用的推荐生命周期方法
ComponentDidMount is the place. ComponentDidMount就是这个地方。
But if you have time try to look at Redux and make the requests in actions, as your application grow it will help a lot to manage the app state. 但是如果你有时间尝试查看Redux并在操作中发出请求,那么随着应用程序的增长,它将有助于管理应用程序状态。
;) ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.