语法对照表ES5VSES6
模块
导入
在ES5里面,如果使用CommonJS的标准,引入包一般是使用require来的
//ES5
var React = require("react")
var {
Component,
ProTypes
} = React //引入React的抽象类
var ReactNative = require("react-native");
var {
Image,
Text
}=ReactNative //引入具体的RN组件
在ES6里,采用import来引入
ES6
import React,{
Component,
ProTypes
} from 'react'
import {
Image,
Text
} from 'react-native'
类的导出导入
在ES里面 要导出一个类给别的模块用,一般是采用module.exports 来的
//ES5
var MyComponent = React.createClass({
...
})
module.exports = MyComponent
在ES6 采用export default
export default class MyComponet extends Component{
...
}
引用的时候也类似:
//ES5
var MyComponent = require('./MyComponent');
//ES6
import MyComponent from './MyComponent';
定义组件
在ES5里,通常通过React.createClass来定义一个组件类,像这样:
//ES5
var Photo = React.createClass({
render: function() {
return (
<Image source={this.props.source} />
);
},
});
在ES6里,我们通过定义一个继承自React.Component的class来定义一个组件类,像这样:
//ES6
class Photo extends React.Component {
render() {
return (
<Image source={this.props.source} />
);
}
}
给组件定义方法
从上面的例子里可以看到,给组件定义方法不再用 名字: function()的写法,而是直接用名字(),在方法的最后也不能有逗号了
//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} />
);
}
}
** 定义组件的属性类型和默认属性**
在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
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 />
);
} // 注意这里既没有分号也没有逗号
}
方法的回调
//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>
)
},
}
其他
// 正确的做法
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){
}
}
ES6+带来的其它好处
解构&属性延展
结合使用ES6+的解构和属性延展,我们给孩子传递一批属性更为方便了。这个例子把className以外的所有属性传递给div标签:
class AutoloadingPostsGrid extends React.Component {
render() {
var {
className,
...others, // contains all properties of this.props except for className
} = this.props;
return (
<div className={className}>
<PostsGrid {...others} />
<button onClick={this.handleLoadMoreClick}>Load more</button>
</div>
);
}
}
下面这种写法,则是传递所有属性的同时,用覆盖新的className值:
<div {...this.props} className="override">
…
</div>
这个例子则相反,如果属性中没有包含className,则提供默认的值,而如果属性中已经包含了,则使用属性中的值
<div className="base" {...this.props}>
…
</div>
语法对照表ES5VSES6的更多相关文章
- Pascal、VB、C#、Java四种语法对照表
因为工作原因,自学会了vb后陆续接触了其它语言,在工作中经常需要与各家使用不同语言公司的开发人员做程序对接,初期特别需要一个各种语法的对照比,翻看了网络上已有高人做了整理,自己在他基础上也整理了一下, ...
- TestNG官方文档中文版(2)-annotation(转)
1. 介绍 TestNG是一个设计用来简化广泛的测试需求的测试框架,从单元测试(隔离测试一个类)到集成测试(测试由有多个类多个包甚至多个外部框架组成的整个系统,例如运用服务器). 编写一个测试的 ...
- (转) 将VB.NET网站转换成C#的全过程
在学习URL重写过程中碰到个是VB写的源码,看起来总是不爽的就GOOLE了下 感觉这个文章写的不错 原文地址 http://www.cnblogs.com/cngunner/archive/2006/ ...
- xsoup,Jsoup
Xsoup 0.2.0 Xsoup 的详细介绍:请点这里 Xsoup 的下载地址:请点这里 https://github.com/code4craft/xsoup http://www.oschina ...
- TestNG详解-深度好文
转自: https://blog.csdn.net/lykangjia/article/details/56485295 TestNG详解-深度好文 2017年02月22日 14:51:52 阅读数: ...
- TestNG简单的学习-TestNG运行
转载:http://topmanopensource.iteye.com/blog/1983735 TestNG简单的学习-TestNG运行 文档来自官方地址: http://testng.org/d ...
- react-native 常见问题
1.webpack使用babel-loader后编译报错 报错ERROR in ./entry.js Module build failed: SyntaxError: /Users/yixin/De ...
- C++、Java语法差异对照表
C++.Java语法差异对照表 C++ and Java Syntax Differences Cheat Sheet First, two big things--the main function ...
- React Native之ES5/ES6语法差异对照表
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
随机推荐
- mongodb安全权限设定
mongodb安全权限设定 如何防范此类攻击? 做好访问认证.打开你的MongoDB配置文件(.conf),设置为auth=true 做好防火墙设置.建议管理者关闭27017端口的访问. Bind_i ...
- jenkins2
创建工程 Eclipse创建工程:注意工程的路径,不是/home/svn,这个是svn的根目录. 是工程上传的路径,Apple直接下面有pom文件. 创建工程,创建一个任务就是创建一个工程. 需要注意 ...
- Qt浅谈之一:内存泄露(总结)
一.简介 Qt内存管理机制:Qt 在内部能够维护对象的层次结构.对于可视元素,这种层次结构就是子组件与父组件的关系:对于非可视元素,则是一个对象与另一个对象的从属关系.在 Qt 中,在 Q ...
- Icarscan VCI is definitely the update variation of Start iDiag
Start iCarScan is alternative of Super X431 iDiag, it’ll make your Android smartphone or tablet righ ...
- 关于HashSet的equals和hashcode的重写
关于HashSet的equals和hashcode的重写:package Test; import java.util.HashSet; import java.util.Set; public cl ...
- centos7 static for django2.1
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...
- oracle 12cR2 smart flash cache实测
最近一直在处理新系统的性能优化问题,这两天特地测试了下oracle 11gR2开始引入的smart flash cache. 其介绍参考MOS文档,How To Size the Database S ...
- Latex 公式积累
NLP 语言模型 最大似然估计 \(p(w_{i} | w_{i-1}) = \frac{c(w_{i-1}w_{i})}{\sum \limits_{w_{i}} c(w_{i-1}w_{i})}\ ...
- opencv学习之路(6)、鼠标截图,滑动条播放视频
一.鼠标截图 #include<opencv2/opencv.hpp> #include<iostream> using namespace cv; using namespa ...
- JS深拷贝/深克隆(面试用)
晒下我的比较浅显的深拷贝,没有考虑原型和循环引用,可以拷贝一些js原生类型,用于面试用. function deepClone(obj){ if(Object.prototype.toString.c ...