解構(gòu)復(fù)制

ES5

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

ES6

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

導(dǎo)入模塊

ES5

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

ES6

import other from './other';

導(dǎo)出模塊

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聲明只讀變量

函數(shù)簡寫

ES5

render:function(){
    return xxx
}

ES6

render(){
    return xxx
}

箭頭函數(shù)

ES5

var callback = function(v){

}.bind(this)

ES 5為了使函數(shù)與上下文保持一致，需要使用bind(this)

ES6

let callback =() = >{

}

ES 6使用箭頭函數(shù)實(shí)現(xiàn)上下文自動(dòng)綁定

字符串插值

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)=>{
})

組件的屬性類型和默認(rèn)屬性

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