在React中使用componentWillMount或componentDidMount生命周期函数进行异步请求 [英] Use componentWillMount or componentDidMount lifecycle functions for async request in React

问题描述

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

I am reading up on react lifecycle and am getting a little confused. Some recommend using componentWillMount to make ajax calls:

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

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

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

在其他地方它说不要把ajax调用放入componentWillMount：

and in other places it says not to put ajax calls in the componentWillMount:

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

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

...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 进行网络请求

The React docs recommend on using componentDidMount for making network Requests

componentDidMount（）在组件安装
后立即调用。需要DOM节点的初始化应该放在这里。如果
需要从远程端点加载数据，这是
实例化网络请求的好地方。

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.

调用 setState（）在这个方法中会触发一个额外的渲染，但是
它保证在相同的时间内刷新。这保证了
，即使在这种情况下将调用两次 render（），用户
也不会看到中间状态。

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 的情况：

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

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.

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

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. The right way to handle this is to setup the component’s initial state so that it’s valid for rendering.

总结

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

In practice, componentDidMount is the best place to put calls to fetch data, for two reasons:

• 使用DidMount可以清楚地知道在初始渲染
  之后才会加载数据。这会提醒您正确设置初始状态
  ，这样就不会导致导致
  错误的 undefined 状态。


• 如果您需要在服务器上呈现您的应用程序， componentWillMount 实际上将被调用
  两次 - 一次在服务器上，再次打开客户 - 这可能不是你想要的
  。将数据加载代码放在
  componentDidMount 中将确保仅从
  客户端获取数据。

• Using DidMount makes it clear that data won’t be loaded until after the initial render. This reminds you to set up initial state properly, so you don’t end up with undefined state that causes errors.
• If you ever need to render your app on the server, componentWillMount will actually be called twice – once on the server, and again on the client – which is probably not what you want. Putting the data loading code in componentDidMount will ensure that data is only fetched from the client.

这篇关于在React中使用componentWillMount或componentDidMount生命周期函数进行异步请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！