用React组件理解构造函数

构造函数是在从类创建对象期间自动调用的方法。 它可以处理您的初始设置，例如默认对象的某些属性，或者检查传入的参数。 简单地说，构造函数有助于构造事物。

在 React 中，构造函数也不例外。 它可用于将事件处理程序绑定到组件和/或初始化组件的本地状态。 constructor() 方法在组件挂载之前被触发，并且像 React 中的大多数东西一样，在使用它们时应该遵循一些规则。

在使用 this.props 之前调用 super(props)

由于构造函数的性质，一开始 this.props 对象不可用并且可能导致错误。 这个构造函数会抛出一个错误：

constructor() {
  console.log(this.props);
}

相反，我们从 constructor() 中获取 props 值并将其传递给 super() 方法：

constructor(props) {
  super(props);
  console.log(this.props);
}

当你调用 super() 方法时，它会调用父类的构造函数，在 React 组件的情况下是 React.Component。

切勿在 constructor() 内部调用 setState()

组件的构造函数是设置组件初始状态的理想场所。 不要像在类中的其他方法中那样使用 setState() ，而是需要直接设置初始状态：

constructor(props) {
  super(props);

  this.state = {
    reptile: 'alligator',
    color: '#008f68',
  };
}

构造函数是唯一应该像这样直接分配本地状态的地方。 我们组件中的任何其他地方，你应该依赖 setState() 代替。

避免将值从 this.props 分配到 this.state

在构造函数中设置初始组件状态时，应尽量避免从属性中设置值。

当你做这样的事情时：

constructor(props) {
  super(props);

  this.state = {
    reptile: props.reptile,
  };
}

您稍后将无法运行 setState() 并更新属性。

您可以通过调用 this.props.reptile 在代码中直接引用该属性，而不是将属性直接分配给状态。

将事件全部绑定在一个地方

不是真正的规则或陷阱，但值得注意的是，您可以轻松地在构造函数中绑定事件处理程序：

constructor(props) {
  super(props);

  this.state = {
    // Sets that initial state
  };

  // Our event handlers
  this.onClick = this.onClick.bind(this);
  this.onKeyUp = this.onKeyUp.bind(this);
  // et cetera...
}

避免在 constructor() 中使用副作用或订阅

我明白了，您刚刚构建了一个新组件，您希望它从 API 中提取数据并将值设置为状态。 在组件安装之前，在构造函数中执行此操作非常有意义，对吧？

错误的！

对于会更新状态和其他副作用的订阅，您应该将逻辑放在 componentDidMount() 中，它会在组件安装后立即触发，如果您更新状态不会给您带来任何麻烦在里面。

你甚至需要一个构造函数吗？

构造函数非常方便，但有时它太多了。 如果您不打算在组件中维护状态并且不绑定任何事件处理程序，则根本不需要定义构造函数。

事实上，如果您不需要状态或事件处理程序，您可能根本不需要基于类的组件。 您可以节省一点额外的打字，只需使用功能组件。