React 中 super() 和 super(props) 的区别

在 React 的组件中，很常见会使用 super() 和 super(props) 这两种方式来调用父类的构造函数。那么这两种方式有什么区别呢？本文将详细介绍这两种方式的不同。

1. super()

首先，我们来了解一下 super() 的作用。在 ES6 的类中，如果一个子类需要访问父类的构造函数，那么必须在子类的 constructor() 中调用 super()，这样才能正确地继承父类的方法和属性。例如：

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`My name is ${this.name}, I am ${this.age} years old.`);
  }
}

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }

  bark() {
    console.log('Woof woof!');
  }
}

const myDog = new Dog('Buddy', 3, 'Golden Retriever');
myDog.sayHello();  // 输出 My name is Buddy, I am 3 years old.
myDog.bark();      // 输出 Woof woof!

在上面的代码中，我们定义了一个 Animal 类和一个 Dog 类，Dog 继承自 Animal。在 Dog 的构造函数中调用了 super(name, age)，这样就能正确地继承 Animal 类的属性和方法。

在 React 中，如果一个组件需要访问父类的构造函数，也需要在子类的 constructor() 中调用 super()。例如：

class Button extends React.Component {
  constructor() {
    super();

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me!
      </button>
    );
  }
}

在上面的代码中，我们定义了一个 Button 组件，继承自 React.Component。在 Button 的构造函数中调用了 super()，这样就能正确地继承 React.Component 的属性和方法。

2. super(props)

接下来，我们来了解一下 super(props) 的作用。在 React 中，如果一个组件需要在构造函数中访问 this.props，那么需要在子类的 constructor() 中调用 super(props)，这样才能正确地访问 this.props。例如：

class Greeting extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: props.name
    };
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}!</h1>
        <p>Welcome to my website.</p>
      </div>
    );
  }
}

const App = () => {
  return (
    <Greeting name="John" />
  );
}

在上面的代码中，我们定义了一个 Greeting 组件，需要访问 this.props.name。在 Greeting 的构造函数中调用了 super(props)，这样才能正确地访问 this.props。

需要注意的是，虽然在代码中 super(props) 会在 this.props 之前调用 super()，但实际上 super(props) 并没有改变 this.props 的默认行为。只是在构造函数中访问 this.props 时，必须使用 super(props)。

总结

综上所述，super() 和 super(props) 的区别在于：

• super() 用于访问父类的构造函数，继承父类的属性和方法。
• super(props) 用于在构造函数中访问 this.props。

在 React 中，如果一个组件同时需要访问父类的构造函数和 this.props，那么需要在子类的 constructor() 中调用 super(props)，然后再调用 super()，例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    super();

    // ...
  }

  // ...
}

这样才能同时正确地继承父类的属性和方法，以及访问 this.props。