在 React 中我们应该在哪里发出 API 请求？答案

【问题标题】：Where should we make an API request in React?在 React 中我们应该在哪里发出 API 请求？
【发布时间】：2019-03-05 06:51:25
【问题描述】：

我一直在ComponentDidMount生命周期中提出API's请求，并在回调中调用setState。但是在深入挖掘时，我碰巧发现我们不应该在这个生命周期中调用 setState，因为它会再次触发 render 方法，React 也不建议这样做。

那么在这种情况下，我们究竟应该在哪里发出请求并调用setState 以在之后使用结果？

【问题讨论】：

componentDidMount 是正确的。
您不正确地在 componentDidMount 中不进行 api 调用。这是进行 API 调用的正确方法
stackoverflow.com/questions/47392910/… 可能重复
即使你在构造函数或 componentWillMount 中调用了在构造函数之前调用的 API 调用，也不能保证在渲染之前收到响应，并且无论如何都会在 setState 上触发重新渲染
您可以立即在 componentDidMount() 中调用 setState()。它会触发额外的渲染，但会在浏览器更新屏幕之前发生。这保证了即使在这种情况下 render() 将被调用两次，用户也不会看到中间状态。请谨慎使用此模式，因为它通常会导致性能问题。在大多数情况下，您应该能够在 constructor() 中分配初始状态。 - 反应文档

标签： javascript reactjs

【解决方案1】：

您绝对应该在 componentDidMount 中进行 API 调用。不建议重新渲染一个大组件，而应该将 UI 分解为小的逻辑组件，只重新渲染需要的部分，而不是整体。例如，您有一个名为HomeComponent 的大组件，它有3 个名为NavComponent、BodyComponent 和FooterComponent 的小组件。您应该不从HomeComponent 的componentDidMount 调用API，因为从HomeComponent 调用setState 将重新渲染HomeComponent 中的所有小组件，这不是必需的因为您知道不需要重新渲染导航栏或页脚。而不是来自BodyComponent，因为只有身体部分需要重新渲染，因为它的状态已经改变。所以你应该从BodyComponent 的componentDidMount 调用API，这样你就只重新渲染需要的东西。

【讨论】：

感谢您的解释。我确实采用这种将 UI 拆分为小组件的方法，这样子组件就不会被不必要地渲染。但我认为社区会使用任何不同的方法。 :)

【解决方案2】：

@Shababb Karim 是对的，但如果我要在我的项目中实现 API 调用，我会添加一个状态管理库。 Redux 是一种为应用程序实现全局状态的好方法，您可以在其中从所述 API 设置数据。所有需要该数据的组件都可以附加到 Redux 状态以获取它。

不过，Redux 在较小的项目中可能会产生一些开销。在这种情况下，还有其他选项，例如 Flux（虽然我更喜欢 Redux）。

【讨论】：