为什么不应该使用componentWillMount？

Question

解雇服务器调用以获取componentWillMount生命周期方法中的数据是一种不好的做法？

为什么最好使用componentDidMount。

Answer 1

引用@Dan Abramov

  

在未来的React版本中，我们预计componentWillMount会在某些情况下多次触发，因此您应该将componentDidMount用于网络请求。

了解更多here。

Answer 2

更新 - 可能/ 2018年
在async rendering的工作进度中有一个新功能可以做出反应 至于反应v16.3.2，这些方法使用起来并不“安全”：

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

您可以在docs中了解更多相关信息。

作为一般规则don't use componentWillMount（如果您使用es6 class语法）。请改用constructor方法 这种生命周期方法适用于同步状态初始化 另一方面，componentDidMount适用于异步状态操作。

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

Answer 3

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

1. 使用componentDidMount表明在初始渲染之后才会加载数据。您需要正确设置初始状态，这样就不会出现导致错误的undefined状态。

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

Answer 4

我理解它的方式，其中一个最大的原因是为开发人员设置正确的期望阅读代码。

如果我们使用componentWillMount，很容易认为fetch有时间发生，那么组件“确实”挂载，然后第一次渲染就会发生。但事实并非如此。如果我们进行异步调用（比如使用Promises进行API调用），组件将在fetch返回并设置组件状态（或更改Redux状态，或者更新状态）之前实际运行render。

如果我们改为使用componentDidMount，那么很明显该组件在返回任何数据之前至少会呈现一次（因为组件已经 挂载）。因此，通过扩展，我们也必须以某种方式处理初始状态，以便组件不会在第一个（“空”）渲染中断开。

Answer 5

组件安装生命周期

• 构造（）
• componentWillMount（）/ UNSAFE_componentWillMount（）（反应16）
• render（）
• componentDidMount（）

构造函数和 componentWillMount 都在render（）调用之前调用，该调用负责页面呈现。

此处初始化状态在Constructor中完成，并且由于异步调用而在componentDidMount中调用api。

当构造函数不存在时，ComponentWillMount很适合在ES6 之前初始化状态。但是现在ComponentWillMount一无所获，反应团队在做出反应17之后就会想到它。

另外到上面，反应已经转移到反应fiber architecture，以避免不必要的重新渲染和提高性能，反应已决定远离componentWillMount，componentWillReciveProps和componentWillUpdate方法。