ReactNative之ES6与ES5区别

解构复制

ES5

var React = require（'react-native'）;
var View = React.View

ES6

var {View} = require('react-native')

导入模块

ES5

var other = require（'./other'）;

ES6

import other from './other';

导出模块

ES5

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

ES6

var myCompnent = React.createClass({
    .....
});
exports default myCompnent;

ES 6语法采用export来代替module.exports

let和const

ES5

var a = 1;

ES6

let a = 1
a = 2
const PI = 3.1415
PI = 3 //error

ES 6 语法使用let声明变量，const声明只读变量

函数简写

ES5

render:function(){
    return xxx
}

ES6

render(){
    return xxx
}

箭头函数

ES5

var callback = function(v){

}.bind(this)

ES 5为了使函数与上下文保持一致，需要使用bind(this)

ES6

let callback =() = >{

}

ES 6使用箭头函数实现上下文自动绑定

字符串插值

ES5

var s1 = "React"
var s2 = s1 + " Native"

ES6

let s1 = "React"
let s2 = "${s1} Native"

Promise 异步

ES5

try{
this.doAsyncOperation(params,this.onSuccessCallBack,this.onErrorCallBack);
}catch(e){
}

ES6

this.doAsyncOperation(param).then((param) => {
}).catch((e)=>{
})

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

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

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 /> 
             );
        }
}

初始化STATE

ES5

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

ES6

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

参考:https://juejin.im/post/599683b8f265da24996015ca