React知识地图--ES6-白红宇

React知识地图--ES6

阅读量：6974 次

发布时间：2019-06-27

本文共 2795 字，大约阅读时间需要 9 分钟。

原文在我的博客：
如果喜欢请start或者watch。这将是我继续写下去的动力。

这里梳理下React技术栈需要的最小知识集，让你可以最短时间掌握React,Redux,React-Router,ES6的相关知识，更快的上手React”全家桶“。预计会有ES6、React、Redux、React-Router、Webpack，实时更新目录。

ES6

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对象，就是定义时所在的对象，而不是使用时所在的对象。

// ES6function Timer() {  this.s1 = 0;  setInterval(() => this.s1++, 1000);}// 等同于ES5function 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.jsexport default function counter() {   // ...}import counter from 'counter'; // 普通导出和导入，reducer.jsexport 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+ccounter(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 ignoreconst [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');});