super（）在没有任何参数的情况下做什么？

Question

我正在从文档中学习反应，但不确定在这个例子中超级（）做什么。通常，它不需要传递给创建新实例的参数，然后调用React吗？组件的构造函数方法将这些参数合并到实例中？没有任何争论它是做什么的？

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

JavaScript中的super关键字用于调用父类的方法。本身，super（）在构造函数中用于调用父构造函数。例如：

js prettyprint-override">class Animal {
  
  constructor(age) {
    console.log('Animal being made');
    this.age = age;
  }
  
  returnAge() {
    return this.age;
  }
  
}

class Dog extends Animal {

  constructor (age){
    super(age);
  }
  
  logAgeDog () {
    console.log(`This dog is: ${ super.returnAge()} years old`);
  }
  
}

const dog = new Dog(5);


console.log(dog);

dog.logAgeDog();

Answer 2

在ES6中，如果派生类具有构造函数，则必须调用super（）。在react中，所有组件都从组件类扩展而来。

实际上，并不需要为每个ES6/反应类都提供构造函数。如果没有定义自定义构造函数，它将使用默认构造函数。对于基类，它是：

constructor() {}

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

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

在访问this之前，您还需要调用Super（），因为在调用Super（）之前，this不会初始化。

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

还可以使用this.someClassMethod=this.someClassMethod.bind（this）绑定构造函数内的类方法。实际上最好在构造函数中绑定方法，因为它们只创建一次。否则，如果调用bind或使用箭头函数在构造函数之外的任何位置绑定方法（如render方法），它实际上会在每次渲染时创建函数的新实例。在这里阅读更多关于这方面的信息。

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

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

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