ES5和ES6差异在React Native中的表现

    ES5，ES6 都是对ecmascript规范的补充，ES5已经大规模使用了，ES6目前可能还存在浏览器兼容性问题。我们通过React Native来看一下它们之间的区别

区别1：创建组件

    组件是一个自定义的js对象，在es5中使用React.createClass()；在es6中必须继承React.component，然后进行创建。
ES5的写法：

var pressView = React.createClass({
    render() {
        return (
            
                  
                       React-Native入门学习
                  
            
        );
    }
})

ES6的写法：

class pressView extends Component {
    render() {
        return (
            
                  
                      React-Native入门学习
                  
            
        );
    }
})

区别2：组件的属性props

    在ES6中，其为属性：defaultProps(可以标识static定义在class内，也可以定义在class外)，而在ES5中，其为方法：getDefaultProps: function(){return {name:value}};
ES5的写法：

    //不可改变的值
    getDefaultProps(){//设置默认属性
        return{
            title:'test'
        }
    },

    propTypes:{
        title : React.PropTypes.string
    },//属性校验器,表示必须是字符串

    //渲染视图
    render() {
        return (
            
                
                    {this.props.title}
                
            
        );
    },
})

ES6的写法：

class lifeStyle extends Component {
    //不能在组件定义的时候定义一个属性
    render() {
        return (
            
                  
                      {this.props.title}
                  
            
        );
    }
}

//这两个属性不能写在class内
lifeStyle.propTypes={//属性校验器,表示该属性必须为bool,否则错误
    title: React.PropTypes.bool
}

lifeStyle.defaultProps={
    title: 'test' //设置默认属性
}

区别3：组件的状态state

ES5的写法：

var lifeStyle = React.createClass({//类名一定要大写开头
    //可改变的值
    getInitialState(){
        return{

        }
    },
)}

ES6的写法：

class lifeStyle extends Component {
    //构造器
    constructor(props){
        super(props);
        //初始状态
        this.state={liked:false};
    }
)}