通常你会将一个React组件定义成一个普通的js类：
class Greeting extends React.Component { render() { return Hello, { this.props.name}
; }} 如果你不打算使用ES6，你也可以使用create-react-class 模块：
var createReactClass = require('create-react-class'); var Greeting = createReactClass({ render: function() { return Hello, { this.props.name}
; } }); ES6 中 class 相关的接口与 createReactClass 方法十分相似，但有以下几个区别值得注意。
声明defaultProps
如果使用 class 关键字创建组件，可以直接把自定义属性对象写到类的 defaultProps 属性中：
class Greeting extends React.Component { // ...}Greeting.defaultProps = { name: 'Mary'}; 如果使用 createReactClass 方法创建组件，那就需要在参数对象中定义 getDefaultProps 方法，并且在这个方法中返回包含自定义属性的对象：
var Greeting = createReactClass({ getDefaultProps: function() { return { name: 'Mary' }; }, // ... }); 设置初始state
在ES6类中，你可以在构造函数中通过this.state定义初始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}; }, // ... }); 自动绑定
对于使用 class 关键字创建的 React 组件，组件中的方法是不会自动绑定 this 的。类似地，通过 ES6 class 生成的实例，实例上的方法也不会绑定 this。因此，你需要在 constructor 中为方法手动添加 .bind(this)：
class SayHello extends React.Component { constructor(props) { super(props); this.state = {message: 'Hello!'}; // This line is important! this.handleClick = this.handleClick.bind(this); } handleClick() { alert(this.state.message); } render() { // Because `this.handleClick` is bound, we can use it as an event handler. return ( ); }} 如果使用 createReactClass 方法创建组件，组件中的方法会自动绑定至实例，不需要像上面那样加 .bind(this)：
var SayHello = createReactClass({ getInitialState: function() { return {message: 'Hello!'}; }, handleClick: function() { alert(this.state.message); }, render: function() { return ( ); }}); 这就意味着如果使用ES6类的语法将会为了事件处理器写更多的代码，但是优势就是在大型应用中性能稍微好一点。
如果你觉得上面这个写法很麻烦，那么可以尝试一下目前还处于实验性阶段的 Babel 插件 Class Properties。
class SayHello extends React.Component { constructor(props) { super(props); this.state = {message: 'Hello!'}; } // WARNING: this syntax is experimental! // Using an arrow here binds the method: handleClick = () => { alert(this.state.message); } render() { return ( ); }} 请注意，这种语法目前还处于实验性阶段。也就意味着，语法随时都可能改变。当然，也存在最终没有被官方批准的可能。
为了保险起见，以下三种做法都是可以的：
- 在构造函数中绑定方法
- 使用箭头函数，例如onClick={(e) => this.handleClick(e)}
- 使用React.createClass()
mixins（混入）
注意：
ES6 本身是不包含混入支持的。因此，如果你使用 class 关键字创建组件，那就不能使用混入功能了。
我们也发现了很多使用混入然后出现了问题的代码库。因此，我们并不推荐在 ES6 中使用混入.
以下内容仅作为参考
有些时候那些不同的组件也许会分享一些相同的功能。它们有时被叫做横切关注点。针对这个问题，在使用 createReactClass 创建 React 组件的时候，引入混入功能会是一个很好的解决方案。
一个常见的使用场景就是一个组件想要通过一个interval定时器来更新自己。使用setInterval()会很方便，但是在你不需要的时候你要关闭定时器来节省内存。React提供了生命周期方法让你知道什么时候组件被创建和被销毁。让我们创建一个简单的mixins使用这些方法来提供一个简单的setInterval()函数来自动清除定时器当你的组件被销毁。
var SetIntervalMixin = { componentWillMount: function() { this.intervals = []; }, setInterval: function() { this.intervals.push(setInterval.apply(null, arguments)); }, componentWillUnmount: function() { this.intervals.forEach(clearInterval); }};var createReactClass = require('create-react-class');var TickTock = createReactClass({ mixins: [SetIntervalMixin], // 使用混入 getInitialState: function() { return {seconds: 0}; }, componentDidMount: function() { this.setInterval(this.tick, 1000); // 调用混入的方法 }, tick: function() { this.setState({seconds: this.state.seconds + 1}); }, render: function() { return ( React has been running for {
this.state.seconds} seconds. ); }});ReactDOM.render( 如果一个组件有多个混入，且其中几个混入中定义了相同的生命周期方法（比如都会在组件被摧毁的时候执行），那么这些生命周期方法是一定会被调用的。通过混入定义的方法，执行顺序也与定义时的顺序一致，且会在组件上的方法执行之后再执行。