react-native ES5与ES6写法对照表

时间  2019-11-20
标签 react native es5 es6 写法 对照表 栏目 React 繁體版
原文   原文链接

转载连接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-es5-and-es6-writing-table/react

 对于不少初次学习React-Native人来讲，都会为ES6语法所困惑，由于网上好多React-Native的Demo都是用ES5语法写的。因此我刚开始也是学的ES5，对我来讲ES5语法比较熟悉，可是看到ES6的语法刚开始就感受怪怪的，相信对初次接触ES6写法的es6

人来讲都会有这样的感受。今天我就整理下ES5跟ES6写法的规范，但愿会对你有所帮助。react-native

1、模块引用ide

在ES5里引入React的包基本经过require进行，代码以下:函数

    //ES5oop

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

2、导出单个类post

//在ES6中用，import导入学习

import React,{Image,Text,PropTypes} from 'react-native'

在ES5中，通常经过module.exports来导出ui

//ES5this

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'

3、定义组件

在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>
 )
 }
}

4、给组件定义方法

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

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

在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 /> );
    } // 注意这里既没有分号也没有逗号
}

 

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

 

7、把方法做为回调提供

//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写法的规范，但愿会对你有所帮助。

1、模块引用

在ES5里引入React的包基本经过require进行，代码以下:

    //ES5

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

2、导出单个类

//在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'

3、定义组件

在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>
 )
 }
}

4、给组件定义方法

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

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

在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 /> );
    } // 注意这里既没有分号也没有逗号
}

 

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

 

7、把方法做为回调提供

//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>
		)
	}
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程