58

このバベルのドキュメントによると、React で ES6+ を使用する正しい方法は、次のようにコンポーネントを初期化することです。

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,
  }
}

ただし、Dan Abramov 自身のReact DnDモジュールなど、いくつかの公式の例では、ES6+ を使用していますが、コンストラクター内で状態を定義しています。

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

現在、React の重要な貢献者である Dan Abramov は、コンストラクターの外部で状態を定義できることをおそらく知っていますが、コンストラクター内でそれを行うことを選択しています。

だから私は、どの方法がより良いのか、そしてその理由は何なのか疑問に思っています。

4

3 に答える 3