使用ES6和不是ES6创建类，及其内部状态，方法的区别

通常情况下你可以用普通的 JavaScript 类定义一个组件：

class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

如果你不使用 ES6 ，你可以使用 create-react-class 方法代替：

方法1：

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});

方法2：

var Greeting =  React.createClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});

除了一些例外，ES6 classes(类) API 非常类似于函数 createReactClass() 。

声明默认 Props

在函数和 ES6 classes(类) 中，defaultProps 被定义为组件本身的属性：

class Greeting extends React.Component {
// ...
}

Greeting.defaultProps = {
name: 'Mary'
};

在 createReactClass() 中，你需要在所传递的对象中定义 getDefaultProps() 方法:

var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'Mary'
};
},

// ...

});

设置初始化 State(状态)

在 ES6 classes(类) 中，你可以在构造函数通过给 this.state 赋值来定义初始状态:

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
// ...
}

在 createReactClass() 函数中，你可以提供一个指定的 getInitialState 方法来返回初始状态:

var Counter = createReactClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
// ...
});

自动绑定

在以 ES6 classes(类) 方式声明的 React 组件中，方法遵循与普通 ES6 的 class 中相同的语义。也就是说方法不会自动绑定 this 到实例中，你必须在构造函数中显式的使用 .bind(this) :

class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
// 这一行很重要！
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
alert(this.state.message);
}

render() {
// 因为 `this.handleClick` 是绑定的，所以我们可以使用它作为一个事件处理程序。
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}

在 createReactClass() 中，并不需要这么做，因为方法可以自动绑定。

var SayHello = createReactClass({
getInitialState: function() {
return {message: 'Hello!'};
},

handleClick: function() {
alert(this.state.message);
},

render: function() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
});

这意味着在使用 ES6 classes(类) 方式下对于事件处理函数你需要编写更多的样本代码 ，但是在大型应用中具有更好的性能。

如果你不想使用样本代码，你可以使用 Babel 启用 实验性的类属性语法提案：

class SayHello extends React.Component {
constructor(props) {
super(props);
this.state = {message: 'Hello!'};
}
// 警告：这个语法是实验性的！
// 这里使用箭头绑定方法：
handleClick = () => {
alert(this.state.message);
}

render() {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}

请注意，上述语法是实验性的，并且这个语法将来可能会发生变化，或者这个提案可能不会纳入语言范畴。

如果你想更稳妥的方法，你有以下选择：

在构造函数中绑定方法。

使用箭头函数，例如，onClick={(e) => this.handleClick(e)}

保持使用 createReactClass。

http://www.css88.com/react/docs/react-without-es6.html#%E5%A3%B0%E6%98%8E%E9%BB%98%E8%AE%A4-props