更新： componentWillMount 将很快被弃用。

引用@Dan Abramov

在React 的未来版本中，我们预计 componentWillMount在某些情况下会触发不止一次，所以你应该使用 componentDidMount 来处理网络请求。

在这里阅读更多。

更新 - 2018 年 5 月
有一项新功能可用于在称为异步渲染的工作进度中做出react。
作为react，v16.3.2这些方法使用起来并不“安全”：

• 组件将挂载
• 组件将接收props
• 组件将更新

你可以在文档中阅读更多关于它的信息。

作为一般规则，根本不要使用 componentWillMount（如果您使用 es6class语法）。改用该constructor方法。
这种生命周期方法适用于同步状态初始化。
componentDidMount另一方面有利于异步状态操作。

为什么？
好吧，当您在constructor/ 中执行异步请求时，componentWillMount您会在render调用之前执行此操作，到异步操作完成时，该render方法很可能已经完成并且在此阶段设置“初始状态”没有意义，是吗？
我不确定这是您的情况，但开发人员希望异步启动状态的大多数情况componentWillMount是为了避免第二次render调用。但是你无法避免它，就像上面提到的那样，render在异步操作完成之前无论如何都会触发。
因此，调用异步操作的最佳时间是在render已调用并安装组件之后（您可以安装null或空<div/>) 然后获取您的数据，设置状态并使其分别重新渲染。

componentDidMount 是调用获取数据的最佳位置，原因有二：

1. UsingcomponentDidMount清楚地表明在初始渲染之后才会加载数据。您需要正确设置初始状态，以免获得undefined导致错误的状态。

2. 如果您需要在服务器上呈现您的应用程序，componentWillMount将被调用两次（在服务器上和在客户端上再次调用），这可能不是您想要的。放入数据加载代码componentDidMount将确保仅从客户端获取数据。通常，您不应向componentWillMount.

根据我的理解，最大的原因之一与为阅读代码的开发人员设置正确的期望有关。

如果我们使用componentWillMount它很容易认为 fetch 有时间发生，然后组件“确实”挂载，然后第一次渲染将发生。但事实并非如此。如果我们执行异步调用（例如使用 Promise 的 API 调用），组件将render在 fetch 返回并设置组件状态（或更改 Redux 状态，或其他任何事情）之前实际运行。

如果我们转而使用componentDidMount，那么很明显，该组件将呈现至少一次，你回来任何数据之前（因为部分已经没安装）。因此，通过扩展，很明显我们必须以某种方式处理初始状态，以便组件不会在第一次（“空”）渲染时中断。

组件安装生命周期是

• 构造函数()
• componentWillMount() /UNSAFE_componentWillMount()(react 16)
• 使成为（）
• 组件DidMount()

Constructor和componentWillMount都在负责页面渲染的 render() 调用之前调用。

由于异步调用，这里的 State 初始化是在 Constructor 中完成的，而 api 在 componentDidMount 中被调用。

当构造函数不存在时，ComponentWillMount 可以很好地初始化 ES6 之前的状态。但是现在 ComponentWillMount 一无是处，React 团队在 React 17 之后开始考虑它。

除了上述之外，react 已经转移到 react纤维架构，为了避免不必要的重新渲染和提高性能，react 决定远离 componentWillMount、componentWillReciveProps 和 componentWillUpdate 方法。