React项目中出现频率较高的ES6语法
学习React过程中,发现无论是github上的Demo还是React相关文档,ES6语法都有大量的使用。如果不了解一些ES6语法,很难学习下去。如果转战ES6,系统学习战线又较长。所以把一些常用的ES6语法做一些总结,有助于读懂React,Redux的文档。特别提醒:一些细节学习还是需要仔细查阅文档。 可以通过这个在线工具写ES6代码:http://www.es6fiddle.net/ let&const这两个关键字大家应该都有了解,主要是引入了块级作用域,不存在变量提升,不能重复定义等特性。const是用来定义常量的。 解构赋值常规用法 let { x } = { x: 1,y: 2} let { PropTypes } = React 这是对象的解构赋值,等同于 所以这样写也是OK的 let PropTypes { PropTypes } = React 可以同时写多变量,如 let { PropTypes,Component } = React 如果想定义的变量名和属性名不一样,可以这样写 let { x: x1 } = { x: 1,y: 2} 声明x1变量,并赋值为1。注意x是模式,不是变量也不会被赋值 除了对象,数组,字符串等都有解构赋值的用法。 对象的拓展属性的简洁表达方式let x = '123' let obj = { x,y: '33' }//等同于 let obj = { x: x,y: '33'} 如上代码所示,ES6允许对象内只写属性名,不写属性值,属性值就等于改与属性名相等的变量值 方法名也可以简写let User = { method() { //等同于method: function(){ //... } } 属性名表达式let key = 'id' let obj = { [key]: '1010',//注意与 key: '1010' 的区别 ['use' + 'name' ]: 'x' } 把表达式写在 let key = 'id' let id = '1010' let obj = { [key] } ES6 Class使用ES6语法来定义一个React组件 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 }; 有几个注意点: 这里使用了上面说的语法:方法名的简写,注意方法之间不加
this.tick = this.tick.bind(this); 这里使用 <div onClick={this.tick.bind(this)}> Clicks: {this.state.count} </div> 不过官方文档建议是统一写在 除了使用 <div onClick={()=>this.tick()}> Clicks: {this.state.count} </div> 这里就体现了箭头函数的特性:
箭头函数ES6允许使用 let f = v => v + 2 //等同于 let f = function(v){ return v + 2 } 如果有多个参数 let f = (x,y) => x + y 函数体有多条语句,用大括号包起来 let f = (x,y) => { x = x + 1 y = y + 3 return x + y } 在总结ES6的 export&import
export let client = 'APP' //输出变量 export function mul(x,y){ //输出函数 return x + y } export class Toast(){} //输出类 也可以统一输出 //文件名 util.js let client = 'APP' //输出变量 function mul(x,y){ //输出函数 return x + y } export { client,mul } 对应的导入应该这样用: //注意这里有大括号,并且名称和输出时保持一致 import { client,mul } from './util.js' 下面这样写也可以 import * as U from './util.js' U.client //使用 我们很常用还有 export default React.createClass({ // ... }) 引入的时候就比较方便,可以随意指定名字 import Tab from 'tab' //注意这里没有大括号 文档:http://es6.ruanyifeng.com/#do... 对象的拓展运算符...拓展运算符属于ES7的提案,但babel已经支持,在Redux的示例Demo中很常见。 //state = { name: 'y' } return {...state,name: 'x',id: 101 } //返回 { name: 'x',id: 101} 有两个点:取出state对象的所有可遍历属性,拷贝到当前对象上;如果自定义的属性放后面,拓展运算符的同名属性值则会覆盖掉。 这中用法等同与 Object.assgin({},state,{ name: 'x',id: 101 }) 使用拓展运算符需要安装 test: /.js$/,exclude: /node_modules/,loader: 'babel',query:{ presets: ['react','es2015'],plugins: ["transform-object-rest-spread"] } 文档:http://babeljs.io/docs/plugin... 推荐ES6教程:http://www.hubwiz.com/course/... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |