В чем причина передачи реквизитов в super () в конструкторе React, когда реквизиты не доступны внутри него?

Question

Я видел много фрагментов кода, таких как HelloWorld, где props передается super(). Какова причина сделать это, когда this.props не доступен в конструкторе?

class HelloWorld extends Component {
    constructor(props) {
        super(props);

        this.state = { message: 'Hi' };
        this.logMessage = this.logMessage.bind(this);
    }

    logMessage() {
        console.log(this.state.message);
    }

    render() {
        return (
            <input type="button" value="Log" onClick={this.logMessage} />
        );
    }
}

Answer 1

Вам не нужно делать super(props). Это делается только для доступа к props внутри конструктора. Вы можете написать:

constructor(){
 super()
 this.state={}
}

Если не пройти super(props):

 constructor(props){
  super()
  console.log('this.props', this.props); // => undefined
  console.log('props', props); // => whatever the props is
 }

См. ответ на этот стекопоток

Answer 2

Если вы не собираетесь использовать this.props в своем конструкторе, вам не нужно помещать его в super() следующим образом:

constructor(){
   super();
   this.state = { randomState: "" };
   this.randomProperty = null;
}

Но, в некоторых случаях, props, переданный из родительского компонента, может быть доступен и использован внутри конструктора для инициализации состояния (эти реквизиты не зависят от смены реквизита). Передав props в super, теперь вы можете использовать this.props внутри конструктора.

constructor(props){
   super(props);
   this.state = { randomVar: props.initialValue, propDependentState: this.props.someValue };
   this.someVar = props.defaultValue;
   this.anotherVar = this.props.openToChangesProp;
}

Обратите внимание, что те props, которые непосредственно передаются в этот компонент, являются единственными реквизитами, доступными для конструктора. props, которые отображаются из состояния с использованием приставки connect включены в реквизиты, к которым здесь нельзя получить доступ, так как компонент еще не смонтирован.

Answer 3

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

Читать Здесь для более подробной информации.