在构造函数中获取数据

Question

在Javascript类的constructor()中获取数据是一个好的实践吗？

例如，在React类的constructor()中，我发现每个教程都在componentDidMount()中获取数据，但没有人解释为什么我们不能在constructor()中获取数据。

这个问题涉及到所有Javascript类，不仅仅是react。

- Michaell94

---

componentDidMount 有许多不同的优点。例如，构造函数将在服务器端渲染时运行，但 componentDidMount 不会。 - Tholle

Answer 1

构造函数在组件挂载之前被调用（如#constructor doc中所述：https://reactjs.org/docs/react-component.html）。

回答你的问题，解释在于react组件的生命周期和状态改变时需要重新渲染。在构造函数中进行异步调用可能会在组件挂载之前触发setState。

在构造函数中做异步调用会干扰重新渲染，如果你在构造函数中调用setState，你的组件有时将不会重新渲染。

来自文档：

您不应该在constructor()中调用setState()。相反，如果您的组件需要使用局部状态，则直接在constructor中将初始状态赋值给this.state：

避免在构造函数中引入任何副作用或订阅。对于这些用例，请改用componentDidMount()。

- Quentin C

Answer 2

类构造函数是一个函数，仅在DOM中第一次初始化函数时调用。 简单来说，只有当我们使用new关键字实例化一个类时，它的构造函数才会被调用。 现在，如果我们在JavaScript类的构造函数中获取数据:

1. 如果像React这样获取的数据负责与DOM（UI）交互，则会失败，因为DOM仅在组件挂载后准备好，由componentDidMount保证。
2. 当组件重新渲染时，数据获取函数也不会被调用，因为构造函数只会被调用一次，因此数据不会更新到UI（DOM）。

构造函数通常用于默认值分配和声明与类相关的属性。

- Deepak Uniyal

Answer 3

ECMAScript2015 引入了类(class)。它们主要是 JavaScript 基于原型的继承的语法糖。React 有一个名为 Component 的类类型，它带有生命周期方法和其他一些好处，你可以在 这里 了解更多详情。

总体来说，在生命周期方法 componentDidMount 中获取数据是最佳实践。在调用此生命周期方法时，组件需要一个放置已检索数据的位置，并且可以确保至少调用了一次 render() 。

- Mark