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

Question

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

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

根据 Mozilla , super 允许你在构造函数中使用 this 。是否有任何其他原因使用独立的 super (我知道 super 也允许您访问父类的方法)但是 React 是否有任何其他用例只是调用super() 本身？

Answer 1

super() 将调用其父 类的构造函数。当您需要从父类访问某些变量时，这是必需的。

在 React 中，当您使用 props 调用 super 时，React 将通过 this.props 使 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'}))

希望这对您有所帮助!