React.createClassとReact.Componentの違い

More than 1 year has passed since last update.

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.

https://facebook.github.io/react/docs/react-api.html#react.component

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を使うほうがよいようです。

http://stackoverflow.com/questions/30668464/react-component-vs-react-createclass