我应该向哪个生命周期钩子发出请求并立即设置状态？

Question

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

  

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

以下是：

  

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

向API发出请求的最佳做法是什么？立即使用响应进行setState？

Answer 1

在收到回复后调用API并更新状态的最佳方法是componentDidMount()或componentWillMount()。

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

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

  安装组件后立即调用

componentDidMount()。需要DOM节点的初始化应该放在这里。 如果您需要从远程端点加载数据，这是实例化网络请求的好地方。

Answer 2

在渲染之前调用api：

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

}

渲染后调用api：

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

在渲染之前调用道具数据：

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

}

Answer 3

每当触发setState时，您的组件将被重新呈现（无论生命周期事件如何）。

  

谨慎使用此模式......

例如，如果您在setState中触发componentWillReceiveProps并且未正确处理未来道具，则可以进入无限循环。

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

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