轉載連結:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-es5-and-es6-writing-table/

 對於很多初次學習React-Native人來說，都會為ES6語法所困惑，因為網上好多React-Native的Demo都是用ES5語法寫的。所以我剛開始也是學的ES5，對我來說ES5語法比較熟悉，但是看到ES6的語法剛開始就感覺怪怪的，相信對初次接觸ES6寫法的

人來說都會有這樣的感覺。今天我就整理下ES5跟ES6寫法的規範，希望會對你有所幫助。

一、模組引用

在ES5裡引入React的包基本通過require進行，程式碼如下:

    //ES5

var React=require('react-native');
var {
 Image,
 Text,
 propTypes
 }=React;

二、匯出單個類

//在ES6中用，import匯入

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

在ES5中，一般通過module.exports來匯出

//ES5

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

//ES6

export default class MyComponent extends React.component{
 ....
}

引用的時候:

//ES5

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

//ES6

import MyComponent from './MyComponent.js'

三、定義元件

在ES5中，通過React.createClass來定義一個元件類。如下所示:

//ES5

var MyComponent=React.createClass({
 render:function(){
 return (
 <Text>...</Text> 
 );
 }
})

在ES6裡，通過定義一個繼承自React.Component的class來定義一個元件:

//ES6

class MyComponent extends React.component{
 render(){
 return(
 <Text>...</Text>
 )
 }
}

四、給元件定義方法

從上面可以看出給元件定義方法不再用 函式名:function()的寫法，而是直接名字，方法的後面也不用用逗號（,）

五、定義元件的屬性型別和預設屬性

在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 (
            <View /> );
    } // 注意這裡既沒有分號也沒有逗號
}

六、初始化state

ES5如下：

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

ES6如下：

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

不過我們推薦更易理解的在建構函式中初始化（這樣你還可以根據需要做一些計算）：
//ES6
class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

七、把方法作為回撥提供

//ES5

var MyComponent=React.createClass({
	_example:function(){
		console.log('example')
	},
	render:function(){
	return(
		<View>
			<TouchableHighlight onPress={this._example}>	
			<Text>...</Text>
			</TouchableHighlight>		
		</View>
		)
	}
})

//在ES6下可以通過bind來繫結引用，或者使用箭頭函式（它會綁定當前的scope的this引用）來呼叫

class MyComponent extends React.component{
	_example(){
	console.log('example')
	}
	render(){
	return(
		<View>
			<TouchableHighlight onPress={this._example.bind(this) or  ()=>{this._example()}}>	

			<Text>...</Text>

			</TouchableHighlight>
		</View>
		)
	}
}