原文在我的博客:https://github.com/YutHelloWo...
如果喜欢请start或者watch。这将是我继续写下去的动力。
这里梳理下React技术栈需要的最小知识集,让你可以最短时间掌握React,Redux,React-Router,ES6的相关知识,更快的上手React”全家桶“。预计会有ES6、React、Redux、React-Router、Webpack,实时更新目录。
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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。