ES5与ES6的对比

ES5与ES6的对比

最近学习React Native，涉及到JavaScripte,自然也逃不过ES5、ES6（核心代码书写规范）的问题。能搜到的资料有一大部分是用ES5编写的，但官方是推荐ES6的，从趋势来看ES6页更为值得学习。
当然，ES5和ES6混合编写，编译器能自动区分识别。但是我不建议这么用，书写方式的混杂对于多人开发是个噩梦。特别是有强迫症的我来说。
所以这里主要罗列一下怎么把ES5转为ES6。

系统库的引用

ES5中的引用需要先使用require导入React包，成为对象，再去进行真正引用

//ES5
var React = require("react");
var {
    Component,
    PropTypes
} = React;  //引用React抽象组件

var ReactNative = require(“react-native”);
var {
Image,
Text,
} = ReactNative; //引用具体的React Native组件

在ES6里，可以使用import方法来直接实现系统库引用，不需要额外制作一个类库对象

//ES6
import React, { 
    Component,
    PropTypes,
} from 'react';
import {
    Image,
    Text
} from 'react-native'

导出及引用单个类

ES5中，要导出一个类给别的模块用，一般通过module.exports来实现。引用时，则依然通过require方法来获取。

//ES5导出
var MyComponent = React.createClass({
    ...
});
module.exports = MyComponent;

//ES5导入
var MyComponent = require(’./MyComponent’);

ES6中，则可以使用用export default来实现相同的功能，使用import方法来实现导入。
注意:ES5和ES6的导入导出方法是成对出现的，不可以混用。
比如：使用export default来导出，只能通过import 来导入。若使用require来导入，编译将不能通过。

//ES6导出(一般都继承于Component类)
export default class MyComponent extends Component{
    ...
}

//ES6导入
import MyComponent from ‘./MyComponent’;

定义组件

ES5中，组件类的定义通过React.createClass实现。
注意;ES5中React.createClass后面是需要小括号的，且结尾必须有分号。

//ES5
var Photo = React.createClass({
    render: function() {
        return (
            <Image source={this.props.source} />
        );
    },
});

在ES6里，让组件类去继承React.Component类就可以了。
注意：这里结尾时不会出现小括号，也不需要添加分号。

//ES6
class Photo extends React.Component {
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

组件内部定义方法

ES5中采用的是 ###:function()的形式，方法大括号末尾需要添加逗号。

//ES5 
var Photo = React.createClass({
    componentWillMount: function(){
},
render: function() {
    return (
        <Image source={this.props.source} />
    );
},

});

ES6中省略了【: function】这一段，并且结尾不需要加逗号来实现分隔。
注意:使用ES6定义的规则的话，外层必须用【class #### extend React.Component】的方式来申明这个类，否则会报错。

//ES6
class Photo extends React.Component {
    componentWillMount() {
}
render() {
    return (
        <Image source={this.props.source} />
    );
}

}

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

在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现(这两个方法应该是固定名称的)

//ES5 
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成员来实现

//ES6
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 (
            
        );
    } // 注意这里既没有分号也没有逗号
}

ES6中也可以在组件类声明完成后追加其静态方法。虽不推荐，但写法上也没问题

//ES6
class Video extends React.Component {
    render() {
        return (
            
        );
    }
}
Video.defaultProps = {
    autoPlay: false,
    maxLoops: 10,
};
Video.propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
};

初始化STATE

在ES5中，初始化state的方法是固定的getInitialState

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

ES6中存在两种写法
第一种，直接构造state函数

class Video extends React.Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

第二种，相当于OC中的方法重写，重写constructor方法

class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

暂时总结：
ES6中针对类的操作，不再需要使用var去声明一个对象。
减少了小括号、逗号、分号这类分隔符号的使用。

先写到这，其他的请看：
http://blog.csdn.net/changsimeng/article/details/62883952