Нужен ли конструктор в React с автопривязкой и инициализаторами свойств

Я рефакторинг компонента React на основе класса es6, который использует обычный конструктор, а затем связывает методы и определяет состояние/атрибуты в этом конструкторе. Что-то вроде этого:

class MySpecialComponent extends React.Component {
  constructor(props) {
   super(props)
   this.state = { thing: true }
   this.myMethod = this.myMethod.bind(this)
   this.myAttribute = { amazing: false }
  }

  myMethod(e) {
   this.setState({ thing: e.target.value })
  }
}

Я хочу реорганизовать это, чтобы я автоматически связывал функции и использовал инициализаторы свойств для состояния и атрибутов. Теперь мой код выглядит примерно так:

class MySpecialComponent extends React.Component {
  state = { thing: true }
  myAttribute = { amazing: false }


  myMethod = (e) => {
   this.setState({ thing: e.target.value })
  }
}

Мой вопрос в том, нужен ли мне конструктор? Или реквизит тоже автопривязывается? Я ожидал, что мне все еще понадобится конструктор и включенный super(props), но мой код, похоже, работает, и я запутался.

Спасибо


reactjs ecmascript-6 ecmascript-next es6-class
person Max Millington    schedule 21.06.2017    source источник
comment
Если вы не определяете конструктор, автоматически вызывается родительский конструктор с переданными аргументами. constructor(...args) { super(...args); } в основном является конструктором по умолчанию.   -  person Felix Kling    schedule 21.06.2017
comment
Если состояние компонента зависит от его свойств, вы должны выполнить необходимую инициализацию в конструкторе. Если состояние одинаково независимо от реквизита, как в вашем примере, то вы можете использовать то, что написали.   -  person Ross Allen    schedule 21.06.2017
comment
Обратите внимание, что все эти вещи по-прежнему происходят внутри конструктора, это просто другой синтаксис. Что может быть немного запутанным. Кроме того, если вы хотите инициализировать свой экземпляр из значений аргументов, вам все равно потребуется определение constructor, но, по общему признанию, в реакции все равно все выбрасывается в объект props.   -  person Bergi    schedule 21.06.2017

Ответы (3)


arrow_upward
10
arrow_downward

Насколько я понимаю, вам вообще не нужно вводить конструктор при использовании свойств класса (как во втором примере кода). В принятом ответе говорится, что он вам нужен, если вам «нужно ссылаться на реквизиты в объекте начального состояния», но если вы используете указанные свойства класса, то вы, вероятно, используете Babel для его переноса, и в этом случае конструктор используется, это просто делается за кулисами. Из-за этого вам не нужно добавлять конструктор самостоятельно, даже если вы используете свойства в состоянии.

См. эту статью, где приведены лучшие примеры и лучшее объяснение.

person Christian Jensen    schedule 28.08.2018
comment
Извините, но не могли бы вы объяснить это немного проще? Спасибо - person Ajay; 06.06.2019
comment
Статья, на которую я ссылаюсь в конце, отлично объясняет это, но, по сути, вам не нужен конструктор только потому, что вы используете реквизиты в примере, предоставленном OP. Babel добавит конструктор и вызовет super(props) для вас. - person Christian Jensen; 06.06.2019
comment
Хорошо. Спасибо за это. Значит, если я не использую Babel и т. д., мне придется писать конструктор, верно? И только потому, что я использую Babel, мне разрешено не писать конструктор. - person Ajay; 07.06.2019
comment
да, я добавил аналогичный ответ stackoverflow.com/a/63109619/2761641 - person Akshay Vijay Jain; 27.07.2020

arrow_upward
8
arrow_downward

Вам не нужен явно определенный конструктор, если только вам не нужно ссылаться на props в вашем начальном объекте состояния.

person Community    schedule 24.10.2017
comment
Мы могли бы ссылаться на pops в начальном состоянии без конструктора, верно? Как 2_ - person Adam C.; 05.12.2017
comment
@АдамК. верно. Даже если вам нужно ссылаться на реквизиты в объекте начального состояния, вам не нужен конструктор. См. мой ответ< /а> - person Christian Jensen; 28.01.2019

arrow_upward
2
arrow_downward

Вам не нужно явно определять конструктор, а затем выполнять super(props). Вы можете получить доступ к реквизитам, как в примере ниже. то есть 'реквизит1'

class MySpecialComponent extends React.Component {
    state = { 
    thing: true ,
   prop1:this.props.prop1
  }
  myAttribute = { amazing: false }


 myMethod = (e) => {
  this.setState({ thing: e.target.value })
}


  render(){
  console.log(this.state.prop1);
   return(
       <div>Hi</div>
   );

   }
 }


 ReactDOM.render(<MySpecialComponent prop1={1}/> , mountNode);
person Dhana    schedule 06.07.2018
comment
Но обратите внимание, что вам не нужно назначать свойство свойству вашего объекта состояния, и на самом деле вы вероятно, не должен - person Christian Jensen; 28.01.2019