React項目中出現頻率較高的ES6語法

學習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/...