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

Question

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

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

它如下：

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

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

score 4 · Accepted Answer

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

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

官方文档甚至在本节中说明了这一点：

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

score 1 · Accepted Answer

渲染前调用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});

}

score 0 · Accepted Answer

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

谨慎使用此模式...

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

我的建议是在您的 api 请求得到满足后立即坚持componentDidMount并设置状态：

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

3 回答 3