Разница между super () и super (props) в конструкторе компонента класса React?

При создании компонентов класса в React мы часто вызываем super в конструкторе компонента, а также передаем ему реквизиты. Но действительно ли нам нужно это делать? Я имею в виду передать реквизит в супер.

Что ж, React Documentation рекомендует -

Компоненты класса всегда должны вызывать базовый конструктор с реквизитами.

и классы ES6 должны вызывать super, если они являются подклассами.

Но зачем передавать реквизит в супер? Это потому, что если мы хотим использовать this в конструкторе, нам нужно передать его в super.

class MyComponent extends React.Component {
  constructor(props) { 
    super();
    console.log(this.props); // undefined
    console.log(props); // defined
  }
render() {
    return <div>Hello {this.props.message}</div>; // defined
  }
}

Однако, если мы используем super (props)

class MyComponent extends React.Component {
  constructor(props) { 
    super(props);
    console.log(this.props); // props will get logged.
  }
render() {
    return <div>Hello {this.props.message}</div>; // defined
  }
}

Итак, в заключение, если вы хотите использовать this.props внутри конструктора, вам нужно передать его в super, в противном случае можно не передавать props в super, поскольку мы видим, что независимо от передачи его в super, this.props доступен внутри функция рендеринга.

Благодарности:
Вы можете проверить это замечательное обсуждение stackoverflow для получения более подробной информации:
https://stackoverflow.com/questions/30571875/whats-the-difference-between- super-and-superprops-in-react-when-using-e

Ознакомьтесь с моими другими сообщениями:

Разница между super () и super (props) в конструкторе компонента класса React?

Вопросы по теме