在构造函数中获取数据

Question

在javascript类constructor()中获取数据是一种很好的做法吗？

例如。在反应类constructor()中，我找到的每个教程都在componendDidMount()中获取数据，但是没有人为什么我们不能在constructor()中这样做。

问题涉及到javascript类，而不仅仅是react。

Answer 1

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

要回答您的问题，解释在于反应组件的生命周期以及在状态发生变化时需要重绘。通过在构造函数中执行异步调用，可以在装入组件之前触发setState。

在构造函数中执行异步调用会弄乱重新呈现，如果在构造函数中调用setState，则有时不会重新呈现组件。

来自doc：

您不应该在构造函数（）中调用setState（）。相反，如果您的组件需要使用本地状态，请直接在构造函数中将初始状态分配给this.state：

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

Answer 2

类构造函数是仅在函数首次在DOM中初始化时才调用的函数。在简单的语言行为中，只有当我们使用new关键字实例化一个类时，才会调用其构造函数。现在，如果我们在Javascript Classes构造函数中获取数据：

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

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

Answer 3

Javascript introducted classes in ECMAScript2015。它们主要是Javascript基于原型的继承的语法糖。 React有类型的Component，它带有生命周期方法和其他一些你可以阅读更多关于here的好东西。

一般来说，最好在生命周期方法componentDidMount中获取数据。在检索到数据后，您的组件需要放置数据的位置，并且当调用此生命周期方法时，可以确保render()至少被调用一次。