Можно ли безопасно деструктурировать класс компонента ES6 React в его сигнатуре конструктора?

У меня есть класс ES6, который расширяет React.Component, то есть компонент React. Допустим, мой компонент выглядит так:

class MyComponent extends React.Component {
  constructor({ foo, bar, baz, ...props }) {
    super({ foo, bar, baz, ...props });
    this.state = { foo, bar, baz };
  }

  render() {
     return <span>Foo: {this.state.foo} Bar: {this.state.bar} Baz: {this.state.baz}</span>
  }
}

Здесь я использую деструктурирование в сигнатуре конструктора, чтобы извлечь некоторые реквизиты, которые я хотел бы использовать в состоянии моего компонента. Я гарантирую, что передаю эти значения в super. Однако, когда я на самом деле выполняю аналогичный код, я вижу предупреждение, которое выглядит так:

Предупреждение: MyComponent(...): При вызове super() в MyComponent убедитесь, что переданы те же реквизиты, которые были переданы конструктору вашего компонента.

Итак, мой вопрос: можно ли деструктурировать подпись конструктора, как я показал, без соответствующего предупреждения? (Я предполагаю, что предупреждение существует по уважительной причине, и я также уверен, что не полностью понимаю последствия.)


reactjs ecmascript-6 es6-class
person maxcountryman    schedule 08.11.2016    source источник
comment
почти уверен, что это потому, что super - это первое, что вы должны вызвать в функции, но если вы транспилируете с помощью babel, чтобы использовать деструктурирование, он должен выполнить const foo = props.foo и т. д. до супервызова. Вместо этого вы можете сделать super(props), а затем const { foo, bar, baz } = props после супервызова.   -  person m0meni    schedule 08.11.2016
comment
Конечно, я понимаю, что могу это сделать, но я не об этом спрашивал. Пример кода, который я привел выше, на самом деле правильно связывает значения для меня, но меня беспокоит предупреждение, если каким-то образом одни и те же реквизиты не просачиваются через super.   -  person maxcountryman    schedule 08.11.2016
comment
Предупреждение также может заключаться в том, что вы создаете клон переданного объекта. Я предполагаю, что предупреждение представляет собой неглубокую проверку на равенство с исходными свойствами (потому что глубокая проверка была бы слишком дорогой), и поэтому, пока вы передавая правильные вещи, вы все равно получаете предупреждение. Почти уверен, что то, что вы делаете, в порядке, но причина, по которой я пишу это, заключается в том, что я слишком ленив, чтобы проверить исходный код React на github: p   -  person m0meni    schedule 08.11.2016
comment
Спасибо @AR7, это имеет смысл для меня. Я был бы рад принять это как ответ, если вы хотите напечатать его.   -  person maxcountryman    schedule 08.11.2016

Ответы (1)


arrow_upward
5
arrow_downward

Если вы посмотрите на эту строку в исходный код React, вы увидите, что он выполняет неглубокую проверку, чтобы увидеть, совпадают ли объекты реквизита.

// other stuff

var propsMutated = inst.props !== publicProps;

// other stuff

warning(
  inst.props === undefined || !propsMutated,
  '%s(...): When calling super() in `%s`, make sure to pass ' +
  'up the same props that your component\'s constructor was passed.',
  componentName, componentName
);

Вы создали клон реквизита, когда передали его в super, поэтому он вызывает предупреждение.

person m0meni    schedule 08.11.2016