React从0.13版本开始，鼓励你使用ES6的方式去写组件。

那么当你想将之前用createClass的方式写的组件迁移到es6类定义的方式需要注意哪些呢？

下面我来列举一下，希望对你有帮助。

1.替换createClass组件定义为ES6类定义组件

原来的方式：

var MyComponent = React.createClass({  
    render: function() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    },
    _onClick: function() {
        console.log(this);
    }
});

ES6的方式：

class MyComponent extends React.Component {  
    render() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    }
    _onClick() {
        console.log(this);
    }
}

2.将propTypes、getDefaultTypes等类属性移到类外面定义

由于ES6类中只允许定义方法并不允许定义类属性，所以像原先会在createClass中定义的propTypes、getDefaultTypes、displayName还有contextTypes等组件属性都要放到类外面来赋值。

原来的方式：

var MyComponent = React.createClass({  
    displayName:'MyComponent',
    propTypes: {
        prop1: React.PropTypes.string
    },
    getDefaultProps: function() {
        return { prop1: '' };
    }
});

ES6的方式：

class MyComponent extends React.Component {...}  
MyComponent.displayName = 'MyComponent';  
MyComponent.propTypes = {  
    prop1: React.PropTypes.string
}
MyComponent.defaultProps = {  
    return { prop1: '' };
}

3.手动绑定类实例到类方法（或回调函数）上

原来使用createClass方式创建的方法在使用的时候默认都绑定的到了它创建的组件实例上，这其实是React提供的语法糖，但新版本的ES6写法上，他们没有再提供，需要你按需手动绑定。

如果你感兴趣的话，你可以看下他们对此的解释：autobinding

原来的方式：

var MyComponent = React.createClass({  
    render: function() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    },
    _onClick: function() {
        console.log(this);// 输出： MyComponent 
    }
});

ES6不正确的方式：

class MyComponent extends React.Component {  
    render() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    }
    _onClick() {
        console.log(this); // 输出: undefined
    }
}

ES6正确的方式：

class MyComponent extends React.Component {  
    constructor() {
        super();
        this. _onClick = this. _onClick.bind(this);
    }
    render() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    }
    _onClick() {
        console.log(this); // 输出： MyComponent
    }
}

当然，你也可以在一个基类中定义一个工具方法专门用来绑定，然后子类中直接传个方法名就可以实现了，不用每次写这么多重复代码。

4.将state初始化移到构造函数constructor中来做

即getInitialState在ES6方式定义将无效，不会在初始化的时候运行。

你需要将在getInitialState里面的工作移到constructor中来做。

原来的方式：

class MyComponent extends React.Component {  
    getInitialState() {
        return Store.getState();
    }
    constructor() {
        super();
        this. _onClick = this. _onClick.bind(this);
    }
}

ES6的方式：

class MyComponent extends React.Component {  
    constructor() {
        super();
        this. _onClick = this. _onClick.bind(this);
        this.state = Store.getState();
    }
    // ...
}