React知識地圖--ES6

原文在個人博客：https://github.com/YutHelloWo...
若是喜歡請start或者watch。這將是我繼續寫下去的動力。

這裏梳理下React技術棧須要的最小知識集，讓你能夠最短期掌握React,Redux,React-Router,ES6的相關知識，更快的上手React」全家桶「。預計會有ES六、React、Redux、React-Router、Webpack，實時更新目錄。

• ES6
• React
• Redux

ES6

變量聲明

let 和 const

不要用var，而是用let 和 const 。const聲明一個只讀的常量，let用來聲明變量，const 和 let 都是塊級做用域。

const PLUS = 'PLUS';

let availableId = 0;
availableId ++;

模板字符串

模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

const user = 'world';
console.log(`hello ${user}`);  // hello world

// 多行（全部的空格和縮進都會被保留在輸出之中）
const content = `
  Hello ${firstName},
  Thanks for ordering ${qty} tickets to ${event}.
`;

默認參數

function log(user = 'World') {
  console.log(user);
}

log() //  World

箭頭函數

ES6 容許使用「箭頭」（=>）定義函數。
函數的快捷寫法，不須要經過 function 關鍵字建立函數，而且還能夠省略 return 關鍵字。
同時，箭頭函數還會繼承當前上下文的 this 關鍵字，即：函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

// ES6
function Timer() {
  this.s1 = 0;
  setInterval(() => this.s1++, 1000);
}

// 等同於ES5
function Timer() {
  this.s1 = 0;
  setInterval((function () {
    this.s1++;
  }).bind(this), 1000);
}

const timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100); 
// s1:3

模塊的 Import 和 Export

import 用於引入模塊，export 用於導出模塊。

//導出默認, counter.js
export default function counter() { 
  // ...
}

import counter from 'counter'; 

// 普通導出和導入，reducer.js
export const injectReducer = ( ) => {
  //...
}

import { injectReducer } from 'reducers'

// 引入所有並做爲 reducers 對象
import * as reducers from './reducers';

ES6 對象和數組

解構賦值

// 數組
let [a, b, c] = [1, 2, 3];
a // 1

//對象
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"

函數的參數也可使用解構賦值。

function add ([x, y]) {
  return x + y;
}

add([1, 2]); // 3

函數參數的逐層解析

const x = {
  a : {
    b : 1
  },
  c : 2
}
const counter = ({a : {b}, c}) => b+c
counter(x) // 3

屬性的簡潔表示法

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同於
const baz = {foo: foo};

除了屬性簡寫，方法也能夠簡寫。

const o = {
  method() {
    return "Hello!";
  }
};

// 等同於

const o = {
  method: function() {
    return "Hello!";
  }
};

擴展運算符

擴展運算符（spread）是三個點（...）。它比如 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列。
組裝數組

const a = [1, 2];
const b = [...a, 3];
b // [1,2,3]

獲取數組部分

const arr = ['a', 'b', 'c'];
const [first, ...rest] = arr;
rest;  // ['b', 'c']

// With ignore
const [first, , ...rest] = arr;
rest;  // ['c']

還可收集函數參數爲數組。

function directions(first, ...rest) {
  console.log(rest);
}
directions('a', 'b', 'c');  // ['b', 'c'];

代替 apply。

function foo(x, y, z) {}
const args = [1,2,3];

// 下面兩句效果相同
foo.apply(null, args);
foo(...args);

組裝對象

const a = { x : 1, y : 2 }
const b = { ...a, z : 3 }
b // {x:1, y: 2, z: 3}

Promise

Promise 用於更優雅地處理異步請求。好比發起異步請求：

fetch('/api/todos')
  .then(res => res.json())
  .then(data => ({ data }))
  .catch(err => ({ err }));

定義 Promise 。

const delay = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
};

delay(1000).then(_ => {
  console.log('executed');
});

寫在最後

這只是個簡潔的ES6經常使用特性總結，更全和更詳盡的文檔請參閱Learn ES2015