从React到Redux：掌握super()和super(props)的奥秘

2024-02-03 17:34:21

理解React中的super()和super(props)

在React中，super()和super(props)是两个非常重要的，它们在类组件中扮演着至关重要的角色。这两个关键字与类的继承和父类方法的调用紧密相关，对于理解React组件的运作方式非常重要。

1. super()：

super()关键字用于调用父类构造函数。它必须在子类构造函数的第一行被调用。super()的作用是将父类的方法和属性继承到子类中，并初始化子类实例。

class ParentComponent {
  constructor(props) {
    // 父类构造函数
  }

  greet() {
    // 父类方法
  }
}

class ChildComponent extends ParentComponent {
  constructor(props) {
    super(props); // 调用父类构造函数
  }

  render() {
    return (
      <div>
        <h1>{this.props.message}</h1>
        <button onClick={this.greet}>Say Hello</button>
      </div>
    );
  }
}

在上面的例子中，ChildComponent继承自ParentComponent。在ChildComponent的构造函数中，我们调用super(props)来调用ParentComponent的构造函数，并将props传递给父类构造函数。这样，ChildComponent就继承了ParentComponent的方法和属性。

2. super(props)：

super(props)关键字用于调用父类方法。它可以在子类的方法中被调用，以访问父类的方法并重写父类的方法。

class ParentComponent {
  greet() {
    console.log('Hello from ParentComponent');
  }
}

class ChildComponent extends ParentComponent {
  greet() {
    super.greet(); // 调用父类方法
    console.log('Hello from ChildComponent');
  }

  render() {
    return (
      <div>
        <button onClick={this.greet}>Say Hello</button>
      </div>
    );
  }
}