正文
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
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>
)
}
}
对于很多初次学习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>
)
}
}
