[ES6]react中使用es6语法
前言
不论是React还是React-native,facebook官方都推荐使用ES6的语法,没在项目中使用过的话,突然转换过来会遇到一些问题,如果还没有时间系统的学习下ES6那么注意一些常见的写法暂时也就够用的,这会给我们的开发带来很大的便捷,你会体验到ES6语法的无比简洁。下面就介绍我在react和react-native中从ES5转到ES6中体会到的几个对比。
ES6写组件的区别
直接在React v0.13.0 Beta 1中一个官方的演示来说明:
export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tick.bind(this)}>
Clicks: {this.state.count}
</div>
);
}
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };
和React.createClass方法来创建组件对比一下:
const Counter = React.createClass ({
getDefaultProps : function () {
return {
initialCount : 0
};
},
propTypes: {
initialCount: React.PropTypes.number
},
getInitialState: function() {
return { count: this.props.initialConunt};
},
tick: function() {
this.setState({count: this.state.count + 1});
},
render: function() {
return (
<div onClick={this.tick}>
Clicks: {this.state.count}
</div>
);
}
})
主要有三个区别:
创建组件的方法
用class声明来取代了React.createClass,这里简洁了许多。
props
- ES6中需要用在constructor中有super(props)来传递props。
- ES6中getDefaultProps是class的属性而不是方法,不能定义在组件内部,需要单独写在外面。
- 同理,ES6中propTypes也需要写在外面。
state
ES6不在需要getInitialState方法,而是直接在constructor中直接用this.state即可,更加方便。
this的绑定
这段代码采用了ES6后其中onClick={this.tick.bind(this)这里需要采用bind方法来绑定this,如果不绑定this,this.tick方法的this就会指向全局,绑定了this之后将this绑定到组件实例之上。但是我们应该还记得js中bind方法每运行一次就返回一个新的函数,在react中也就是每次render都会创建一个新的函数,所以我们最好将其绑定constructor中:
export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tick}>
Clicks: {this.state.count}
</div>
);
}
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };
这样只会创建一次。当然这样写略显繁琐,有没有更好的方法呢? 当然! ES6为我们提供了箭头函数,根本不需要在绑定this这种操作了。
export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
tick = () => {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tick}>
Clicks: {this.state.count}
</div>
);
}
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };
箭头函数不会创建自身的this上下文,this就指向组件实例。建议就用箭头函数,代码会精简很多。
总结
知道这几点区别以后,再去找个教程熟悉下ES6的语法,基本就可以用ES6来写react了,感觉js的标准越来越向java和python等靠近,前端后端都要融合了哈哈。
参考
最新文章
- 打造AngularJs2.0开发环境
- python 使用总结
- 通过反射绑定事件_Office Visio
- Android Library Project 使用问题总结
- 《CLR via C#》读书笔记(5)基元类型、引用类型和值类型
- Mac下Apache Tomcat安装配置
- STL之list容器用法
- Windows Server 2008 R2 密码破解
- C#三大支柱之继承
- phpcmsV9中表单向导在js调用里日期控件在IE下报Calendar未定义的解决办法
- 使用HttpWebRequest进行请求时发生错误:基础连接已关闭,发送时发生错误处理
- shell 二元操作符 =~
- 定义的返回按钮 Push到下一个页面后 手势返回无效解决办法
- mac相关
- Android Studio JNI开发入门教程
- Java Restful Web Service 学习指南
- Mybatis中几个重要类
- python基础-->;流程控制-->;分支结构-->;单项分支-->;双向分支
- Java NIO中的Buffer 详解
- shell-自动按省市建立文件夹,并在每个城市下创建当前日期文件夹