что делает super() без каких-либо аргументов?

Я изучаю реакцию из документов, но не уверен, что делает 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')
);

Ответ 1

В ES6 производные классы должны вызвать super() если у них есть конструктор. В реакции все компоненты распространяются от класса Component.

Вам действительно не нужен конструктор для каждого класса ES6/react. Если пользовательский конструктор не определен, он будет использовать конструктор по умолчанию. Для базовых классов это:

constructor() {}

И для производных классов конструктор по умолчанию:

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

Кроме того, необходимо вызвать super() перед доступом к this, так как this не не инициализирован до super() называется.

Существует несколько причин использовать настраиваемый конструктор в реакции. this.state =... первых, вы можете установить начальное состояние внутри конструктора, используя this.state =... вместо использования getInitialState жизненного цикла getInitialState.

Вы также можете связать методы класса внутри конструктора с помощью this.someClassMethod = this.someClassMethod.bind(this). На самом деле лучше привязать методы в конструкторе, так как они будут созданы только один раз. В противном случае, если вы вызываете bind или используете функции со стрелками для привязки методов вне конструктора (например, в методе render), это фактически приведет к созданию нового экземпляра функции для каждого рендеринга. Подробнее об этом читайте здесь.

Если вы хотите использовать this.props в конструкторе, вам нужно вызвать super с реквизитом в качестве аргумента:

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

Если вы этого не сделаете, то this.props не определено в конструкторе. Тем не менее, вы все равно можете получить доступ к this.props любом месте класса вне конструктора без необходимости ничего с ним делать в конструкторе.

Ответ 2

Ключевое слово super() в javascript используется для вызова методов родительского класса. Это часто используется в функции-конструкторе для вызова функции родительского конструктора. Например:

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