在React构造函数中调用super()有什么作用？

Question

从文档学习React 并遇到了这个例子:

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
  ...
}

根据Mozilla,super允许您this在构造函数中使用.有没有其他理由单独使用一个站点super(我知道也super允许你访问父类的方法)但是React是否有任何其他只能super()自己调用的用例？

Answer 1

super()会打电话给constructor它的parent班级.当您需要从父类访问某些变量时,这是必需的.

在React中,当你super用道具打电话时.React将props通过组件提供this.props.见下面的例子2

无 super()

class A {
  constructor() {
    this.a = 'hello'
  }
}

class B extends A {
  constructor(){
    console.log(this.a) //throws an error
  }
}

console.log(new B())

同 super()

class A {
  constructor(props) {
    this.props = props
  }
}

class B extends A {
  constructor(props) {
    super(props)
    console.log(this.props)
  }
}

console.log(new B({title: 'hello world'}))

希望这可以帮助!

Answer 2

super()仅当反应组件具有构造函数时才在反应组件内部调用.例如,以下代码不需要super:

class App extends React.component {
    render(){
        return <div>Hello { this.props.world }</div>;
    }
}

但是,如果我们有一个构造函数,则super()必须:

class App extends React.component {
    constructor(){
        console.log(this) //Error: 'this' is not allowed before super()

    }
}

this之前不允许的原因super()是因为未被调用this是未初始化的super().但是即使我们没有使用,this我们也需要super()一个构造函数内部因为ES6 class constructors MUST call super if they are subclasses.因此,super()只要你有一个构造函数,你就必须调用.(但是子类不必具有构造函数).

super(props)如果我们必须使用this.props,我们在构造函数内部调用,例如:

class App extends React.component{
    constructor(props){
        super(props);
        console.log(this.props); // prints out whatever is inside props

    }
}

我希望我能说清楚.