我应该发出请求并立即 setState 哪个生命周期钩子？答案

【问题标题】：Which lifecycle hook should I make requests and immediately setState?我应该发出请求并立即 setState 哪个生命周期钩子？
【发布时间】：2018-01-09 14:48:15
【问题描述】：

当我的组件挂载时，我需要从 API 请求它的内容。在docs：

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

接下来是：

在此方法中调用 setState() 将触发额外的渲染 (...) 谨慎使用此模式因为它经常会导致性能问题。

向 API 发出请求并立即使用响应设置状态的最佳做法是什么？

【问题讨论】：

调用componentDidMount()中的api并在收到componentWillReceiveProps()中的响应时更新状态
我没听懂。我在哪里存储 API 的响应？发出请求的组件与接收响应的组件相同，所以，如果我没记错的话，这个钩子永远不会被调用，因为我的组件永远不会收到 props
如果您能告诉我您正在进行哪种 API 调用，我可以扩展我的答案并为您提供更准确的解决方案。你在取数据吗？如果是这样，你将如何在你的 React 应用程序中使用什么样的数据？

标签： performance reactjs react-lifecycle

【解决方案1】：

在收到响应后调用 API 并更新状态的最佳方式是在 componentDidMount() 或 componentWillMount()。

哪一个可能取决于您想对来自 API 调用的数据做什么。如果您需要访问组件 DOM，则必须使用 componentDidMount()。也就是说，这些都不会让您免于额外的重新渲染，除非您的数据不需要设置为您的 state，在这种情况下您可以将其保存到 this。

official documentation 甚至在this section 中声明了这一点：

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

【讨论】：

ComponentWillMount 即将被弃用，现在不安全。所以使用 componentDidMount

【解决方案2】：

渲染前调用api：

  componentWillMount(){
     fetch(api)
        .then((response)=>{
         this.setState({data:response.data});
   })

}

渲染后调用api：

  componentDidMount(){
     fetch(api)
        .then((response)=>{
         this.setState({data:response.data});
   })}

渲染前调用props数据：

  componentWillReceiveProps(){         
         this.setState({data:this.props.data});

}

【讨论】：

【解决方案3】：

每当您触发setState 时，您的组件都会被重新渲染（不管生命周期事件）。

谨慎使用此模式...

例如，如果您在 componentWillReceiveProps 中触发 setState 并且您没有正确处理未来的道具，您可能会陷入无限循环。

我的建议是坚持使用componentDidMount，并在您的 api 请求完成后立即设置状态：

componentDidMount() {
  fetch('api-endpoint')
    .then(response => response.json())
    .then(result => this.setState({ stateProp: result }))
}

【讨论】：