javascript - 如果没有任何参数，super() 会做什么？

Question

我正在从 docs 学习 React ，但不确定 super() 在此示例中的作用。通常，它不是采用传递的参数来创建一个新实例，然后调用 React.Component 的构造函数方法将这些参数合并到该实例中吗？如果没有任何参数，它会做什么？

class LikeButton extends React.Component {
  constructor() {
    super();
    this.state = {
      liked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({liked: !this.state.liked});
  }
  render() {
    const text = this.state.liked ? 'liked' : 'haven\'t liked';
    return (
      <div onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </div>
    );
  }
}

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

Answer 1

在 ES6 中，如果派生类有构造函数，则必须调用 super()。在 React 中，所有组件都继承自 Component 类。

实际上并不需要每个 ES6/react 类都有一个构造函数。如果没有定义自定义构造函数，它将使用 default constructor 。对于基类来说，它是:

constructor() {}

对于派生类，默认构造函数是:

constructor(...args) {
  super(...args);
}

您还需要在访问 this 之前调用 super()，因为 this 直到 super() 才初始化 code> 被调用。

在 React 中使用自定义构造函数有几个原因。一是您可以使用 this.state = ... 在构造函数中设置初始状态，而不是使用 getInitialState 生命周期方法。

您还可以使用 this.someClassMethod = this.someClassMethod.bind(this) 来绑定(bind)构造函数内的类方法。实际上最好在构造函数中绑定(bind)方法，因为它们只会创建一次。否则，如果您调用 bind 或使用箭头函数在构造函数之外的任何位置绑定(bind)方法(例如在 render 方法中)，它实际上最终会创建该函数的新实例在每个渲染上。了解更多相关信息 here .

如果要在构造函数中使用 this.props，则需要以 props 作为参数调用 super:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
}

如果不这样做，则构造函数中的 this.props 未定义。但是，您仍然可以在构造函数之外的类中的任何其他位置访问 this.props，而无需在构造函数中对其执行任何操作。