React项目中涌现频次较高的ES6语法

2024年1月4日 164次阅读 来源: 云贤力

进修React过程当中，发明无论是github上的Demo照样React相干文档，ES6语法都有大批的运用。假如不相识一些ES6语法，很难进修下去。假如转战ES6，体系进修阵线又较长。所以把一些经常使用的ES6语法做一些总结，有助于读懂React，Redux的文档。迥殊提示：一些细节进修照样须要细致查阅文档。

能够经由过程这个在线东西写ES6代码：http://www.es6fiddle.net/

let&const

这两个关键字人人应当都有相识，主如果引入了块级作用域，不存在变量提拔，不能反复定义等特征。const是用来定义常量的。
文档：http://es6.ruanyifeng.com/#do…

解构赋值

通例用法

let { x } = { x: 1, y: 2}
let { PropTypes } = React

这是对象的解构赋值，同等于let PropTypes = React.PropTypes(注重这里包含了两步：声明变量PropTypes&赋值为React.PropTypes)。

所以如许写也是OK的

let PropTypes
{ PropTypes } = React

能够同时写多变量,如

let { PropTypes, Component } = React

假如想定义的变量名和属性名不一样，能够如许写

let { x: x1 } = { x: 1, y: 2}

声明x1变量，并赋值为1。注重x是形式，不是变量也不会被赋值

除了对象，数组，字符串等都有解构赋值的用法。
看文档：http://es6.ruanyifeng.com/#do…

对象的拓展

属性的简约表达方式

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 };

有几个注重点：
运用了ES6的继续语法，关键字extends

这里运用了上面说的语法：要领名的简写，注重要领之间不加,

constructor是组织函数，能够替换getInitialState。constructor内须要挪用父类的组织函数即super(props)，不然就会报错。由于子类没有本身的this对象，须要从父类继续。所以有用到this的语句须要写在super(props)以后。

this.tick = this.tick.bind(this);

这里运用bind来绑定实行的作用域(运用React.createClass是自动绑定的)，也可在render中监听事宜的处所写bind(this)，以下:

<div onClick={this.tick.bind(this)}>
    Clicks: {this.state.count}
</div>

不过官方文档发起是一致写在constructor 中，如许该要领就只须要绑定一次。

除了运用bind(this)，还能够运用箭头函数

<div onClick={()=>this.tick()}>
    Clicks: {this.state.count}
</div>

这里就表现了箭头函数的特征：

函数体内的this就是定义时的对象，而不是挪用时地点的对象。也就是说箭头函数的this指向是牢固的，而一般函数是可变的。

箭头函数

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的class语法时也提到：箭头函数的this对象就是定义时地点的this对象，与实行时地点的对象无关
另有一点能够协助明白：箭头函数的this指向能坚持稳定，不是由于内部有绑定的机制，而是箭头函数没有本身的this，致使代码内的this就是外层代码块的this
看文档：http://es6.ruanyifeng.com/#do…箭头函数

export&import

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敕令，用于输出默许的要领，变量或类

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

Object.assgin({}, state, { name: 'x', id: 101 })

运用拓展运算符须要装置transform-object-rest-spread插件，然后在babel中设置。设置以下:

test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query:{
    presets: ['react', 'es2015'],
    plugins: ["transform-object-rest-spread"]
}

文档：http://babeljs.io/docs/plugin…
http://es6.ruanyifeng.com/#do…对象的扩大运算符

引荐ES6教程：http://www.hubwiz.com/course/…

    原文作者：云贤力
    原文地址: https://segmentfault.com/a/1190000005720085
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞