Лучше определить состояние в конструкторе или с помощью инициализаторов свойств?

В соответствии сэтот В документации Babel, правильный способ использования ES6 + с React - это начальные компоненты, подобные этим:

class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

Но некоторые официальные примеры, такие как собственные Дана АбрамоваРеагировать на DnD модуль, использует ES6 +, но все еще определяет состояние в конструкторе:

constructor(props) {
    super(props);
    this.moveCard = this.moveCard.bind(this);
    this.state = {
       // state stuff
    }
}

Теперь Дэн Абрамов, являясь важным участником React, вероятно, знает, что он может определять состояние вне конструктора, но все же предпочитает делать это внутри конструктора.

Так что мне просто интересно, какой путь лучше и почему?

 Avraam Mavridis13 июн. 2016 г., 13:18
Нет плохого или хорошего, они эквивалентны, это вопрос предпочтения
 Felix Kling14 июн. 2016 г., 04:43
Свойства класса являютсяпредложение, Они естьне часть ES7. Пожалуйста, прочтите описание тега как минимум:ECMAScript-7.

Ответы на вопрос(3)

Решение Вопроса
 c-chavez22 нояб. 2018 г., 08:39
Если классextends React.Componentони не переносятся на одно и то же
 ctrlplusb20 авг. 2019 г., 13:47
Да, достаточно справедливо, но семантикаthis.state не меняется

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

Иногда у вас нет выбора, например, когда инициализатор зависит от аргументов конструктора, поэтому просто не забудьте передать все аргументы родителю.

После нескольких попыток похоже, что у React нет проблемы, о которой я думал. Вы можете передать все, что хотите, родительскому конструктору, и все будет хорошо. Например.:

class MyComponent extends React.Component {
  constructor(props) {
    super({})
  }

  render() {
    // this.props will still be set correctly here
  }
}

Я все еще рекомендую использовать инициализаторы, так как не нужно вызывать родительский конструктор - это еще одна вещь, о которой стоит подумать.

 abustamam14 июн. 2016 г., 21:52
Я понятия не имел, что конструкторы React принимают два аргумента. Каков контекст?
 Gunchars23 мар. 2017 г., 16:45
Документация не всегда соответствует действительности. Не говоря о том, что люди должны игнорировать документы, просто указав, что в действительности React ведет себя по-разному.github.com/facebook/react/blob/...
 Gunchars15 июн. 2016 г., 01:59
Это способ передачи данных компонентам вглубь иерархии без необходимости устанавливать реквизиты для всех посредников. Я попробовал несколько тестов и похоже, что в React нет проблемы, о которой я говорил. Точка все еще в силе, хотя.
 Tomasz Mularczyk23 мар. 2017 г., 12:46
«Вы можете передать все, что хотите, родительскому конструктору, и все будет хорошо», - NOPE.facebook.github.io/react/docs/react-component.html#constructor   а также :facebook.github.io/react/docs/state-and-lifecycle.html

предложение поля класса является синтаксическим сахаром для кода тела конструктора.

В случае, если нет необходимости в явном конструкторе (создание временных локальных переменных и т. Д.),constructor может быть опущен в пользу полей класса.

Проблема с явным конструктором заключается в том, чтоsuper аргументы (props) часто опускаются по ошибке, это может привести к проблемам:

constructor() {
    super();
    this.state = { foo: this.props.foo } // this.props is undefined
}

Явный конструктор может быть полезен для удобства чтения. Методы стандартно размещены нижеconstructorдаже свойства стрелки. Это не будет работать так, как задумано, потому что поля класса назначаются в порядке их перечисления:

state = { foo: { method: this.someMethod } } // this.someMethod is undefined

someMethod = () => ...;

В этом случае явный конструктор может привести к более читаемому коду:

constructor(props) {
    super(props);

    // <-- this is the place where this.someMethod is really assigned

    this.state = { foo: { method: this.someMethod } }
}

someMethod = () => ...;

Ваш ответ на вопрос