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('...')
} 

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

组件挂载

现在props 和 state 都设置好了，我们终于进入了生命周期方法的领域

这意味着 React 期望state可用，因为render接下来将调用函数，并且如果缺少任何提到的状态变量，代码可能会中断，这可能发生在ajax.

构造函数

这是您定义的地方。

因此调用 ajax 不会更新任何状态的值，因为 ajax 是异步的并且构造函数不会等待响应。理想情况下，您应该使用构造函数来设置默认/初始值。

理想情况下，这些函数应该是纯函数，仅取决于参数。带来ajax给功能带来副作用。

是的，函数依赖state和使用this.setState会给你带来这样的问题（你在状态中设置了值，但在下一个调用的函数中状态中缺少值）。

这使代码变得脆弱。如果您的 API 非常快，您可以将此值作为参数传递，并在您的组件中检查此参数是否可用。如果是，请用它初始化您的状态。如果没有，请将其设置为默认值。此外，在 ajax 的成功功能中，您可以检查ref该组件的。如果存在，则呈现组件，您可以调用它的stateusingsetState 或任何setter（首选）函数。

还请记住，当您说API 调用非常快时，您的服务器和处理可能处于最佳速度，但您永远无法确定网络。

如果您只在第一次运行时只需要数据，并且您对此感到满意。您可以通过调用回调同步 setState。

例如：

componentWillMount(){
    this.setState({
                sessionId: sessionId,                
            }, () => {
                if (this.state.hasMoreItems = true) {
                    this.loadItems()   // do what you like here synchronously 
                }
            });
}