Javascript 为什么不应使用componentWillMount？

在componentWillMount生命周期方法中触发服务器调用以获取数据是一种糟糕的做法吗

---

以及为什么使用componentDidMount更好。

更新：componentWillMount将很快发布

---

举出

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

---

阅读更多。

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

如果我们使用

componentWillMount

的话，很可能会认为获取有时间，然后组件“确实”挂载，然后第一次渲染就会发生。但事实并非如此。如果我们执行异步调用（如带承诺的API调用），组件将实际运行

render

，然后fetch才能返回并设置组件状态（或更改Redux状态，等等）

---

如果我们改为使用

componentDidMount

，那么很明显，在您返回任何数据之前，组件将至少呈现一次（因为组件已经装载）。因此，通过扩展，我们还必须以某种方式处理初始状态，以使组件在第一次（“空”）渲染时不会中断。

componentDidMount

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

使用

componentDidMount

可以清楚地表明，只有在初始渲染之后才会加载数据。您需要正确设置初始状态，这样您就不会得到导致错误的

undefined

状态

如果您需要在服务器上呈现应用程序，

componentWillMount

将被调用两次（在服务器上，在客户端上），这可能不是您想要的。将数据加载代码放入

componentDidMount

将确保仅从客户端获取数据。一般来说，您不应该将副作用添加到

组件willmount

---

更新-2018年5月
在工作进程中，react有一个新功能，名为。
从react

v16.3.2

开始，这些方法不“安全”使用：

• 组件将安装
• 组件将接收道具
• 组件将更新

你可以在网站上阅读更多关于它的信息

---

一般来说，

组件将完全挂载

（如果使用es6

类

语法）。请改用

构造函数
方法。

此生命周期方法适用于同步状态初始化。

另一方面，
componentDidMount
有利于异步状态操作

为什么？

嗯，当您在
构造函数中执行异步请求时，
/
组件将挂载
您在调用
呈现
之前执行该请求，到异步操作完成时，
呈现
方法很可能已经完成，并且在这个阶段没有设置“初始状态”的点，是吗？

我不确定这是否是您的情况，但开发人员希望在
componentWillMount
中异步启动状态的大多数情况都是为了避免第二次
render
调用。但是您无法避免它，可以吗？正如上面提到的那样，
render
无论如何都会在异步操作完成之前触发。

因此，调用异步操作的最佳时间是在调用
呈现
并装入组件（您可以装入
null
或空的
）之后，然后获取数据，设置状态并分别重新呈现
 组件安装生命周期为


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

构造函数和组件都将在render（）调用之前装载这两个调用，该调用负责页面呈现

这里，由于异步调用，初始化状态在构造函数中完成，api在componentDidMount中调用

当构造函数不存在时，ComponentWillMount在ES6之前的初始化状态良好。但现在组件Willmount毫无用处，react团队在react 17之后考虑这个问题

此外到上面，react已移动到react，为了避免不必要的重新渲染并提高性能，react已决定从componentWillMount、ComponentWillReceiveProps和componentWillUpdate方法中移除。
正确，使用异步调用示例的解释给出了不使用componentWillMount的充分理由。谢谢，伙计，如果我的问题很愚蠢的话，我很抱歉。如果我在componentWillMount中获取数据，即使它没有破坏第一次呈现的组件，“componentWillMount”中的fetch data函数是否会比fetch data componentDidMount函数调用得早一点，从而导致我们获取数据的速度快一点吗？@DuyHưngandrogynetor No，因为你什么时候得到数据并不重要，重要的是你什么时候能用它做点什么。由于数据是在异步操作中处理的，因此只有在完成所有同步工作后，数据才会运行。所以我怀疑这有什么不同。@Sagivb.g：是的，非常感谢，所以，从构造函数、安装到渲染结束的所有过程都是同步操作，对吗？这些将在异步操作之前进入调用堆栈？@DuyHưngandrogynetor所有用户的代码（不是react的代码，例如
setState
）都是同步的。是的，我们的代码将在异步代码之前运行到完成。当然，除非我们使用异步API，如setTimeout promise等。这是我以前读过的内容，但从来没有一个合理的理由解释它为什么会被多次调用。这是一个仅链接的答案，没有解释问题的“为什么”上下文。任何其他的