В чем разница между «super ()» и «super (props)» в React при использовании classов es6?

Когда важно передавать props super() и почему?

 class MyComponent extends React.Component { constructor(props) { super(); // or super(props) ? } } 

Существует только одна причина, когда нужно передать props super() :

Когда вы хотите получить доступ к this.props в конструкторе.

Passing:

 class MyComponent extends React.Component { constructor(props) { super(props) console.log(this.props) // -> { icon: 'home', … } } } 

Не пропустите:

 class MyComponent extends React.Component { constructor(props) { super() console.log(this.props) // -> undefined // Props parameter is still available console.log(props) // -> { icon: 'home', … } } render() { // No difference outside constructor console.log(this.props) // -> { icon: 'home', … } } } 

Обратите внимание, что передача или отсутствие передачи props super не влияет на последующее использование этого конструктора this.props . Это render , shouldComponentUpdate или обработчики событий всегда имеют к нему доступ.

Это прямо сказано в ответе Софи Альперта на аналогичный вопрос.


Документация – состояние и жизненный цикл, добавление локального состояния в class, пункт 2 – рекомендации:

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

Однако никаких оснований не предусмотрено. Мы можем предположить, что это либо из-за подclassа, либо для будущей совместимости.

(Спасибо @MattBrowne за ссылку)

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

 class MyComponent extends React.Component { constructor() { console.log(this); // Reference Error } render() { return 
Hello {this.props.name}
; } }

В отличие от этого:

 class MyComponent extends React.Component { constructor() { super(); console.log(this); // this logged to console } render() { return 
Hello {this.props.name}
; } }

Более подробно в соответствии с этим отличным ответом на переполнение стека

Вы можете увидеть примеры компонентов, созданных путем расширения classа React.Component который не вызывает super() но вы заметите, что у них нет constructor , поэтому он не нужен.

 class MyOtherComponent extends React.Component { render() { return 
Hi {this.props.name}
; } }

Одна из проблем, которые я видел у некоторых разработчиков, с которыми я говорил, заключается в том, что компоненты, которые не имеют constructor и поэтому не называют super() нигде, все еще имеют this.props доступные в методе render() . Помните, что это правило и необходимость создания this связывания для constructor применимы только к constructor .

Когда вы передаете props super , реквизит получает this . Взгляните на следующий сценарий:

 constructor(props) { super(); console.log(this.props) //undefined } 

Как всегда, когда вы это делаете:

 constructor(props) { super(props); console.log(this.props) //props will get logged. } 

Согласно исходному коду

 function ReactComponent(props, context) { this.props = props; this.context = context; } 

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

super() используется для вызова родительского конструктора.

super(props) передал props родительскому конструктору.

В вашем примере super(props) будет вызывать конструктор React.Component проходящий в props в качестве аргумента.

Дополнительная информация о super : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

Вот скрипка, которую я сделал: https://jsfiddle.net/beshanoe/zpxbLw4j/1/ . Он показывает, что реквизит назначается не в конструкторе по умолчанию. Насколько я понимаю, они описаны в методе React.createElement . Следовательно, super(props) следует вызывать только тогда, когда конструктор суперclassа вручную устанавливает привязки к этому. Если вы просто React.Component вызов React.Component super(props) он ничего не сделает с реквизитами. Возможно, это будет изменено в следующих версиях React.

  • Реагировать на фокус на ввод после рендера
  • Инициализировать компонент инициализации компонента из реквизита
  • Как сделать сервер webpack dev запущенным на порту 80 и 0.0.0.0, чтобы сделать его общедоступным?
  • Значение свойства по умолчанию в компоненте React с использованием TypeScript
  • Как сделать setState внутри обратного вызова: ReactJS
  • Почему рекомендации React рекомендуют делать AJAX в componentDidMount, а не componentWillMount?
  • Что такое использование Curly Braces в заявлении импорта ES6
  • Использовать состояние или refs в компонентах формы React.js?
  • Значение этого в обработчике событий React
  • ReactJS: Почему передается исходное состояние компонента prop-анти-шаблон?
  • Неожиданный токен '=' в компоненте React
  • Interesting Posts

    OS X: Как выполнить изображение без потерь изображения JPEG?

    Как торрент-клиенты обходят брандмауэр маршрутизатора?

    Удалить все, кроме номеров, из NSString

    Когда разница между quotRem и divMod полезна?

    Как я могу управлять двумя компьютерами с помощью одной и той же клавиатуры и мыши?

    Почему возврат 0 необязателен?

    Модификатор прокрутки для мыши / трекбола в окнах

    Android Facebook SDK 3.0 дает «remote_app_id не соответствует сохраненному идентификатору» при входе в систему

    Папки обновлений Windows (со странными именами) на диске C

    Как использовать jackson для десериализации массива объектов

    Как поместить всплывающую подсказку в пользовательскую функцию

    Hibernate hbm2ddl.auto возможные значения и что они делают?

    Лучший способ переключить поведение, основанное на типе

    Эмулятор Visual studio (2015) для android не работает – XDE.exe – Код выхода 3

    Блокировать файлы cookie по имени, а не по сайту, в Firefox

    Давайте будем гением компьютера.