ES5 vs ES6
2024-03-23 14:33:46
ES5中
var React = require('react-native');
ES6中
import React from 'react-native';
.babelrc文件中添加一下内容
{
"whitelist": [
"es6.modules"
]
}
然后重新启动一下packger.sh，即npm start
ES5中
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
ES6中
let {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
ES5中
var MyComponent = React.createClass(
{
render: function(){
return （
<Text />
);
}
}
);
ES6中
class MyComponent extends React.Component {
render(){
return(
<Text />
);
}
}
ES5中
var NewDom = React.createClass({//类名一定要大写开头
getDefaultProps: function() {//设置默认属性
return {title:'133'};
},
propTypes: {
title:React.PropTypes.string,
},//属性校验器，表示必须是string
render: function() {
return <div>{this.props.title}</div>;//变量用花括号标识
}
});
ES6中
class NewDom extends React.Component{
//不能再组件定义的时候定义一个属性
render() {
return <div >1{this.props.title}</div>;
}//开头花括号一定要和小括号隔一个空格，否则识别不出来
}
//es6 这两个属性不能写在class内。
NewDom.propTypes={//属性校验器，表示改属性必须是bool，否则报错
title: React.PropTypes.bool,
}
NewDom.defaultProps={title:'133'};//设置默认属性
ES5中
class *** extends React.Component{
getInitialState: function() {
return {liked: false};
}
}
ES6中
class *** extends React.Component{
constructor(props) {
super(props);
this.state = {liked: false};
}
}
ES5中
var NewDom = React.createClass({//类名一定要大写开头
btnClick:function(ele){
console.info(ele);
console.info(this.refs.tex);
},
render: function() {
return <div >
<input type="text" ref="tex" />
<input type="button" onClick={this.btnClick} value='click me' />
</div>;//变量用花括号标识
}
});
ES6中
class NewDom extends React.Component{
btnClick(){
console.info(this);//this为该组件类
console.info(this.refs.tex);//this.refs.tex为组件里面索引为tex的
}
render() {
return <div >
<input type="text" ref="tex" />
<input type="button" onClick={this.btnClick.bind(this)} value='click me' />
</div>;//注意bind后面的this
}
}
ES6特征
- 类名(组件名)一定要用大写开头，否则自定义的组件无法编译，识别不出来。
- 类中定义render函数要注意两点，见代码注释。
render() {//开头花括号一定要和小括号隔一个空格，否则识别不出来
return <ol>//标签前一半一定要和return一行
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>;
}
最新文章
- lintcode 落单的数（位操作）
- 一个用微软官方的OpenXml读写Excel 目前网上不太普及的方法。
- PHP将在对象被销毁前调用这个函数.它称为析构函数
- Android应用启动时间及启动日志获取方法
- LA 6449 IQ Test
- 用户 'IIS APPPOOL\DefaultAppPool'登录失败
- 推荐大家使用的CSS书写规范、顺序（转载）
- html系列教程--标题，水平线，注释以及段落
- 运行java web项目时报错：Several ports (8005, 8080, 8009) required
- Android+Eclipse修改包路径
- MySQL性能优化神器—explain
- win10系统彻底卸载Mysql
- Windows远程桌面，连接被拒绝，因为没有授权此用户帐户进行远程登录。
- {MySQL完整性约束}一 介绍 二 not null与default 三 unique 四 primary key 五 auto_increment 六 foreign key 七 作业
- docker+redis安装与配置,主从+哨兵模式
- Xmanager Power Suit 6.0.0009 最新版注册激活
- U3D学习10——关节和射线检测
- VS2013 编辑器
- 解题：EXNR #1 金拱门
- uni/微信小程序 - 使用字体图标