在构造函数中获取数据

Question

在javascript类constructor()中获取数据是一种好习惯吗？

例如在react类constructor()中，我发现的每个教程都在componendDidMount()中获取数据，但是没有人解释为什么我们无法在constructor()中进行操作。

问题完全与javascript类有关，而不仅仅是react。

Answer 1

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

要回答您的问题，其解释在于React组件的生命周期以及状态改变时需要重画的需求。通过在构造函数中进行异步调用，可以在安装组件之前触发setState。

如果在构造函数中调用setState，则在构造函数中进行异步调用会导致重新渲染，并且有时组件不会重新渲染。

来自文档：

  

您不应在构造函数（）中调用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()已被调用至少一次。