javascript - 基于 React 类的组件构造函数的澄清

Question

我正在回顾一些 React Js 基础知识，我需要一些关于在基于 React 类的组件中使用构造函数方法的说明。我的正常做法是声明一个基于类的组件并定义状态而不使用构造函数，如下所示:

import React, { Component } from 'react';

export class Testing extends Component {
  state = {
    example: "Hello World!!!"
  }

  render() {
    return <div>
      {this.state.example}
    </div>;
  }
}

export default Testing;

由于状态在没有(看似)毫无意义的构造函数的情况下非常容易使用，所以我开始问自己构造函数的用途是什么。只是为了澄清我所说的构造函数的含义，它是当您像这样而不是上面的示例声明状态时:

constructor(props) {
  super(props)

  this.state = {
    example: "Hello World!!!"
  }
}

我在react文档中发现了使用构造函数是最佳实践的建议，但它没有说明原因。经过一番搜索后，我找到了一个资料来源，建议构造函数可以让您访问 Prop 。我对此进行了测试，并确实看到了构造函数如何提供对 props 的访问；但是，该类可以在不使用构造函数的情况下访问 props，只需声明 this.props.myTest 即可。我也通过在父组件中定义 props 并将它们向下钻取到子组件来测试这一点。我可以使用 this.props.myTest 语句很好地访问 props，无需构造函数。所以我的问题是，“构造函数具体做什么，什么时候有必要(或者是否有必要)？”

Answer 1

“什么时候需要构造函数？”:

如果不需要的话，构造函数不是必需的。

您可能需要一个构造函数，例如如果您需要将方法绑定(bind)到类实例(以便 this 保持指向 类实例(如果您将函数传递给其他执行上下文):

export class Testing extends Component {
  constructor( props ) {
    super( props );
    this.myMethod = this.myMethod.bind( this );
  }
  
  myMethod(){
    console.log( this.props ); 
  }

  render() {
    return <button onClick={ this.myMethod }>
      click
    </button>;
  }
}

“构造函数具体做什么”？

JavaScript 中的构造函数“创建实例”。所以如果没有构造函数，就不会有实例。 但本质上总是存在一个构造函数，即使您没有专门定义一个构造函数。

您可以定义构造函数来覆盖默认构造函数或添加一些要运行的额外逻辑 除了 super 构造函数之外。

在 React 中访问 this.props

在javascript中，如果不调用super(props)，则无法访问this.props。

请注意，构造函数参数 props 和实例属性 this.props 是不同的“事物”。 现在让我们重命名构造函数参数，以使其更加明显:

class SuperClass {
  constructor( constructorArguments ) {
    this.props = constructorArguments;
  }
}

class DerivedClass extends SuperClass {
  constructor( props ) {
    super();                   // <-- call the SuperClass constructor
  }
  method(){
    console.log( this.props ); // <-- this.props is obviously never defined
  }
}

const instance = new DerivedClass('some props');
instance.method();

但是React无论如何都会“采取措施”分配this.props， 即使 super(props) 从未被调用过。

但这会发生在稍后(构造函数完成之后)， 因此您可以稍后在其他方法中访问 this.props，但不能在构造函数内访问:

export class Testing extends Component {

  constructor( constructorArguments ) {
    super();                   // <-- super() is called without arguments
    console.log( this.props ); // <-- this.props is undefined
  }

  render() {
    console.log( this.props ); // <-- React sorted it out, now this.props is available 
    return null;
  }
}

如果将构造函数参数传递给父类(super class)构造函数，则可以访问 this.props 在构造函数内部:

constructor( constructorArguments ) {
  super( constructorArguments );   // <-- super() is called with arguments
  console.log( this.props );       // <-- this.props is available
}

React recommends to call super(props)无论如何，以避免在以后的更改中引入错误。 我可能会补充一点，这是很少的额外代码，不会造成任何损害。

定义状态

class fields并不总是可用，所以你必须在里面定义状态 构造函数，as the React example shows (如 this.state = { value: 'value' })。

我个人认为现在使用类字段可能没问题，但我总是 倾向于遵循官方文档，即使它可能已经过时。还有 可能有我不知道的影响。

另请参阅:is-it-better-to-define-state-in-constructor-or-using-property-initializers