節(jié)選自：這個(gè)網(wǎng)址

模塊引用

在ES5里，如果使用CommonJS標(biāo)準(zhǔn)，引入React包基本通過require進(jìn)行，代碼類似這樣：

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

在ES6里，import寫法更為標(biāo)準(zhǔn)

//ES6
import React, { Component, PropTypes,} from 'react';

導(dǎo)出單個(gè)類

在ES5里，要導(dǎo)出一個(gè)類給別的模塊用，一般通過module.exports來導(dǎo)出

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

在ES6里，通常用export default來實(shí)現(xiàn)相同的功能：

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

引用的時(shí)候也類似：

//ES5
var MyComponent = require('./MyComponent');
//ES6
import MyComponent from './MyComponent';

注意導(dǎo)入和導(dǎo)出的寫法必須配套，不能混用！

定義組件

在ES5里，通常通過React.createClass來定義一個(gè)組件類，像這樣：

//ES5
var Photo = React.createClass({
 render: function() {
 return ( <Image source={this.props.source} /> );
 }
});

在ES6里，我們通過定義一個(gè)繼承自React.Component的class來定義一個(gè)組件類，像這樣：

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

給組件定義方法

從上面的例子里可以看到，給組件定義方法不再用 名字: function()
的寫法，而是直接用名字()，在方法的最后也不能有逗號(hào)了,可以有分號(hào)

//ES5
 var Photo = React.createClass({
 componentWillMount: function(){ },
 render: function() {
 return ( <Image source={this.props.source} /> );
 }
});
//ES6
class Photo extends React.Component { 
componentWillMount() { }
 render() { 
return ( <Image source={this.props.source} /> );
 }
}

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

在ES5里，屬性類型和默認(rèn)屬性分別通過propTypes成員和getDefaultProps方法來實(shí)現(xià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里，可以統(tǒng)一使用static成員來實(shí)現(xiàn)

//ES6
class Video extends React.Component { 
static defaultProps = { autoPlay: false, maxLoops: 10, }; // 注意這里有分號(hào) 
static propTypes ={
autoPlay: React.PropTypes.bool.isRequired, 
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired, 
videoSrc: React.PropTypes.string.isRequired
}; // 注意這里有分號(hào)
render() { return ( <View /> ); } // 注意這里既沒有分號(hào)也沒有逗號(hào)
}

注意: 對(duì)React開發(fā)者而言，static成員在IE10及之前版本不能被繼承，而在IE11和其它瀏覽器上可以，這有時(shí)候會(huì)帶來一些問題。React Native開發(fā)者可以不用擔(dān)心這個(gè)問題。

初始化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, }
}

不過我們推薦更易理解的在構(gòu)造函數(shù)中初始化（這樣你還可以根據(jù)需要做一些計(jì)算）：

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

把方法作為回調(diào)提供

很多習(xí)慣于ES6的用戶反而不理解在ES5下可以這么做：

//ES5
var PostInfo = React.createClass({ 
handleOptionsButtonClick: function(e) {
// Here, 'this' refers to the component instance. 
this.setState({showOptionsModal: true});
 },
render: function(){
return ( <TouchableHighlight onPress={this.handleOptionsButtonClick}> 
<Text>{this.props.label}</Text>
</TouchableHighlight> )
},
});

在ES5下，React.createClass會(huì)把所有的方法都bind一遍，這樣可以提交到任意的地方作為回調(diào)函數(shù)，而this不會(huì)變化。但官方現(xiàn)在逐步認(rèn)為這反而是不標(biāo)準(zhǔn)、不易理解的。
在ES6下，你需要通過bind來綁定this引用，或者使用箭頭函數(shù)（它會(huì)綁定當(dāng)前scope的this引用）來調(diào)用

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

箭頭函數(shù)實(shí)際上是在這里定義了一個(gè)臨時(shí)的函數(shù)，箭頭函數(shù)的箭頭=>
之前是一個(gè)空括號(hào)、單個(gè)的參數(shù)名、或用括號(hào)括起的多個(gè)參數(shù)名，而箭頭之后可以是一個(gè)表達(dá)式（作為函數(shù)的返回值），或者是用花括號(hào)括起的函數(shù)體（需要自行通過return來返回值，否則返回的是undefined）。

// 箭頭函數(shù)的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{ if (e == 0){
    return 0;
}
 return 1000/e;
}

需要注意的是，不論是bind還是箭頭函數(shù)，每次被執(zhí)行都返回的是一個(gè)新的函數(shù)引用，因此如果你還需要函數(shù)的引用去做一些別的事情（譬如卸載監(jiān)聽器），那么你必須自己保存這個(gè)引用

// 錯(cuò)誤的做法
class PauseMenu extends React.Component{
 componentWillMount(){
 AppStateIOS.addEventListener('change', this.onAppPaused.bind(this)); 
}
 componentDidUnmount(){ AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
 }
 onAppPaused(event){ }
}


// 正確的做法
class PauseMenu extends React.Component{ 
constructor(props){
 super(props); 
this._onAppPaused = this.onAppPaused.bind(this);
 } 
componentWillMount(){
 AppStateIOS.addEventListener('change', this._onAppPaused); 
} 
componentDidUnmount(){ AppStateIOS.removeEventListener('change', this._onAppPaused);
 }
 onAppPaused(event){ }
}

從這個(gè)帖子中我們還學(xué)習(xí)到一種新的做法：

// 正確的做法
class PauseMenu extends React.Component{ 
componentWillMount(){ 
AppStateIOS.addEventListener('change', this.onAppPaused); 
}
 componentDidUnmount(){ AppStateIOS.removeEventListener('change', this.onAppPaused); 
}
 onAppPaused = (event) => {
 //把方法直接作為一個(gè)arrow function的屬性來定義，初始化的時(shí)候就綁定好了this指針 
}
}