React Native中ES5与ES6写法的区别

前言
React-Native官方推荐使用ES6标准,但是网上很多资料都是基于ES5标准来写的.给我们这样的初入者带来很大麻烦.一起来看下到底有哪些不同

主要有以下四大区别

一,在定义上的区别

在定义组件，方法，属性等方面是有所不同

a)定义组件

ES5定义组件:通过React.createClass来定义一个组件类
var Student = React.createClass({
    render(): function() {
        return (
            <Text/>{name}<Text>
        );
    },
});
ES6定义组件:通过继承React.Component 来定义一个组件类
class Student extends React.Component({
    render() {
        return (
            <Text/>{name}<Text>
        );
    },
});

b)定义方法

相比ES5，ES6在方法定义上语法更加简洁，从上面的例子里可以看到，给组件定义方法不再用 名字: function()的写法，而是直接用名字()，在方法的最后也不能有逗号了

ES5定义方法:
var Student = React.createClass({
     test: function(){
      },
    render() : function(){
        return (
            <Text/>{name}<Text>
        );
    },
});
ES6定义方法:
var Student = React.createClass({
     test{
      },
    render() {
        return (
            <Text/>{name}<Text>
        );
    },
});

c)定义组件的属性类型和默认属性

ES5:属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现
var Video = React.createClass({
    getDefaultProps: function() {
        return {
            autoPlay: false,
            maxLoops: 10,
        };
    },
    propTypes: {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    },
    render: function() {
        return (
            <View />
        );
    },
});
ES6:可以统一使用static成员来实现
class Video extends React.Component {
    static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
    };  // 注意这里有分号
    static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    };  // 注意这里有分号
    render() {
        return (
            <View />
        );
    } // 注意这里既没有分号也没有逗号
}

2,在引入(import)与导出(export)组件上的区别

a)引入组件

ES5引入组件 : 引入React包基本通过require进行

D5B4325F-F9F9-4DCD-BB4C-88A1A69956C2.png

ES6引入组件 : 没有了require，而是使用import来导入组件，有点像Java的写法

3646D7C0-68E6-440A-B013-5A8C3D4D6F31.png

b)导出组件

ES5导出组件 : 要导出一个类给别的模块用，一般通过module.exports来导出

97AC3449-0101-4400-BD79-A750ACB2F033.png

ES6导出组件 : 通常用export default来实现相同的功能

6AAC24D8-AA21-4958-AC30-3DAFFBB7392A.png

3,在初始化state上的区别

ES5
var Video = React.createClass({
    getInitialState() {
        return {
            loopsRemaining: this.props.maxLoops,
        };
    },
})

ES6
class Video extends React.Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}
不过我们推荐更易理解的在构造函数中初始化（这样你还可以根据需要做一些计算）：
class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

4,在方法作为回调上的区别

在开发工作中，经常会使用到回调，如按钮的单击回调等，这也是在很多编程语言中都会经常出现的情况

ES5
var PostInfo = React.createClass({
    handleOptionsButtonClick: function(e) {
        // Here, 'this' refers to the component instance.
        this.setState({showOptionsModal: true});
    },
    render: function(){
        return (
            <TouchableHighlight onPress={this.handleOptionsButtonClick}>
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
});
在ES5中，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但官方现在逐步认为这反而是不标准、不易理解的。
在ES6下，你需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）：

ES6
class PostInfo extends React.Component{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            <TouchableHighlight 
                onPress={this.handleOptionsButtonClick.bind(this)}
                //onPress={e=>this.handleOptionsButtonClick(e)}//这种方式和上面的效果是一样的
                >
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },·
}