React知识地图--ES6

SillyMonkey 发布于2019-08-20 18:28 / 2539人阅读

摘要：预计会有，实时更新目录。声明一个只读的常量，用来声明变量，和都是块级作用域。模板字符串模板字符串是增强版的字符串，用反引号标识。

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

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

服务器托管超融合服务器 ES6 es6-系列 ES6入门 es6 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84560.html

web前端技术体系大全

以下为个人目前接触到的前端技术，欢迎大家补充。一、前端技术框架 1、Vue.js 官网：https://cn.vuejs.org/ Vue CLI：https://cli.vuejs.org/ 菜鸟教程：http://www.runoob.com/w3cnote... Nuxt.js：https://zh.nuxtjs.org/ 桌面应用Electron：https:...

RaoMeng 2019-08-23 15:53 评论0 收藏0
web前端技术体系大全

以下为个人目前接触到的前端技术，欢迎大家补充。一、前端技术框架 1、Vue.js 官网：https://cn.vuejs.org/ Vue CLI：https://cli.vuejs.org/ 菜鸟教程：http://www.runoob.com/w3cnote... Nuxt.js：https://zh.nuxtjs.org/ 桌面应用Electron：https:...

1treeS 2019-08-05 18:13 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
前端人员必须知道的三个问题

摘要：第一个问题前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段初级阶段入门常见标签，新增的，语义化标签等等选择器，背景，文本，链接，列表，盒模型，定位，浮动，新增的属性栅格化系统，按钮，表单，导航数据类型，对象，函数，运算符，语句，，选第一个问题：前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段：初级阶段：（入门） html：常见标签，html5新增的，语义化标签等等...

zollero 2019-08-02 16:13 评论0 收藏0
前端人员必须知道的三个问题

摘要：第一个问题前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段初级阶段入门常见标签，新增的，语义化标签等等选择器，背景，文本，链接，列表，盒模型，定位，浮动，新增的属性栅格化系统，按钮，表单，导航数据类型，对象，函数，运算符，语句，，选第一个问题：前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段：初级阶段：（入门） html：常见标签，html5新增的，语义化标签等等...

王晗 2019-08-23 16:59 评论0 收藏0