本篇博文主要整理ES6標準寫法。

• 模組引用
• 匯出單個類
• 定義元件
• 給元件定義方法
• 定義元件的屬性型別和預設屬性
• 初始化State
• 把方法作為回撥提供

• 模組引用ES6寫法

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

• 匯出單個類ES6寫法
  在ES6裡，通常用export default來實現相同的功能：

//ES6
export default class MyComponent extends Component{
    ...
}
 

引用的時候是這樣子引用的：

//ES6
import MyComponent from './MyComponent';

• 定義元件
  我們通過定義一個繼承自React.Component的class來定義一個元件類

//ES6
class Photo extends React.Component {
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

• 給元件定義方法

//ES6
class Photo extends
 
 React.Component {
    componentWillMount() {

    }
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

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

//ES6
class Video extends React.Component {
    render() {
        return (
            <View />
        );
    }
}
Video.defaultProps = {
    autoPlay: false
 
,
    maxLoops: 10,
};
Video.propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
};

• 初始化State

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

• 把方法作為回撥提供
  這裡要宣告一下，在ES5下，React.createClass會把所有的方法都bind一遍，這樣可以提交到任意的地方作為回撥函式，而this不會變化。但官方現在逐步認為這反而是不標準、不易理解的。
  在ES6下，你需要通過bind來繫結this引用，或者使用箭頭函式（它會綁定當前scope的this引用）來呼叫

//ES6
class PostInfo extends React.Component
{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            <TouchableHighlight 
                onPress={this.handleOptionsButtonClick.bind(this)}
                onPress={e=>this.handleOptionsButtonClick(e)}
                >
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
}

最後附上參考資料：參考資料