何时使用componentWillMount而不是componentDidMount

好

componentWillMount 在初始渲染之前运行。但建议不要在此方法中进行任何订阅和状态设置。如果你想在渲染之前使用它，可以使用组件的构造函数。

componentWillMount runs before initial rendering. But it is not advised to do any subscriptions and state setting in this method. If you want to some of that before rendering you can use the constructor of the component.

在安装发生之前立即调用componentWillMount（）。在render（）之前调用
，因此在此方法中同步调用setState（）
将不会触发额外的渲染。通常，我们
建议使用构造函数（）。避免在此方法中引入任何
副作用或订阅。对于这些用例，请改用
componentDidMount（）。

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead. Avoid introducing any side-effects or subscriptions in this method. For those use cases, use componentDidMount() instead.

可能的用例：

• 设置组件的初始状态（但你可以使用构造函数）


• 在服务器端渲染中运行服务器端代码以获取初始状态


• 获取数据并设置初始状态

componentDidMount 在初始渲染之后运行，并在Component最终完成装载DOM时进行标记。因此，您可以使用它来设置订阅和侦听器，甚至可以将数据提取到setState。

componentDidMount however runs after the initial rendering and marks when the Component has finnally finished mounting the DOM. So you can use this to set up subscriptions and listeners and even fetch data to setState.

componentDidMount（）在组件出现后立即调用
已挂载。需要DOM节点的初始化应该放在这里。如果
需要从远程端点加载数据，这是
实例化网络请求的好地方。此方法是设置
任何订阅的好地方。如果您这样做，请不要忘记取消订阅
componentWillUnmount（）。在此方法中调用setState（）将触发
额外渲染，但它将在浏览器更新
屏幕之前发生。这保证了即使在这种情况下render（）将被称为
两次，用户也不会看到中间状态。请谨慎使用
这种模式，因为它经常会导致性能问题。
但是，对于像模态和工具提示这样的情况，当你需要在渲染某个大小或位置依赖于
的东西之前测量DOM节点时，它可能是必要的。

componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. This method is a good place to set up any subscriptions. If you do that, don’t forget to unsubscribe in componentWillUnmount(). Calling setState() in this method will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

可能的用例：

• 设置事件监听器因为组件是已挂载


• 获取数据和setState


• 设置依赖于DOM的第三方库

BIG DIFFERENCE ：在服务器端呈现只有 componentWillMount 在服务器端运行。因此，如果您曾经使用过SSR，请确保 componentDidMount

BIG DIFFERENCE: In Server Side Rendering only componentWillMount runs in the server side. So if you're ever using SSR make sure you don't have any server side code in componentDidMount

目前您可以（您决定是否应该）使用两者来设置初始状态。通常我看到大多数人都使用componentDidMount，但需求会发生变化，你可能会发现使用componentWillMount的一些用例。

Currently you can (you decide if you should) use both to setup initial state. Generally I've seen most people use componentDidMount for this but requirements change and you might find some use case for using componentWillMount.

然而，有关于弃用生命周期方法的讨论。 此处

There has been however talks about deprecating the lifecycle method. here