React知识地图--ES6
这里梳理下React技术栈需要的最小知识集,让你可以最短时间掌握React,Redux,React-Router,ES6的相关知识,更快的上手React”全家桶“。预计会有ES6、React、Redux、React-Router、Webpack,实时更新目录。
ES6
变量声明let 和 const不要用 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 允许使用“箭头”(=>)定义函数。 // 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
//导出默认,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,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','c'); // ['b','c']; 代替 apply。 function foo(x,y,z) {} const args = [1,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} PromisePromise 用于更优雅地处理异步请求。比如发起异步请求: 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |