前言
React-Native官方推薦使用ES6標準,但是網上很多資料都是基于ES5標準來寫的.給我們這樣的初入者帶來很大麻煩.一起來看下到底有哪些不同
主要有以下四大區別
一,在定義上的區別
在定義組件，方法，屬性等方面是有所不同
a)定義組件
ES5定義組件:通過React.createClass來定義一個組件類
var Student = React.createClass({
render(): function() {
return (
<Text/>{name}<Text>
);
},
});
ES6定義組件:通過繼承React.Component 來定義一個組件類
class Student extends React.Component({
render() {
return (
<Text/>{name}<Text>
);
},
});
b)定義方法
相比ES5，ES6在方法定義上語法更加簡潔，從上面的例子里可以看到，給組件定義方法不再用 名字: function()的寫法，而是直接用名字()，在方法的最后也不能有逗號了
ES5定義方法:
var Student = React.createClass({
test: function(){
},
render() : function(){
return (
<Text/>{name}<Text>
);
},
});
ES6定義方法:
var Student = React.createClass({
test{
},
render() {
return (
<Text/>{name}<Text>
);
},
});
c)定義組件的屬性類型和默認屬性
ES5:屬性類型和默認屬性分別通過propTypes成員和getDefaultProps方法來實現
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成員來實現
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 />
);
} // 注意這里既沒有分號也沒有逗號
}
2,在引入(import)與導出(export)組件上的區別
a)引入組件
ES5引入組件 : 引入React包基本通過require進行
D5B4325F-F9F9-4DCD-BB4C-88A1A69956C2.png
ES6引入組件 : 沒有了require，而是使用import來導入組件，有點像Java的寫法
3646D7C0-68E6-440A-B013-5A8C3D4D6F31.png
b)導出組件
ES5導出組件 : 要導出一個類給別的模塊用，一般通過module.exports來導出
97AC3449-0101-4400-BD79-A750ACB2F033.png
ES6導出組件 : 通常用export default來實現相同的功能
6AAC24D8-AA21-4958-AC30-3DAFFBB7392A.png
3,在初始化state上的區別
ES5
var Video = React.createClass({
getInitialState() {
return {
loopsRemaining: this.props.maxLoops,
};
},
})
ES6
class Video extends React.Component {
state = {
loopsRemaining: this.props.maxLoops,
}
}
不過我們推薦更易理解的在構造函數中初始化（這樣你還可以根據需要做一些計算）：
class Video extends React.Component {
constructor(props){
super(props);
this.state = {
loopsRemaining: this.props.maxLoops,
};
}
}
4,在方法作為回調上的區別
在開發工作中，經常會使用到回調，如按鈕的單擊回調等，這也是在很多編程語言中都會經常出現的情況
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會把所有的方法都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>
)
},·
}
