В чём разница между constructor и просто state?

Question

[Hellas]

export class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: false
    };
  }
}

и

export class Test extends Component {
  state = {
    data: false
  }
}

В обоих вариантах инициализируем состояние компонента.
Как лучше его указывать?

Answer 1

[Mikhail Osher]

Второй вариант возможен только при наличии babel-plugin-transform-class-properties.

Второй вариант мне удобнее, ибо не надо писать конструкторы.
Так же, благодаря этому плагину можно писать функции с сохранением контекста, которые потом передавать дочерним компонентам. Такой способ очень хорош, ибо нам не надо передавать коллбэки в виде () => this.someCallback() - это сохранит эквивалентность props и React не будет лишний раз вызывать render. Например

class MyComponent extends React.Component {
  onBtnClick = (event) => {
    // correct this
  };

  onBtnMouseUp() {
    // invalid this
  }

  render() {
    return <button onClick={this.onBtnClick} onMouseUp={this.onBtnMouseUp}>hello</button>;
  }
}