ReactNative中ES5和ES6的区别

ReactNative中ES5和ES6的区别

在ReactNative项目中有些用的es5，有些用的es6，有的是混合使用，不熟悉的话很容易迷糊，所以在这里总结一下，加强记忆，不过最新的react-native项目模板已近默认es6语法。

ES5，ES6 都是对ecmascript规范的补充，ES5已经很成熟，ES6目前可能还存在浏览器兼容性问题，不过在ReactNative中应该不存在兼容问题。

在ReactNative中的区别:

区别一：创建组件

在es5中使用React.createClass()，在es6中必须继承React.component。

ES5的写法：

var pressView = React.createClass({
    render() {
        return (
            <View style={styles.container}>
                  <Text>测试</Text>
            </View>
        );
    }
})

ES6的写法：

class pressView extends Component {
    render() {
        return (
            <View style={styles.container}>
                   <Text>测试</Text>
            </View>
        );
     }
})

区别二：props属性

一种不可变的属性，一般用于子组件来传递数据或者用于组件的基础数据配置

es5中，使用方法getDefaultProps: function(){return {name:value}}; 而在es6中是defaultProps(可以标识static定义在class内，也可以定义在class外)

ES5的写法：

//生命周期只会走一次，所以是不可改变的值
getDefaultProps(){
    return{
        //设置默认属性
        name:'test'
    }
},

//属性类型
 propTypes: {
    name: React.PropTypes.,
},

//渲染视图
render() {
    return (
        <View style={styles.container}>
            <Text> {this.props.name}</Text>      
        </View>
    );
},

ES6的写法,统一使用static来实现：

class lifeStyle extends Component {
    static defaultProps = {
        name: 'test',
        age:'19'
    };

    //属性类型
    static propTypes = {
        name: React.PropTypes.string.isRequired,
        age: React.PropTypes.string.isRequired
    }; 


    render() {
        return (
            <View style={styles.container}>
                  <Text style={styles.welcome}>
                      {this.props.title}
                  </Text>
            </View>
        );
    }
}

区别三：状态state

react-native中很重要的属性，一般界面控制都是先设置变量，然后通过state来改变变量达到改变界面的效果。

使用的方法是：<Text>{this.state.name}</Text> ，假设变量是name。

改变变量的方法是:this.setState({name:'测试数据'});

ES5的写法：

var lifeStyle = React.createClass({
    //可改变的值，
    getInitialState(){
        return{
            name：'测试'
        }
    },
)}

ES6的写法：

//Component属于React的组件，注意导包，否则报错
class lifeStyle extends Component {
    //构造器
    constructor(props){
        super(props);
        //初始状态
        this.state={name:'hello'};
    }   
)}

区别四：引入包导入包

在ES5里，引入React包基本通过require进行，代码：

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

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

ES6里，采用import：

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

感觉import的写法更标准，而且和java中的导包很像。

区别五：导出类

es5导出包一般都是module.exports来进行导出，如：

var TestComponent = React.createClass({
    ...
});
module.exports = TestComponent;

ES6里，通常用export default来导出：

export default class TestComponent extends Component{
}

引用被导出的类：

es5采用require，如：

var TestComponent = require('./MyComponent');

es6采用from，如：

import TestComponent from './MyComponent';

组件中定义函数（方法）

es5的写法是 name:function(){},es6的写法是 name(){} 。感觉es6的更简洁和舒服，不过在使用方法的时候需要注意this的引用。

es5:(需要注意方法结尾','号)
testMethod: function(){

},

es6:
testMethod(){

}

this的引用有三种：

第一种是在方法调用时直接bind（this），如：
<Text onPress={this.testMethod.bind(this)}>测试</Text>

第二种是在构造器是绑定

    //构造器
    constructor(props){
        super(props);
        this._testMethod = this.testMethod.bind(this);
    }
        
    //使用
    <Text onPress={this._testMethod}>测试</Text>

第三种是使用箭头函数，顺便还可以传递参数：

testMethod=()=>{

}

感谢：

学习地址1

学习地址2;