我可以在React的componentWillMount中调用API吗？

Question

我正在研究过去1年的反应。我们遵循的约定是componentDidMount在数据到达后进行API调用，获取数据和setState。这将确保组件已安装并且设置状态将导致重新渲染该组件，但我想知道为什么我们不能在componentWillMount或中设置setState。constructor

官方文件说：

在挂载发生之前立即调用componentWillMount（）。在render（）之前调用它，因此在此方法中设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。

它说setting state in this method will not trigger a re- rendering，我在进行API调用时不需要。如果我能够获取数据并能够设置状态（假设API调用确实非常快），componentWillMount或在constructor第一个渲染中存在数据，为什么我要完全重新渲染？

如果API调用速度很慢，那么setState它将是异步的并且componentWillMount已经返回，那么我将能够setState并进行重新渲染。

总体而言，我很困惑为什么我们不应该在构造函数或componentWillMount中进行API调用。有人真的可以帮助我了解在这种情况下反应如何起作用吗？

Answer 1

1.componentWillMount并重新渲染

比较这两种componentWillMount方法。
一种导致额外的重新渲染，一种没有

componentWillMount () {
  // This will not cause additional re-render
  this.setState({ name: 'Andrej '});
}

componentWillMount () {
  fetch('http://whatever/profile').then(() => {
    // This in the other hand will cause additional rerender,
    // since fetch is async and state is set after request completes.
    this.setState({ name: 'Andrej '});
  })
}

。
。
。
2.在哪里调用API调用？

componentWillMount () {
  // Is triggered on server and on client as well.
  // Server won't wait for completion though, nor will be able to trigger re-render
  // for client.
  fetch('...')
}

componentDidMount () {
  // Is triggered on client, but never on server.
  // This is a good place to invoke API calls.
  fetch('...')
}

如果要在服务器上进行渲染，并且组件确实需要数据进行渲染，则应在组件外部获取（并等待完成），然后通过prop传递数据，然后将组件渲染为字符串。