react-native ES5与ES6写法对照表

转载链接: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

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

二、导出单个类

//在ES6中用，import导入

importReact,{Image,PropTypes}from'react-native'

在ES5中，一般通过module.exports来导出

//ES5

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

//ES6

exportdefaultclassMyComponentextendsReact.component{
....
}

引用的时候:

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

importMyComponentfrom'./MyComponent.js'

三、定义组件

在ES5中，通过React.createClass来定义一个组件类。如下所示:

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

在ES6里，通过定义一个继承自React.Component的class来定义一个组件:

classMyComponentextendsReact.component{ render(){ return( <Text>...</Text> ) } }

四、给组件定义方法

从上面可以看出给组件定义方法不再用函数名:function()的写法，而是直接名字，方法的后面也不用用逗号（,）

五、定义组件的属性类型和默认属性

在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现

//ES5
varVideo=React.createClass({
getDefaultProps:function(){
return{
autoplay:false,maxLoops:10,};
},propTypes:{
autoplay:React.PropTypes.bool.isrequired,maxLoops:React.PropTypes.number.isrequired,posterFrameSrc=\'#\'" />);
},});

在ES6里，可以统一使用static成员来实现

//ES6
classVideoextendsReact.Component{
staticdefaultProps={
autoplay:false,};//注意这里有分号
staticpropTypes={
autoplay:React.PropTypes.bool.isrequired,posterFrameSrc=\'#\'" //注意这里有分号
render(){
return(
<View/>);
}//注意这里既没有分号也没有逗号
}

六、初始化state

ES5如下：

//ES5
varVideo=React.createClass({
getinitialState:function(){
return{
loopsRemaining:this.props.maxLoops,})

ES6如下：

//ES6
classVideoextendsReact.Component{
state={
loopsRemaining:this.props.maxLoops,}
}

不过我们推荐更易理解的在构造函数中初始化（这样你还可以根据需要做一些计算）：
//ES6
classVideoextendsReact.Component{
constructor(props){
super(props);
this.state={
loopsRemaining:this.props.maxLoops,};
}
}

七、把方法作为回调提供

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

//在ES6下可以通过bind来绑定引用，或者使用箭头函数（它会绑定当前的scope的this引用）来调用

classMyComponentextendsReact.component{
	_example(){
	console.log('example')
	}
	render(){
	return(
		<View>
			<TouchableHighlightonPress={this._example.bind(this)or()=>{this._example()}}>	

			<Text>...</Text>

			</TouchableHighlight>
		</View>
		)
	}
}

react-native ES5与ES6写法对照表

相关文章