Reactでコンポーネントを作る際に表題の2つの方法があるわけなのですが、学習を始めた段階で違いがわかっていなかったので整理。
ES6を使うかどうか
一番の違いはここになります。
React.Component is the base class for React components when they are defined using ES6 classes.
//...
If you don't use ES6 yet, you may use the React.createClass() helper instead to create a component class.
ReactやReactNativeのチュートリアルではES6の記法に沿っているので、 React.Component
が使われています。また基本的にはES6に移行するため、React.Component
を利用することが推奨されます。
mixinsのサポート有無
React.Component
ではmixinがサポートされていません。ES6自体でmixinがサポートされていないからです。ただし ES6 においてもmixinのユースケースは代替できるとのこと。
Auto-bindingやgetInitializerなど一部メソッドの違い
React.createClass
であった初期化メソッドの getInitializer はReact.Component
では constructor で初期化されます。またイベントハンドラーなどはReact.createClass
ではauto-bindingが適用されますが、React.Component
では明示的に bindingしてあげる必要があります。
constructor() {
super();
this.state = {dispText: 'input'};
this.handleInput = this.handleInput.bind(this);
}
handleInput(event) {
console.log(this.state.dispText);
this.setState({dispText: event.target.value});
}
#結論
基本的にはES6記法かどうかの違いで、React.Component
で代替可能であり、またES6記法の方がフレキシブルにコンポーネントを書けるので、React.Componentを使うほうがよいようです。