使用ES6编写React应用（ES5转换为ES6）

这里列出React项目从ES5转换为ES6的的变化。

1、导入React（require => import）

ES5

var React = require('react');
var ReactPropTypes = React.PropTypes;

ES6

import React, {Component, PropTypes} from 'react';

2、使用Class创建组件(React.createClass => extends React.Component)

ES5

var Mycomponent = React.createClass({
  onClick: function(e) { … },
  render: function() { … },
});

ES5使用React.createClass来创建组件。

ES6

class Mycomponent extends React.Component {
  onClick(e) { … }
  render() { … }
}

ES6使用class关键字一个类，此类扩展于React.Component，之前在ES5里使用的函数，在ES6里变成了类的方法，不需要function关键字。

3、导出(module.exports => export default)

ES5

var Mycomponent = React.createClass({
  render: function() { ... },
});

module.exports = Mycomponent;

ES5使用module.exports方式导出组件

ES6

export default class Mycomponent extends React.Component {
  render() {...}
}

ES6使用export default导出默认组件

4、属性的初始化

var React = require('react');
var ReactPropTypes = React.PropTypes;

var MyComponent = React.createClass({
    propTypes: {
      name: ReactPropTypes.string.isRequired
    }
});

ES5的propTypes是作为React.createClass的参数属性传给组件。

ES6

import React, {Component, PropTypes} from
export default class MyComponent extends React.Component {
    render() {...}
}

MyComponent.propTypes = {
    title: PropTypes.string.isRequired
}

ES6的propTypes定义在组件的外面。

ES7

import React, {Component, PropTypes} from 'react';

export default class MyComponent extends React.Component {
    static propTypes = {
        title: PropTypes.string.isRequired
    }

    render() {...}
}

ES7更进一步，把propTypes作为静态属性定义在组件内。

5、getInitialState

ES5

var MyComponent = React.createClass({ getInitialState: function() { return { title: this.props.title }; }, });

ES5初始化的状态可以定义函数getInitialState里，它返回一个对象包含了组件的状态

ES6

export default class MyComponent extends Component {
    constructor(props) {    
        super(props);
        this.state = {
            title: props.title
        };
    }
}

ES6则可以把组件的状态属性定义在构造函数contstructor里。

ES7

export default class MyComponent extends Component {
    state = {
        title: this.props.title
    };

    // 跟着构造函数constructor
}

ES7就更进一步，把状态定义构造函数外，定义为成员变量。

6、方法的访问（箭头函数）

ES5

var MyComponent = React.createClass({
    handleClick: function(event) {
        this.setState({title: !this.state.title});  // this自动绑定组件
    }
});

ES5函数里使用的this会自动绑定到组件上。

ES6

export default class MyComponent extends React.Component {
    constructor() { 
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        this.setState({title: !this.state.title});  
    }
}

ES5的函数为ES6的方法，方法里使用的this需要在组件的构造函数里使用bind(this)绑定。

箭头函数

export default class MyComponent extends Component {
    handleClick = (event) => {
        this.setState({liked: !this.state.liked});  
    }
}

使用箭头函数可以不用在构造函数里使用bind(this)绑定到方法，这是因为箭头函数的this就是它所定义的上下文的this，即为组件的this。

箭头函数里的this可以参考：理解JavaScript普通函数以及箭头函数里使用的this