Question

我正在学习docs的反应，但不确定此示例中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中，派生类如果有构造函数则必须调用constructor() {}。在react中，所有组件都从Component类扩展。

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

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

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

super()

在访问this之前，您还需要致电this，因为super()在调用this.state = ...之前未初始化。

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

您还可以使用bind将构造函数内的类方法绑定。实际上，在构造函数中绑定方法更好，因为它们只会被创建一次。否则，如果您调用render或使用箭头函数将方法绑定到构造函数之外的任何位置（如this.props方法中），它实际上最终会在每个渲染上创建函数的新实例。详细了解here。

如果要在构造函数中使用super，则需要使用props作为参数调用constructor(props) { super(props); this.state = {count: props.initialCount}; }：

this.props

如果不这样做，那么this.props在构造函数中是未定义的。但是，您仍然可以在构造函数之外的类中的任何其他位置访问BGRBGRBGRBGRBGRBGRBGRBGRBGRBGRBGRBGR... ^ start here fread(&pixel.b, 1, 1, fp); fread(&pixel.g, 1, 1, fp); fread(&pixel.r, 1, 1, fp); BGRBGRBGRBGRBGRBGRBGRBGRBGRBGRBGRBGR... ^ now here fseek(fp, -3, SEEK_CUR); BGRBGRBGRBGRBGRBGRBGRBGRBGRBGRBGRBGR... ^ now here fwrite(&pixel.b, 1, 1, fp); fwrite(&pixel.g, 1, 1, fp); fwrite(&pixel.r, 1, 1, fp); bgrBGRBGRBGRBGRBGRBGRBGRBGRBGRBGRBGR... ^ now here fseek(fp, 1, SEEK_CUR); bgrBGRBGRBGRBGRBGRBGRBGRBGRBGRBGRBGR... ^ now here - skipping the blue part of the second pixel?，而无需在构造函数中对其执行任何操作。

Answer 2

使用javascript中的super()关键字来调用父类的方法。通常在构造函数中使用它来调用父构造函数。例如：

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();

在此示例中，我们有一个Dog类，其中extends是Animal类。 Dog类两次使用super关键字。第一次出现在构造函数中，当在构造函数中使用super()时，它将调用父类构造函数。因此，我们必须给出age属性作为参数。现在，狗成功拥有了年龄属性。

我们还可以在构造函数之外使用super()来访问父级的“类”（即原型）属性和方法。我们在Dog类的logAgeDog函数中使用此函数。我们使用以下代码：

super.returnAge();

您应该将其读为：

Animal.returnAge();     // superClass.returnAge()

为什么在React中需要这个？

在实现构造函数时，仅需要在React中使用super()关键字。您必须执行以下操作：

constructor(props) {
  super(props);
  // Don't call this.setState() here!
}

名为Component的父类需要自行进行一些初始化才能使React正常工作。如果您在super(props)中没有this.props调用Component的情况下实现构造函数，则该undefined可能会导致错误。

super（）做什么没有任何参数？

2 个答案:

为什么在React中需要这个？