Что делает вызов super() в конструкторе React?

Учимся реагировать из документов и наткнулся на этот пример:

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

По словам Mozilla, super позволяет использовать this в конструкторе. Есть ли какая-либо другая причина для использования отдельного super (я знаю, что super позволяет вам получать доступ и к методам родительского класса), но есть ли в React какой-либо другой вариант использования простого вызова super()?

Ответ 1

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

    }
}

Надеюсь, я смогу пояснить.

Ответ 2

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

Ответ 3

При реализации конструктора для React.Component subclass вы должны вызывать super(props) перед любым другим оператором. В противном случае this.props будет undefined в конструкторе, что может привести к ошибкам.

Ответ 4

Давайте сделаем это ясно. Чтобы использовать это ключевое слово, мы должны использовать перед ним ключевое слово super. что?, да !, Super используется для вызова конструктора родительского класса. Теперь у вас есть вопрос: зачем нам вызывать родительский конструктор? Ответ заключается в инициализации значений свойств, на которые мы ссылаемся через это ключевое слово.