好久没更新博客了🙄, 这篇可以结合 Babel 7 升级实践 一起看

缘起

• A：我这边有问题啊，怎么页面空白？
• B：我这里明明是好的！
• A：你自己来试
• B：怎么这么多奇奇怪怪的问题

这是发生在我和同事之间的对话。我跑过去看了一下控制台，页面直接爆炸💥了：

1

Uncaught TypeError: $ is not a function

定位到是 core-js 的某个文件提示这个错，怎么回事？

google 了一圈，再结合项目的配置，终于定位到问题：babel 编译 node_modules, core-js 自己 polyfill 自己，导致的报错。

原因分析

好长一段时间没有看 babel 的配置，又重新学习了一遍。

我之前的博客 Babel 7 升级实践 在最后面的总结中提到，Babel 7 解决了编译 node_modules 的问题, 所以按照我们之前学到的内容，项目的 babel 的配置可能会是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
  "presets": [
    [
      "@babel/preset-env",
      {
        modules: false,
        useBuiltIns: 'usage',
        corejs: {
          version: 3,
          proposals: true,
        },
        targets: {
          chrome: 58,
          ie: 11,
        },
      },
    ]
  ]
}

但是我们项目里还有 core-js 和 webpack，所以可能就悲剧了：

1

Uncaught TypeError: $ is not a function

为什么呢？具体可以看这个 issue 的解释 ：

我们使用 polyfill 的时候会注入 require("core-js/..."), 这时

1. 导入 core-js
2. core-js 依赖 webpack/buildin
3. webpack/buildin 被编译，polyfill 需要依赖 core-js
4. core-js 在 1 已经导入过，module.exports 初始化成了 {}，原本是期望导入的是个函数，也就出现错误。

所以在编译 node_modules 时，需要注意：

• 排除掉 core-js
• webpack/buildin
• 如果还用到了 @babel/plugin-transform-runtime，还需要排除 @babel/runtime-corejs3

也就是 babel 需要添加下面配置：

1
2
3
4
5

exclude : [
  /\bcore-js\b/,
  /\bwebpack\/buildin\b/,
  /@babel\/runtime-corejs3/
]

通过 chrome 的调试，也可以确定上面说的，最后 $ 其实是一个空对象（也就是导入了空对象，不是期望的函数）

我们断点在报错的位置：

可以看到是导入 /internals/export 是个空对象。我们找到 /internals/export ，在顶部断点后刷新页面，会发现先执行了这个文件

由此我们大致可以看出来过程：
1、require /internals/export
2、/internals/export 往后执行，又 require 了 es.array.index-of
3、es.array.index-of 这时候 require /internals/export
4、/internals/export 已经导入了，module.exports 初始化成了 {}，所以 $ 赋值成了空对象，继续执行就报错了

问题来了？为什么 $ 会变成，其实是 commonjs 循环 import 的问题。

循环导入

上面的问题，可以说是 commonjs 的特性，看下面的例子：

1
2
3
4
5

File A:
var b = require(`file B`)

File B:
var a = require(`file A`)

当使用 commonjs require 一个模块的时候，模块的 export 会初始化成空对象：

1

module.exports = {}

在执行这个模块里的后续代码时，会对 export 进行扩展或者重写，也就是我们平时导出的内容：

1
2
3

exports.namedExport = function() { /* ... */ }; // extends

module.exports = { namedExport: function() { /* ... */ } }; // overrides

但是我们上面的代码，情况是这样的：

• require 模块A，A 的导出初始化成空对象
• A 又去 require 模块 B
• B 这时又 require A

而 A 在一开始已经 require 过，A 里的后续代码不会再执行，所以返回了一个空对象。如果 A 继续执行，就会导致死循环了。所以 a 的值也就是个空对象了。

最开始的问题

通过上面的内容，我们知道了，只要我们编译 node_modules 时候，排除一些不需要的文件就行了。

但是在我们的项目，其实是已经配置了：

1
2

// babel.config.js
ignore: [/\core-js/, /webpack\/buildin/]

所以在我自己的电脑上是没问题的。问题在哪？

我用的是 mac，同事的是 windows，看来是 windows 下出现的问题。

查了一下 babel 的文档，发现 ignore 的匹配模式有两种，我们这里用的是 RegExp：

RegExp - A regular expression to match against the normalized filename. On POSIX the path RegExp will run against a /-separated path, and on Windows it will be on a -separated path.

也就是说 mac 和 windows 的分隔符是没法自动处理的，需要区分！

解决办法也简单，可以使用 string 的模式，或者简单粗暴的直接添加对 windows 的匹配：

1
2

// babel.config.js
ignore: [/\/core-js/, /webpack\/buildin/, /\\core-js/, /webpack\\buildin/]

总结

在 babel 编译 node_modules 时，需要注意下面的配置：

• 看情况需要 exclude core-js、webpack/buildin、@babel/runtime-corejs3
• 如果是在 babel.config.js 配置匹配模式，需要注意是否有跨平台的问题，比如分隔符的兼容

最后需要吐槽一下：加了 node_modules 编译，初次编译慢了一倍！！！告辞！👋

THE END！

参考资料

• circular imports with webpack returning empty object
• How to exclude core-js using useBuiltIns: “usage”
• Babel MatchPattern
• useBuiltins: ‘usage’ fails with babel-loader when not excluding node_modules
• Uncaught TypeError: isObject is not a function (with useBuiltIns: usage)

最近在整理文档和一些团队规范，整理了一下团队中使用 Git 的一些规范。

规范的制定，要根据不同团队和场景

分支命名

master 分支

• master 是主分支，用于部署线上生产环境
• master 分支由 release、hotfix 分支合并，禁止直接修改

release 分支

• release 是预发布分支，对应部署预发布环境
• release 分支一般由 develop 分支合并
• release 分支完成测试上线时，要分别合并到 master 和 develop 分支

develop 分支

• develop 为开发分支，对应部署测试环境
• develop 分支需要保持最新和 bug 修复后的代码

feature 分支

• 开发新功能时，从 develop 分支创建新的功能分支
• 功能分支都以 feature/ 开头，命名规则：feature/**，例如：feature/user-center
• 功能完成后合并到 develop 分支测试，并删除对应的功能分支

hotfix 分支

• 紧急修复 bug 分支，从 master 分支创建
• 命名以 hotfix/ 开头，例如：hotfix/user-bug
• bug 修复完成后，要分别合并到 master 和 develop 分支

注意点

• 为了保证 develop 分支是最新的，develop 在合并到 release 时，先合并一下 master 分支，可以避免之前忘记 release 或者 hotfix 合并到 develop
• 设置 master 为保护分支，控制权限
• 上线要合并到 master 时，通过在 gitlab 上提 Merge Request 给对应的管理员来操作
• 分支命名以 / 划分可以在 GUI 工具中分成一个目录分类
• 具体的操作流程要根据团队来调整

提交规范

日志规范

编写清晰良好的 commit message ，可以提高可读性，方便查看提交历史记录

业界广泛采用的一种规范是 Angular Git Commit Guidelines

在实际使用中，我们可以根据团队的情况来使用，例如简化使用：

1

<type>: <subject>

type的类别说明:

• feat: 添加新特性
• fix: 修复bug
• docs: 仅仅修改了文档
• style: 仅仅修改了空格、格式缩进、都好等等，不改变代码逻辑
• refactor: 代码重构，没有加新功能或者修复bug
• perf: 增加代码进行性能测试
• test: 增加测试用例
• chore: 改变构建流程、或者增加依赖库、工具等

subject 主要写清楚这次更新或者修改的内容

commit

完成一个功能点或者完成一次完整的修改后，再提交 commit。

WEB 应用越来越复杂，前端所承担的也不再仅仅是切图、写界面的任务。作为一个前端工程师，掌握必要的 WEB 安全相关的知识，也是必要的。
这里收集整理了 HTTP 中和安全相关的头信息内容，了解这些头信息，在提升网站的安全性上，是有不少帮助的。

安全相关的头信息

Content-Security-Policy

内容安全策略 CSP (Content-Security-Policy) 的主要目的是减少和报告 XSS 攻击。

实现的方式是通过白名单机制，也就是提供可信赖的外部资源来源的白名单，浏览器根据白名单来获取资源。

来看下 MDN 上提供的一个例子：

1

Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com; report-uri http://reportcollector.example.com/collector.cgi

default-src 'self';: 表示各种内容允许从文档所在的源获取(不包括其子域名)
img-src *;: 图片可以从任何地方加载
media-src media1.com media2.com;: 多媒体文件仅允许从 media1.com 和 media2.com 加载(不包括其子域名)
script-src userscripts.example.com: 可运行脚本仅允许来自于userscripts.example.com
report-uri: 设置这个选项，表示启用发送违规报告，也就是会把违规的信息 (JSON 格式) 发送到配置的 URI 地址

参考:

CSP Reference
内容安全策略( CSP )

Strict-Transport-Security

如果你的网站启动了 HTTPS，可以使用这个配置，告诉浏览器你的网站只能通过 HTTPS 来访问。

作用：例如我们在访问 HTTP 网站时，网站再自动跳转到 HTTPS，这个过程中，存在中间人攻击潜在威胁，因为在跳转到 HTTPS 之前，用户信息是未加密的。配置 STS 可以让浏览器自动替换 HTTP 为 HTTPS 请求。

示例：

1

Strict-Transport-Security: max-age=1000; includeSubDomains

max-age: 设置在浏览器收到这个请求后的 1000 秒的时间内凡是访问这个域名下的请求都使用HTTPS请求。

includeSubDomains 该网站的所有子域名也启用该规则。

参考：HTTP Strict Transport Security

X-Content-Type-Options

我们知道，浏览器会根据响应头的 Content-Type 来辨别请求资源的类型，例如："text/css" 表示 style 类型。但是如果不指定 MIME 类型或者指定错误，浏览器会进行 MIME 类型嗅探，猜测资源的类型，然后进行解析。而这个行为可能会被恶意攻击。

配置方式如下:

1

X-Content-Type-Options: nosniff

作用：通过这个配置，可以让浏览器按服务端返回的指定类型进行内容解析。

参考：X-Content-Type-Options

X-Frame-Options

这个响应头是用来告诉浏览器，这个页面是否可以被 <frame>, <iframe>, <embed>, <object> 嵌入。

作用：网站可以避免被嵌入到别人的网站中，从而避免点击劫持 (clickjacking)。

配置示例：

1

X-Frame-Options: deny

注意：这个功能，也可以通过 CSP 中配置 frame-ancestors: none 来实现，以后可能会慢慢淘汰非标准的 X-Frame-Options

参考：X-Frame-Options 响应头

X-XSS-Protection

顾名思义，这个是用来设置防御 XSS 攻击的。目前这个一般浏览器都是默认开启的。

配置示例：

1

X-XSS-Protection: 1; mode=block

作用：这个配置启用 XSS 过滤，如果检测到有 XSS 攻击，阻止页面加载。

参考：X-XSS-Protection

Set-Cookie

Set-Cookie 中的 Secure 和 HttpOnly 配置是用来保证 cookie 的安全的。

Secure: 配置这个安全属性，让 cookie 只在 HTTPS 中加密传输。

HttpOnly: 这个配置可以禁止通过 JavaScript 来访问 cookie，防止 XSS 攻击。

参考：Set-Cookie

Access-Control-Allow-Origin

这个响应头前端会比较熟悉，因为跨域请求里 (CORS)，就和这个有关系。

通过配置这个响应头，可以指定哪些域有权限访问该资源。

配置方法：

1

Access-Control-Allow-Origin: <origin>|*

参考：Access-Control-Allow-Origin

Cache-Control && Expires

这个其实是属于缓存配置，但是，我们需要注意的是，针对一些具有敏感数据，例如用户信息、交易页面，这些不应该配置缓存，以免因为页面缓存而导致敏感信息的泄露。

具体配置可以看之前的文章：浏览器的缓存机制

总结

这些 HTTP 安全配置，有助于提升网站的安全性，而从这些配置里，我们也能学到一些安全防御方面的思路：

• 传输信息加密
• XSS 过滤
• 白名单机制
• 同源策略

参考资料

HTTP Security Headers - A Complete Guide
一些安全相关的HTTP响应头

上班通勤时间很长，在地铁上竟成了我看书最多的地方。看过很多书、小说，也忘了很多。

小说 App 和 iReader 都带有阅读记录的时长，但是我经常是各个地方、各个姿势、各个类型都会看，没法统一起来。于是乎，就想有个记录的地方，也试过不少有次功能的 App，各有特色，看起来也不复杂，何不自己做个呢？

搞起

想了很久，忙忙碌碌，终究是懒，断断续续至今，终于做了个线上版的小程序 —— 你读我记

也算是自己体验了一下小程序开发，从前端到后端，到部署上线，到最后发正式版，磕磕碰碰，竟然过去将近两个月了。

小程序主要用的是：Taro、Taro UI、wux-weapp
后台用的是：egg、MySQL、Nginx 代理

没有复杂的东西，只是去接触和尝试了一下相关的内容，最重要的是一个产品，从想法到落地实现，最终上线。

使用

目前主要自己使用，虽然还不少问题，但是不影响使用。有空慢慢完善，后续再出个总结。

目前实现的功能：

• 书籍搜索功能
• 书架功能，分成 在读、想读、已读和全部
• 阅读时长记录，包括暂停、取消、记录，也可以修改阅读时长
• 阅读日历，在日历上显示阅读记录
• 阅读统计，包括累计时长、阅读天数、阅读数量
• 每本书的阅读记录，包括阅读开始和结束时间，还有阅读进度分析和预测

TODO:

• 阅读分享海报
• 待续

下面是我最近使用的记录截图

扫一扫

最后奉上小程序码

THE END！

本篇解读基于 Redux 版本 4.0.1。
完整的注释发在这个仓库 redux-interpretation

Redux 的源码很短，核心就是实现下面这些 api，也是我们使用的时候会遇到的。

1
2
3
4
5
6
7
8
9

store: {
  dispatch,
  subscribe,
  getState,
  replaceReducer
},
bindActionCreators,
combineReducers,
applyMiddleware

先来看看 Redux 的数据流向图，流程图也能看出一点这些 api 的作用。

createStore

createStore 是生成 store 的函数，返回 store 对象，dispatch, subscribe, getState, replaceReducer 都是在这里实现的

还有个 observable，是提供给 观察/响应式 库的接口

1
2
3
4
5
6
7
8
9
10
11

// createStore.js
function createStore(reducer, preloadedState, enhancer) {
  //...
  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}

dispatch

dispatch 本质就是调用 reducer 得到新的 state，然后再循环执行监听 state 变化的回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// createStore.js
function dispatch(action) {
  // ...
  try {
    // 开始执行 reducer
    isDispatching = true
    // reducer 的参数是当前的 state 和指定的 action，返回值作为新的 state, 所以要保证 reducer 一定要有 state 返回
    currentState = currentReducer(currentState, action)
  } finally {
    // reducer 执行完成
    isDispatching = false
  }
  /**
   * 这里获取最新的回调函数数组, 然后循环逐个执行.
   * 这里让 currentListeners = nextListeners, 如果这时候出现新增或者取消订阅, 之前的 ensureCanMutateNextListeners 就起作用了,
   * 改动不会影响当前执行的数组, 下次执行 dispatch 才会拿到改过后的数组
   */
  const listeners = (currentListeners = nextListeners)
  for (let i = 0; i < listeners.length; i++) {
    const listener = listeners[i]
    listener()
  }

  return action
}

subscribe

subscribe 就是添加监听 state 变化的回调函数，保存在一个数组中，在 dispatch 后会循环执行这个数组。返回值是一个取消监听的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// createStore.js
function subscribe(listener) {
  //...
  // 标记订阅状态，取消订阅时避免重复取消订阅的逻辑执行，造成的性能损耗
  let isSubscribed = true
  // 添加 listener 之前，确保不改动 currentListeners，而是 currentListeners 的复制出来的 nextListeners
  ensureCanMutateNextListeners()
  // 添加回调函数 listener 到 nextListeners
  nextListeners.push(listener)

  // 订阅的返回值是个函数，调用这个返回值来取消订阅（类似于 setTimeout 的返回值可以用来取消定时器）
  return function unsubscribe() {
    if (!isSubscribed) {
      return
    }
    // reducer 执行时不能取消订阅
    if (isDispatching) {
      throw new Error(
        'You may not unsubscribe from a store listener while the reducer is executing. ' +
          'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'
      )
    }
    // 标记为未订阅
    isSubscribed = false
    // 这里会再次确认 nextListeners 和 currentListeners 时，浅复制一份新的 nextListeners 出来
    ensureCanMutateNextListeners()
    // 找到需要取消订阅的 listener，通过 splice 从数组中删除，变化体现在 nextListeners 数组中
    const index = nextListeners.indexOf(listener)
    nextListeners.splice(index, 1)
  }
}

这里注意到一个函数 ensureCanMutateNextListeners，是干嘛用的呢？

1
2
3
4
5
6

// createStore.js
function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

考虑下面这种场景：
dispatch 过程中，监听回调 listener 数组 [ a, b, c ,d ] 在循环执行，但是刚执行完 a，a 被取消监听了，这时候数组就会变成 [ b, c ,d ]，c 是数组的第二项了。原本要执行第二项的 b 就被跳过了，而去执行 c 去了。
这个函数的作用是为了保证在 dispatch 过程中，新增或者取消订阅不会影响到当前的 dispatch，避免类似这种场景下 bug 的产生。
浅复制一份 currentListeners，保证当前的 dispatch 的不变，新增或者取消的会在 nextListeners 中体现，也就是下次 dispatch 时。 (subscribe 的注释里也有说明)

getState

这个简单粗暴，就是返回当前的 state

replaceReducer

这个方法直接替换当前的 reducer，然后执行 dispatch({ type: ActionTypes.REPLACE }) 这个内置的 action，根据新的 reducer 生成新的 state。

这个方法的使用场景：

• 代码分割按需加载
• 热替换

bindActionCreators

这个方法就是提供一个简写的调用方式，给 ActionCreator 加个自动 dispatch

1
2
3
4
5
6
7
8
9

// bindActionCreators.js 部分代码

// 这个方法的做用，其实就是一个简写的调用方法，方便使用
// 结果就是返回一个函数: `dispatch(actionCreator(xxx))`
function bindActionCreator(actionCreator, dispatch) {
  return function() {
    return dispatch(actionCreator.apply(this, arguments))
  }
}

combineReducers

combineReducers 这个函数的作用是，把一个包含各个 reducer 函数的对象，合并成一个 reducer 函数。
这部分代码也不复杂，除去一些错误检查之类的，就是对 reducer 就行处理合并，执行返回的函数，才是执行真正的所有的 reducer 逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

//combineReducers
export default function combineReducers(reducers) {
  // 获取 reducers 这个对象的建 keys 对象
  const reducerKeys = Object.keys(reducers)
  const finalReducers = {}
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]

    // 判断 key 对应的 reducer 是不是 `undefined`
    if (process.env.NODE_ENV !== 'production') {
      if (typeof reducers[key] === 'undefined') {
        warning(`No reducer provided for key "${key}"`)
      }
    }
    /**
     * 确保 reducer 是个函数，然后根据 key/value 存在新对象 finalReducers
     * 这个新对象，包含的是过滤 undefined 和 非函数 后的 reducer
     * 保存在另一个对象，可以再后续的修改中，不影响到原来的 reducers 这个对象
     */
    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  const finalReducerKeys = Object.keys(finalReducers)

  // This is used to make sure we don't warn about the same
  // keys multiple times.
  let unexpectedKeyCache
  if (process.env.NODE_ENV !== 'production') {
    unexpectedKeyCache = {}
  }

  let shapeAssertionError
  try {
    assertReducerShape(finalReducers)
  } catch (e) {
    shapeAssertionError = e
  }

  // 返回一个合并后的 reducer 函数, state 默认值为空对象
  return function combination(state = {}, action) {
    if (shapeAssertionError) {
      throw shapeAssertionError
    }

    if (process.env.NODE_ENV !== 'production') {
      const warningMessage = getUnexpectedStateShapeWarningMessage(
        state,
        finalReducers,
        action,
        unexpectedKeyCache
      )
      if (warningMessage) {
        warning(warningMessage)
      }
    }

    let hasChanged = false
    const nextState = {}
    // 循环执行 reducer，这部分写的很清晰
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      const reducer = finalReducers[key]
      const previousStateForKey = state[key]
      const nextStateForKey = reducer(previousStateForKey, action)
      // 这里验证是否会没有 state 返回
      if (typeof nextStateForKey === 'undefined') {
        const errorMessage = getUndefinedStateErrorMessage(key, action)
        throw new Error(errorMessage)
      }
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    // state 有改变返回下一个 state，否则返回原来的 state
    return hasChanged ? nextState : state
  }
}

applyMiddleware

applyMiddleware 是一个特殊的 enhancer，执行 applyMiddleware 和 enhancer，都要返回和 createStore 一样的 api。
applyMiddleware 接收的参数是中间件数组，最终形成一个中间件洋葱模型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// applyMiddleware.js
export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    // middlewareAPI 作为参数执行一遍所有的中间件
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 根据 compose 生产的其实是类似 mid1(mid2(mid3(store.dispatch)))
    // 所以在数组最后的 middleware 其实是第一个执行的
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

这里要结合实际的中间件来理解，下面是 logger 中间件的示例代码:

• 可以看到中间件 logger 其实是一个函数，参数为 dispatch 和 getState，这个对应上面的 middlewareAPI
• middleware(middlewareAPI) 执行后得到的还是个函数，参数是 next，看上面的 compose, 这个 next 其实就是 store.dispatch，返回的是新的 dispatch， 假如是 newDispatch
• 根据上面的 compose，你会发现，这个 newDispatch 是作为中间件链的下一个 middleware 的参数值（就是 next）这样一环扣一环，得到一个最终的 dispatch
• 在实际调用最终的 dispatch 时，你会发现，middleware 的执行顺序又变成是从左往右了（因为最终返回的 dispatch 是第一个中间件的函数）
• 执行过程中，遇到 next(action)，这时候其实就是右边一个 middleware 的返回的 dispatch，控制权就转到这个 middleware 了，
• 这样执行到最后，控制权返回，再执行 next 后面的代码
• 最终就是形成了中间件的洋葱模型，看下面的示意图

1
2
3
4
5
6
7

// logger 中间件的示例代码
const logger = ({ getState, dispatch }) => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

1
2
3
4
5
6
7
8
9
10
11
12
13

// 洋葱模型示意图
+-------------------------------------------------------------+
|   mid21                                                     |
|         +---------------------------------------------+     |
|         | mid2    +-----------------------------+     |     |
|         |         | mid2   +-------------+      |     |     |
|         |         |        |             |      |     |     |
-> next() -> next() ->next() -> dispatch() ->    ->    ->    ->
|         |         |        |             |      |     |     |
|         |         |        +-------------+      |     |     |
|         |         +-----------------------------+     |     |
|         +---------------------------------------------+     |
+-------------------------------------------------------------+

从这个模型可以知道中间件的工作原理，就是在发送 dispatch 之前以及发送之后，可以做一些你想做的事。

比如这个 logger 中间件的执行顺序会是 打印 dispatching -> 等待 next 执行返回 -> 打印 next state

这里可以思考一下，为什么 logger 中间件要求放在最后面?

写的比较粗糙，详细的可以看这个仓库的注释 redux-interpretation

THE END!

最近在看项目的升级和优化，项目用的是 Babel 6，踩了一下升级到 Babel 7 的坑。

@babel/preset-env

@babel/preset-env 根据指定的执行环境提供语法装换，也提供配置 polyfill。

Babel 7 已经弃用年份 preset: babel-preset-es2015, babel-preset-es2016, babel-preset-es2017, babel-preset-latest. 直接使用一个 env 搞定。

所以我们需要指定执行环境 Browserslist， Browserslist 的配置有几种方式，并按下面的优先级使用：

1. @babel/preset-env 里的 targets
2. package.json 里的 browserslist 字段
3. .browserslistrc 配置文件

browserslist 是用来给不同的前端工具（Autoprefixer, babel-preset-env）共享 target browsers 和 Node.js versions 配置的. 一般推荐将配置写在 package.json 里的 browserslist 字段。

例如我们配置 .babelrc 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": 10
        }
      }
    ]
  ]
}

源文件：

1
2
3
4
5
6

// index.js
const f = () => {};

new Promise();

class Test {}

编译后是：

1
2
3
4
5
6
7
8
9
10
11

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var f = function f() {};

new Promise();

var Test = function Test() {
  _classCallCheck(this, Test);
};

Babel 转换了浏览器不支持的箭头函数和 Class，但是 Promise 并没有变化。这是因为 Babel 只转换不兼容的新语法，而对新的 API，如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise、Object.assign() 等，是不会转换的。这时候就需要 polyfill 了。

polyfill 的使用在 Babel 7 有一些不同：

• useBuiltIns 提供 false, entry, usage 三种方式
• @babel/runtime, @babel/plugin-transform-runtime 把 helpers 和 polyfill 功能拆分了。默认只提供 helpers。

useBuiltIns

false

1

"useBuiltIns": false,

此时不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill。

entry

1
2

"useBuiltIns": "entry",
"corejs": 2,

根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。需要在入口文件手动添加 import '@babel/polyfill'，会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。

这里需要指定 core-js 的版本, 如果 "corejs": 3, 则 import '@babel/polyfill' 需要改成

1
2

import 'core-js/stable';
import 'regenerator-runtime/runtime';

编译结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

"use strict";

require("core-js/modules/es6.array.copy-within");

// ... 此处省略一大堆的 polyfill

require("core-js/modules/web.immediate");

require("core-js/modules/web.dom.iterable");

require("regenerator-runtime/runtime");

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var f = function f() {};

new Promise();

var Test = function Test() {
  _classCallCheck(this, Test);
};

usage

1
2

"useBuiltIns": "usage",
"corejs": 2,

usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。

编译结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

"use strict";

require("core-js/modules/es6.promise");

require("core-js/modules/es6.object.to-string");

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var f = function f() {};

new Promise();

var Test = function Test() {
  _classCallCheck(this, Test);
};

看上面的编译结果，会发现还有个问题，_classCallCheck 辅助函数是直接内嵌的，如果多个地方使用 Class，那每个地方都会添加这个辅助函数，大量重复。
这时候就需要 @babel/plugin-transform-runtime 了。

@babel/plugin-transform-runtime

@babel/plugin-transform-runtime 这个插件是用来复用辅助函数的。

配置 .babelrc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 2,
        "targets": {
          "ie": 10
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime"]
  ]
}

编译结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

require("core-js/modules/es6.promise");

require("core-js/modules/es6.object.to-string");

var f = function f() {};

new Promise();

var Test = function Test() {
  (0, _classCallCheck2.default)(this, Test);
};

可以发现，helpers 是通过 require 引入的，这样就不会存在代码重复的问题了。

拾遗

Babel 7 废弃了 stage-x，如果需要用到一些特性，需要自己安装对应的 plugin，然后再配置中配置 plugin。

stage-x 原本是对应 ECMAScript 提案的不同阶段，每个阶段有不同的特性，但是提案一直在变，这些特性可能更进一步，也可能废弃。state-x 是否应该保持和不断更新的提案一致？怎么处理都无法适应变化，所以直接使用 stage-x 对后期的维护造成困惑和风险。

Babel 7 还有个配置文件查找的问题，升级后可能会出现 .babelrc 配置无效的情况，需要根据目录结构和规则调整。简单的说：

• Babel 7 增加了 root 目录的概念，默认是 cwd 目录
• Babel 分成项目级配置文件(如：.babel.config.js)和文件级配置文件(如：.babelrc)
• 项目级目录是默认是在 root 目录查找，可以配置 root 或者 rootMode 来更改查找方式；也可以配置 configFile 来指定文件或者关闭项目级配置
• 文件级配置文件 .babelrc 会根据 babelrcRoots 配置（默认值为 root）的目录查找，且只作用于当前编译目录的 package.json

更详细的可以直接看文档的解释说明 Config Files

总结

Babel 7 的配置方案：

• @babel/preset-env + targets + useBuiltins: usage
• @babel/plugin-transform-runtime
• 引入必要的 plugin

这样就实现了按需引入 polyfill，看起来也是相当完美。

但是想想还是存在问题的，比如：Babel 编译通常会排除 node_modules，所以 "useBuiltIns": "usage" 存在风险，可能无法为依赖包添加必要的 polyfill。云谦在博客 Polyfill 方案的过去、现在和未来 也提到一些问题，还有一些想法和展望，感觉写得挺好的。

关于 Babel 编译通常会排除 node_modules 的做法，通用的约定是 node_modules 下的包在发布时打包成 es5。但是也难保证全部都遵守约定，这就存在一定的风险。但是如果 Babel 处理 node_modules，编译速度慢不说，Babel 6 编译已编译过的代码也是存在问题的，据说这个问题在 Babel 7 解决了，maybe! 告辞！👋

官方文档关于 Hooks 的阅读笔记

关于 Hooks

• 这是个可选的功能。如果你不想用，你可以选择忽略它。

• 100% 向后兼容。Hooks 没有破坏性的变更。

• 现在已经可以使用了。Hooks 在 React V16.8.0 已经发布。

Hooks 要解决的问题

组件之间的状态逻辑复用

render props 和 higer-order components 模式，也是为了解决这个问题而出现的。但是，这两种模式需要重构代码来实现，并且在 chrome 调试的时候，你会发现 React DevTools 中组件会多了很多层嵌套（wrapper hell）。

使用 Hooks，可以让你不改变组件层级就可以复用状态逻辑。这样使用起来更加自然，也更容易理解。

复杂组件变得越来越难理解

随着需求的增加，组件越来越复杂，而且很多的逻辑处理（例如数据获取、事件绑定和解绑）依赖于生命周期函数，但是这些逻辑本身互相无关，这也就会出现一个生命周期的方法里混杂着互不相关的处理逻辑，导致组件越来越难以理解，从而导致出错的概率增加。

Hooks 可以实现组件更小粒度的函数拆分，互相无关的逻辑也可以区分开来，而不用再依赖生命周期方法来进行拆分。

令人困惑的 Class

使用 Class ，是使用和学习 React 的一大障碍。要求使用者理解 class 的用法（例如要理解 this ，处理事件绑定，使用一些提案中的语法），而且需要学会分辨，什么时候该用 function component，什么时候该用 class component。

class component 也可能会导致 Prepack 一些优化失效。

还有就是 class 对一些开发工具的影响，例如： don’t minify very well(这个应该是 es6 的通病)，同时也会导致 hot reloading 出问题。

Hooks 可以让你不使用 class ，也可以用上 React 的一些功能。而 React 本身也是更倾向于 functions，使用 Hooks 可以更好的拥抱 functions。

Introducing Hooks

号称 “零配置”、“最高可提升98%的速度” 的 webpack4 已经出来一段时间了，而且 webpack5 也已经在路上了。再不体验一下 webpack4 就老了！目前项目使用的还是 webpack3，打包速度确实是锻炼人的耐心，这次趁着有点时间，决心优化一下项目，尝试从 webpack 升级开始。期间断断续续也遇到不少问题，在这里对大致的过程做个记录。

犹记当年，也是我把 webpack 从 v1 升级到 v3 的

安装 webpack 以及相关配置

1. 先删除之前的 webpack、webpack-dev-server

1

npm uninstall webpack webpack-dev-server --save-dev

2. 安装最新版本的 webpack、webpack-cli (webpack4 把脚手架 webpack-cli 从 webpack 中抽离出来的，所以必须安装 webpack-cli)、webpack-dev-server

1

npm install webpack webpack-dev-server webpack-cli --save-dev

3. webpack4 已不支持 extract-text-webpack-plugin，改用 mini-css-extract-plugin

1
2

npm uninstall --save-dev extract-text-webpack-plugin
npm install --save-dev mini-css-extract-plugin

4. 安装新版的 html-webpack-plugin

1
2

npm uninstall --save-dev html-webpack-plugin
npm i --save-dev html-webpack-plugin

5. 还有其他的一些相关的包，在调试的过程中，排查出对应升级

遇到的问题

按 webpack4 的要求升级并配置好之后，就开始尝试在项目跑开发环境了。这个过程一波三折，升级花费的时间主要都在这里了。

路径问题

首先遇到的是巨坑，是 scss 里的路径问题。

路径处理使用 resolve-url-loader 来把路径处理成绝对路径，这个 loader 可以解决 sass 中，引用不同目录的 scss 文件，从而导致原来的相对 url 错误的问题。

升级这个 loader 后，scss 中图片字体路径一直 can't resolve，一开始以为是升级后配置不对，在这里卡了好久，一直看配置，改配置，查相关的 loader，无果！

最后决定还是从源码入手，使用 vscode 的调试功能，调试一下这个 loader 的处理情况。果然发现问题， resolve-url-loader v2 和 v3 的路径处理的方式改了！v2 会循环查找每一级的目录，而 v3 只会根据提供的路径生成对应的绝对路径来查找。

发现错的不是升级后的配置，而是以前代码里很多路径本身就写错了，比如

1
2

// 然而事实上，当前目录下根本没有 img 目录。应该是 ../img/test.png
background-image: url(./img/test.png);

但是因为 resolve-url-loader 循环每一级查找的原因，还是能找到对应的图片。所以原来虽然写的自由奔放，但是也没有报错。（有些是因为 copy 其他地方的代码，但是没有 copy 对应的资源文件导致的）

如此巨坑，所以又陷入了修改大批错误路径的工作中。。。

性能问题

解决路径问题之后，势如破竹，大部分问题只要找到相关处理的 loader 或者 plugin 通过调试，都能找到原因。

webpack4 跑起来后，整体的速度已经是提升一大截了，单独打包主流程的时间从 155s 降到了 70s 左右，提升近 55%。

但是接着发现了一个神奇的问题，开发环境和打包速度竟然差不多，甚至更慢！！！

首先想到的是 source-map 的配置，严重拖慢速度。

但是修改不同的 devtool，发现变化并不大。问题不在这。

然后想到 icon-font。

于是看满屏密密麻麻的打包信息，发现字体文件不断重复的引入。发现是 sass 公共 util 模块里引用了字体的模块，然后之前一次修改，增加了每个 scss 自动引入 util 的 loader 。

果然，改正这个问题，只引入一次字体后，开发环境速度直接快了一倍。

sass 公共模块的问题

上面的问题，其实和这个问题相关：就是 sass 公共模块的问题。

其实原因在于，sass-loader 对 @import 是不会去重的，重复 import 的 scss 会重复出现。sass-loader` issue Duplicate Imports 中有讨论这个问题，但是并没有很好的解决方案。

要解决这个问题，从几个方面入手：

1. 规范 sass 公共模块，需要在每个文件引入的公共变量、function 之类的，不要带有会生成 css 的代码。（可以借助 sass-resources-loader 自动每个文件引入需要的公共模块）。
2. 对于 global.scss, reset.scss, common.scss 这种生成 css 的公共模块，在 js 中 import/require。
3. 使用 optimize-css-assets-webpack-plugin 可以去掉重复的 css。

对比

某单个项目升级前后对比

全部项目打包前后对比

结论

这次升级虽然费了不少功夫，踩了不少坑，但也收获不少经验和一些新的思路。同时，一些问题，也暴露出团队项目上的一些问题。

升级 webpack4 后，速度大幅度提升，整个团队的开发效率可以说将近 提升 70% * 团队 吧。但是还可以继续深入优化，还有不少的提升空间。可以使用 speed-measure-webpack-plugin 来检测webpack打包过程中各个部分所花费的时间，再根据分析来做优化。还可以考虑 babel 升级到 v7 和开发环境的 node 层升级优化。

告辞！

原文: COPYING OBJECTS IN JAVASCRIPT
作者: Victor Parmar

这篇文章，我们将介绍在 JavaScript 中复制对象的各种方法。其中包括了浅复制和深复制。

开始之前，有必要说一些基础概念：JavaScript 中的对象，是对内存中存储位置的引用。这些引用是可变的，即：引用可以被重新赋值。因此，简单的复制引用，结果只会是两个引用同时指向内存中的同一个位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var foo = {
    a : "abc"
}
console.log(foo.a); // abc

var bar = foo;
console.log(bar.a); // abc

foo.a = "yo foo";
console.log(foo.a); // yo foo
console.log(bar.a); // yo foo

bar.a = "whatup bar?";
console.log(foo.a); // whatup bar?
console.log(bar.a); // whatup bar?

上面的例子可以看到，foo 和 bar 任意一个对象发生变化，都会反映到另一个对象上。所以，根据你的使用场景，在 JavaScript 中复制对象需要小心。

SHALLOW COPY 浅复制

如果你的对象的属性都是值类型，你可以使用展开语法或者 Object.assign(...)

1
2
3

var obj = { foo: "foo", bar: "bar" };

var copy = { ...obj }; // Object { foo: "foo", bar: "bar" }

1
2
3

var obj = { foo: "foo", bar: "bar" };

var copy = Object.assign({}, obj); // Object { foo: "foo", bar: "bar" }

注意：上面两种方法，都可以用来从多个源对象复制属性值到目标对象：

1
2
3
4
5

var obj1 = { foo: "foo" };
var obj2 = { bar: "bar" };

var copySpread = { ...obj1, ...obj2 }; // Object { foo: "foo", bar: "bar" }
var copyAssign = Object.assign({}, obj1, obj2); // Object { foo: "foo", bar: "bar" }

上述方法存在的问题是，当对象的属性本身是对象时，这个属性只会复制引用，也就是说，这和第一个例子中的 var bar = foo 是一样的：

1
2
3
4
5
6
7
8

var foo = { a: 0 , b: { c: 0 } };
var copy = { ...foo };

copy.a = 1;
copy.b.c = 2;

console.dir(foo); // { a: 0, b: { c: 2 } }
console.dir(copy); // { a: 1, b: { c: 2 } }

DEEP COPY 深复制（带警告）

深复制对象，一个可能可行的方法是，把对象序列化成字符串，然后再反序列化回来：

1
2

var obj = { a: 0, b: { c: 0 } };
var copy = JSON.parse(JSON.stringify(obj));

可惜的是，这个方法只适用于：源对象包含的是可序列化的类型值，并且没有循环引用。一个不能序列化的类型值例子是 Date 对象 - 即使它打印成 ISO 格式字符串，JSON.parse 只会把它解释成字符串而不是 Date 对象。

DEEP COPY 深复制（带少量的警告）

对更复杂的情况，可以使用新的 HTML5 克隆算法 “structured clone”。可惜的是，在写本文的时候，这个方法还是限制于针对某些内置类型，但是它比 JSON.parse 支持更多的类型：Date, RegExp, Map, Set, Blob, FileList, ImageData, 稀疏数组和类数组。它还保留了克隆数据的引用，从而支持循环和递归结构，而上面提到的序列化方法不支持这点。

目前，没有直接调用结构化克隆算法的方法，但是一些较新的浏览器特性有使用这个算法。因此，通过一些变通的方法可以用来实现对象的深复制。

通过 MessageChannels: 这个思路是通过利用通信功能使用的序列化算法来实现。因为这个功能是基于事件的，所以生成克隆也是异步操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

class StructuredCloner {
  constructor() {
    this.pendingClones_ = new Map();
    this.nextKey_ = 0;

    const channel = new MessageChannel();
    this.inPort_ = channel.port1;
    this.outPort_ = channel.port2;

    this.outPort_.onmessage = ({data: {key, value}}) => {
      const resolve = this.pendingClones_.get(key);
      resolve(value);
      this.pendingClones_.delete(key);
    };
    this.outPort_.start();
  }

  cloneAsync(value) {
    return new Promise(resolve => {
      const key = this.nextKey_++;
      this.pendingClones_.set(key, resolve);
      this.inPort_.postMessage({key, value});
    });
  }
}

const structuredCloneAsync = window.structuredCloneAsync =
    StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner);


const main = async () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = await structuredCloneAsync(original);

  // different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));

  console.log("Assertions complete.");
};

main();

通过 history API: history.pushState() 和 history.replaceState() 都会对第一个参数创建结构化克隆。注意，这个方法是同步的，操作浏览器的 history 并不是个很快的操作，所以频繁调用这个方法会导致浏览器无响应。

1
2
3
4
5
6
7

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

通过 notification API: 创建新的通知时，构造函数会创建其中关联的 data 的结构化克隆。注意，这个也会尝试将通知展现给用户，但是这个默默的失败，除非应用请求过显示通知的权限。在已授予权限的场景下，通知马上被关闭。

1
2
3
4
5

const structuredClone = obj => {
  const n = new Notification("", {data: obj, silent: true});
  n.onshow = n.close.bind(n);
  return n.data;
};

NODE.JS 中深复制

从 version 8.0.0 开始，Node.js 提供 serialization api，它兼容结构化克隆。注意，写这篇文章是，这个 API 属于实验性的：

1
2
3
4

const v8 = require('v8');
const buf = v8.serialize({a: 'foo', b: new Date()});
const cloned = v8.deserialize(buf);
cloned.b.getMonth();

对于 8.0.0 以下版本，或者是需要更稳定的实现，一个是使用 lodash 的 cloneDeep 方法，这也是基于结构化克隆算法的。

结论

总结一下，JavaScript 中最好的复制对象算法，很大程度上取决于环境和你要复制的对象的类型。虽然 lodash 是通用深复制方法中最安全的选择，但是如果你自己实现，可以得到更高效的方案。下面是个简单的深复制例子，支持日期（Date）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

function deepClone(obj) {
  var copy;

  // Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;

  // Handle Date
  if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }

  // Handle Array
  if (obj instanceof Array) {
    copy = [];
    for (var i = 0, len = obj.length; i < len; i++) {
        copy[i] = deepClone(obj[i]);
    }
    return copy;
  }

  // Handle Function
  if (obj instanceof Function) {
    copy = function() {
      return obj.apply(this, arguments);
    }
    return copy;
  }

  // Handle Object
  if (obj instanceof Object) {
      copy = {};
      for (var attr in obj) {
          if (obj.hasOwnProperty(attr)) copy[attr] = deepClone(obj[attr]);
      }
      return copy;
  }

  throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name);
}

个人而言，我希望可以在任何地方使用结构化克隆，这样这个问题（对象复制）就可以解决了：开心的克隆:)

作为前端，身处于大前端的繁荣时代，需要不断的学习，不断的更新自我。

这是最好的时代，也是最坏的时代

鱼，还是渔，这时就显得非常的重要。

掌握好的信息来源，接收优质的内容，才能在浪潮中游刃有余。

所以，这里记录一些个人觉得值得关注和收藏的前端领域内容:

• 前端工具
• 教程&&博客
• 实用的库
• 值得关注的大神
• 值得订阅的资讯
• 书单

主要的目的是作为个人备忘！😀

GitHub 地址: Awesome Font-end 😀

前端做图片上传时，经常会遇到图片压缩、图片预览等需求。而这个过程中，会遇到一个个的坑。下面就来看一看 HTML5 实现图片上传的整个过程。

基本结构

图片上传是使用 input 标签来选择图片的：

1

<input type="file" accept="image/*">

这里可能遇到一个坑：

可能会遇到响应迟钝，文件选择框过好几秒才弹出。具体的原因可以查看这里。

解决的方法是将 * 通配符改成指定的 MIME 类型。例如

1

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">

获取图片文件

通过监听 input 的 change 事件，获取 FileList类数组对象（event.target.files）。FileList 对象的成员就是 File对象，包含的属性如图：

FileReader

要对图片进行压缩，首先要获取图片内容。

这里需要使用 FileReader的readAsDataURL(Blob|File) 来读取图片内容。readAsDataURL方法返回 data URL，将文件进行 base64 编码。示例如下：

1
2
3
4
5
6
7
8
9
10
11
12

let fr = new FileReader();
// 读取成功回调
fr.onload = e => {
  // e.target.result 就是图片的 base64 地址，可以直接用于图片的 src
  img.src = e.target.result;
}
// 失败回调
fr.onerror = e => {
  // error handle
}
// 读取图片
fr.readAsDataURL(file);

方法参考：FileReader

图片压缩

前端进行图片压缩，不但节省流量，而且加速上传速度，提高用户体验。

上一步读取了图片，就可以对图片进行操作了。前端实现图片压缩，原理很简单：

1. 缩小图片，大图片转成小图片
2. 降低图片质量

第一点是通过 canvas 的 drawImage()方法来实现，第二点在后面会提到。

1

void ctx.drawImage(image, dx, dy, dWidth, dHeight)

是在 canvas 上绘制图像，我们只需要把原图，在 canvas 上绘制成更小的图片，就实现了压缩，就是这么简单。

所以关键就是怎么来设置 dWidth 和dHeight。

一般的做法是限制图片的最大长度和宽度，超过则等比例缩放。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// width height 图片长宽
// maxWidth maxHeight 限制的图片最大长宽
let scale = width / height;

if (scale >= maxWidth / maxHeight) {
  if (width > maxWidth) {
    height = maxWidth / scale;
    width = maxWidth;
  }
} else if (height > maxHeight) {
  width = maxHeight * scale;
  height = maxHeight;
}
// 这里的 image 就是上一步得到的图片内容
ctx.drawImage(image, 0, 0, width, height);

方法参考： CanvasRenderingContext2D.drawImage()

图片输出

上一步在 canvas 绘画了图片，接下来就需要把 canvas 画布转化成 img 图像。

canvas提供了两个转图片的方法：

• HTMLCanvasElement.toDataURL()：图片转换成base64格式
• HTMLCanvasElement.toBlob()：图片转换成Blob文件

toDataURL()

1

canvas.toDataURL(type, encoderOptions);

属于同步方法，返回 base64 格式的图片。

第一个参数 type是图片格式；

第二个参数 encoderOptions 就是用于之前提到的，控制图片质量，达到压缩图片的效果。

在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。

toBlob()

1

void canvas.toBlob(callback, type, encoderOptions);

属于异步方法，所以有个callback 参数。

type 参数指定图片格式；

encoderOptions参数指定图片质量，用于压缩图片

值在0与1之间，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。

关于 Blob：

Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

JavaScript 中 Blob 对象: 这篇文章介绍了 Blob，里面也提到了大文件分割上传的实现。

一般来说，对比 Blob 文件和 base64 ，有下面几点优点：

• 二进制文件，对后端更友好
• base64 字符串一般都非常长，会有性能等问题

所以选择转化成 Blob 文件进行上传更好。把 base64 或者 Blob 文件加入 FormData 里就可以实现上传了。

图片预览

一般图片上传还会要求实现图片上传进度、图片预览功能。

关于图片预览的实现，可以通过下面的方法，来获取图片链接，做为本地预览：

• base64 可以作为图片链接，FileReader.readAsDataURL(Blob|File)方法可以得到 base64

• URL.createObjectURL(Blob|File)返回的 URL 可以作为图片的链接

详情参考：

FileReader.readAsDataURL()

URL.createObjectURL()

手机照片旋转问题

把在 iPhone 上拍出来的照片，通过上面的方式进行上传，你会发现图片方向和你预料的不同。

orientation

使用 iPhone 拍照片，会根据你拍照时手机的方向，照片会有不同的方向。这个方向可以通过图片的 orientation参数来确定。

可以通过 exif-js 来获取图片的 orientation：

1
2
3
4
5
6

import EXIF from 'exif-js';

// file 是上面提到的 File 文件
EXIF.getData(file, function() {
var orientation = EXIF.getTag(this, 'Orientation');
});

详情参考：如何处理iOS中照片的方向

校正方向

要校正图片的方向，只需要根据 orientation 参数，把图片的方向旋转会正常即可。旋转需要用到 canvas 的 rotate()方法。

1

void ctx.rotate(angle);

参数 angle 是顺时针旋转的弧度，旋转中心点是 canvas 的起始点。

角度值换算弧度的公式： angle = degree * Math.PI / 180

以 orientation等于 6 时为例，也就是图片逆时针旋转了 90°，要把图片校正方向，就要画布顺时针旋转 90° : rotate((90 * Math.PI) / 180)

画布旋转之后，drawImage()根据画布的位置进行调整，如上图所示:

旋转之前：drawImage(image, 0, 0, x, y)

旋转之后，原有的画布不变，坐标跟着旋转，图片转到可视范围之外，所以：

• 需要把图片移到可视范围里
• 调整画布大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// other code...
case 6:
// 旋转角度
degree = 90;
// 调整画布大小
canvas.width = imgHeight;
canvas.height = imgWidth;
// 修改绘画位置
imgHeight = - imgHeight;
break;
// other code ...
// canvas 旋转
ctx.rotate((degree * Math.PI)/180);
// 绘制图片
ctx.drawImage(image, 0, 0, imgWidth, imgHeight);

其他的 orientation 也是类似的原理。查看示例代码

总结

图片压缩上传的过程，总结起来就是：图片 → 压缩 → 图片。

这个过程中，核心点是：

• FileReader API 使用

• Canvas 实现图片压缩、绘制和方向校正

这里主要总结了使用 HTML5 API 实现图片上传的过程，在实际的使用还要根据具体的使用场景，考虑兼容问题，选择合适的解决方案。

最后，查看完整的示例代码：h5ImgCompress

于是从官方教程开始，遇到一些坑，查看一些资料，解决一些问题，有了下面的笔记。

选择对应的版本。我的阿里云装的是 CentOS 7,所以选择 CentOS 7的版本。

通过下面的命令可以查看当前属于什么系统

1

lsb_release -a

安装和配置一些必要的依赖

Step1

通过下面的命令，在系统防火墙中开启 HTTP 和 SSH 的访问。

1
2
3
4
5

sudo yum install -y curl policycoreutils-python openssh-server
sudo systemctl enable sshd
sudo systemctl start sshd
sudo firewall-cmd --permanent --add-service=http
sudo systemctl reload firewalld

在执行

sudo firewall-cmd --permanent --add-service=http

时可能会遇到 FirewallD is not running的错误提示；

意思是：防火墙服务没有运行。这开启防火墙服务就行了：

1

systemctl start firewalld.service

然后重新执行命令就会提示 success

Step 2

执行下面命令，安装并开启 Postfix 邮件通知服务

1
2
3

sudo yum install postfix
sudo systemctl enable postfix
sudo systemctl start postfix

这里遇到一个报错

解决办法是修改 /etc/postfix/main.cf文件中的下面信息

1
2

inet_interfaces = all
inet_protocols = ipv4 // 或者 all

然后重启服务就好了：

1

sudo systemctl restart postfix

添加 GitLab 软件包的仓库，并安装

安装 GitLab

1

curl https://packages.gitlab.com/install/repositories/gitlab/gitlab-ee/script.rpm.sh | sudo bash

设置 GitLab 访问域名

1

sudo EXTERNAL_URL="http://gitlab.example.com" yum install -y gitlab-ee

注意：这里 http://gitlab.example.com替换成对应的域名或者IP

我这里设置成 IP 加 8888 端口，这需要在阿里云上配置安全组规则，出入方向都要配置对应端口。例如：

然后设置防火墙：

1
2
3
4

# 开启 8888 端口
firewall-cmd --zone=public --add-port=8888/tcp --permanent
# 重启防火墙
systemctl restart firewalld

然后再执行下面的命令，等待安装完毕（安装过程可能比较久）

1

sudo EXTERNAL_URL="http://xx.xx.xx.xx:8888" yum install -y gitlab-ee

如果安装完之后要修改访问的域名或者 IP，则修改 /etc/gitlab/gitlab.rb文件中的 external_url 内容

然后重新配置服务

1

gitlab-ctl reconfigure

然后就可能用设置的域名（IP）访问了。

登录

第一次打开，会打开密码设置页面，让你设置密码。

设置密码之后，使用用户名 root 和设置的密码登录。

最后来个登录成功的图：

遇到的问题

一些常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//启动
sudo gitlab-ctl start

//停止
sudo gitlab-ctl stop

//重启
sudo gitlab-ctl restart

//查看状态
sudo gitlab-ctl status

//使更改配置生效
sudo gitlab-ctl reconfigure

开启阿里云 SWAP

刚安装结束，开启 GitLab 之后，阿里云就开始卡爆了，GitLab 也直接无法访问，或者是直接 502，白忙活的半天！内存爆炸了啊！这时候想到阿里云好像是没开启 SWAP 的。于是就有了下面的内容。

查看 swap 分区：

1

cat /proc/swaps

发现是空的，下面来开启 swap

详情参考：云服务器 ECS Linux SWAP 配置概要说明

1. 创建swap大小为bs(block_size)*count(number_of_block)=4G

   1	dd if=/dev/zero of=/mnt/swap bs=1M count=4096

2. 设置交换分区文件

   1	mkswap /mnt/swap

3. 立即启用交换分区文件

   1	swapon /mnt/swap

4. 权限设置

   提示：swapon: /mnt/swap：不安全的权限 0644，建议使用 0600，设置权限

   1	chmod 0600 /mnt/swap

   然后重新启用

5. 设置开机时自启用 SWAP 分区

   需要修改文件 /etc/fstab 中的 SWAP 行，在文件末位添加

   1	/mnt/swap swap swap defaults 0 0

6. 修改 swpapiness 参数

   1	cat /proc/sys/vm/swappiness

   通过上面命令看到 swappiness 值为 0，需要在物理内存使用完毕后才会使用 SWAP 分区

   

   我们配置为空闲内存少于 10% 时才使用 SWAP 分区

   1	echo 10 >/proc/sys/vm/swappiness

   若需要永久修改此配置，在系统重启之后也生效的话，可以修改 /etc/sysctl.conf 文件，并修改以下内容:

   1	vm.swappiness=10

开启 SWAP 之后，GitLab 就能访问了！

总结

这篇笔记，主要是记录一下这次安装 GitLab 遇到的坑，以及对应的解决方案。

参考资料：

官方教程
CentOS 初体验十四：阿里云安装Gitlab
云服务器 ECS Linux SWAP 配置概要说明

原文：The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript
作者：Tyler McGinnis

视频：The Ultimate Guide to Execution Contexts, Hoisting, Scopes, and Closures in JavaScript

我认为理解 JavaScript 语言的最重要的基本概念是理解执行上下文（Execution Context），这点可能令人感到意外。正确的学习执行上下文，可以让你更容易学习更高级的内容，比如变量提升（hoisting）、作用域链（scope chains）和闭包（closures）。既然如此，那到底什么是“执行上下文”呢？为了更好的理解它，我们先来看看我们是如何写软件的。

编写软件的一种策略是把代码拆分成独立的块。虽然这些“块”有不同的命名（函数、模块、包等等），但是他们有同样的目的——分解和处理应用的复杂性。现在我们不要以编写代码的思维来思考，而是以 JavaScript 引擎的角度来思考，JavaScript 引擎是用来解释代码的。那么我们是否也可以使用和我们在写代码的时候一样的策略，把代码拆分成块，来处理解释代码的复杂性。答案是可以，这些“块”被称为执行上下文。正如可以使用函数、模块、包（functions/modules/packages）来处理编写代码的复杂性，JavaScript 引擎可以通过执行上下文来处理解释和运行代码的复杂性。 现在我们知道执行上下文的用途了，接下来需要解答的问题是：它们是如何创建的和它们是什么组成的？

JavaScript 引擎执行代码时，第一个被创建的执行上下文叫做全局执行上下文（Global Execution Context）。最开始这个执行上下文包含两个东西——一个全局对象和 this 变量。this 会引用全局对象，在浏览器执行 JavaScript 则全局对象是 window，在 Node 环境执行则全局对象是 global。

上图我们可以看到，即使没有任何代码，全局执行上下文还是会包含两个东西—— window 和 this。这是全局执行上下文的最基本形式。

我们一步一步来，看看当向程序添加代码时会发生什么。我们先添加一些变量。

你可以看出上面两张图的不同之处吗？关键的是每个执行上下文都有两个独立的阶段——创建（Creation）阶段和执行（Execution）阶段，每个阶段都有它特有的职责。

在全局创建阶段，JavaScript 引擎将会：

1. 创建全局对象
2. 创建 this 对象
3. 给变量和函数设置内存空间
4. 变量声明并默认赋值为 undefined，同时在内存中放置所有函数声明。

直到执行阶段，JavaScript 引擎才会开始一行一行的执行代码。

我们从下面的 GIF 图可以看到从创建阶段到执行阶段这一流程。

在创建阶段，创建 window 和 this ，变量声明（name 和 handle）默认赋值为 undefined，所有函数声明（getUser）全部放入内存中。然后一旦进入 执行 阶段，JavaScript 引擎开始一行一行的执行代码，然后给内存中已存在的变量赋上真实的值。

Gif 很酷，但是一步一步执行代码并亲自查看执行过程更酷。我为你创建了 JavaScript Visualizer，你值得拥有。如果你想查看上面的确切代码，打开这个链接。

为了真正巩固 创建 阶段和 执行 阶段的知识点，我们打印一些 创建 阶段之后和 执行 阶段之前的值出来。

1
2
3
4
5
6
7
8
9
10
11
12
13

console.log('name: ', name)
console.log('handle: ', handle)
console.log('getUser :', getUser)

var name = 'Tyler'
var handle = '@tylermcginnis'

function getUser () {
  return {
    name: name,
    handle: handle
  }
}

在上面的代码，你想在 console 中打印出什么？当 JavaScript 开始一行一行执行代码和调用 console.log 时，创建 阶段已经完成了。这意味着，正如之前看到的，变量声明已经赋值为 undefined ，而函数声明则整个放在内存中了。所以正如我们期望的那样，name 和 handle 值为 undefined，getUser 引用内存中的函数。

1
2
3
4
5
6
7
8
9
10
11
12
13

console.log('name: ', name) // name: undefined
console.log('handle: ', handle) // handle: undefined
console.log('getUser :', getUser) // getUser: ƒ getUser () {}

var name = 'Tyler'
var handle = '@tylermcginnis'

function getUser () {
  return {
    name: name,
    handle: handle
  }
}

在创建阶段给变量声明默认赋值为 undefined 的过程称为变量提升（Hoisting）

之前你可能尝试过向自己解释“变量提升”，但是不尽人意。“变量提升”令人迷惑的点在于实际上没有任何东西“提升”或者移动。现在你理解了执行上下文和变量声明在 创建 阶段默认赋值为 undefined，从而你也理解了“变量提升”，因为这就是“变量提升”。

现在，你应该对全局执行上下文和它的两个阶段——创建 和 执行相当熟悉了。好消息是只剩一个其他的执行上下文你需要学习，而且它几乎和全局执行上下文完全相同。它就是函数执行上下文，它在函数调用的时候创建。

关键的是，执行上下文只有在 JavaScript 引擎第一次开始解释代码时（全局执行上下文）或者函数调用时才创建。

现在主要的问题是，全局执行上下文和函数执行上下文的不同点是什么？如果你还记得，之前提到过在全局 创建 阶段，JavaScript 引擎将会：

1. 创建全局对象
2. 创建 this 对象
3. 为变量和函数设置内存空间
4. 变量声明默认赋值为 undefined，同时函数声明存入内存

这些步骤对于函数执行上下文来说哪些是不对的？步骤 1。我们有且只有一个全局对象，它在全局执行上下文的 创建 阶段创建，而不会在函数调用和 JavaScript 引擎创建函数执行上下文时创建。函数执行上下文不需要创建全局变量，而是需要考虑参数（arguments）问题，而全局执行上下文没有这个问题。考虑到这些，我们可以调整之前的列表。当函数执行上下文创建时，JavaScript 引擎将会：

1. 创建全局对象
2. 创建一个参数对象
3. 创建 this 对象
4. 为变量和函数设置内存空间
5. 变量声明默认赋值为 undefined，同时函数声明存入内存

我们回到之前提到的代码，来看看这个过程，但是这次除了定义 getUser，还要看看调用它时会发生什么。

查看可视化代码

正如我们所说，调用 getUser 时会创建新的执行上下文。在 getUser 执行上下文的 创建 阶段，JavaScript 引擎创建 this 对象和 arguments 对象。因为 getUser 没有任何变量，所以 JavaScript 不需要给变量设置内存空间和进行“提升”。

你可能也注意到，当 getUser 函数执行完，它在可视化图里被移除了。实际上，JavaScript 引擎创建了“执行栈”（也被成为“调用栈”）。当函数调用时，创建新的执行上下文并把它加入执行栈。当函数执行结束，完成了 创建 和 执行 阶段，它会从执行栈中弹出。因为 JavaScript 是单线程的（意味着同时只能执行一个任务），所以这个过程很容易实现可视化。使用 “JavaScript Visualizer”，执行栈以嵌套形式显示，每个嵌套项对应执行栈中的新的执行上下文。

查看可视化代码

现在，我们已经知道函数调用如何创建自己的执行上下文，并加入执行栈中。我们还不知道的是有局部变量时会怎么样。我们修改代码，让函数有局部变量。

查看可视化代码

这里有一些重要的细节要注意。第一点是，你传入的任何参数都会作为局部变量添加到函数的执行上下文。在例子中，handle 作为变量出现在 全局 执行上下文（在变量定义的地方），也出现在 getURL 执行上下文中，因为把它当做参数传入了。然后是，函数内部声明的变量，存在于函数执行上下文中。所以当我们创建 twitterURL 时，它存在于 getURL 执行上下文——它定义的地方，而不在 全局 执行上下文中。这点看起来很明显，但它是我们下个主题——作用域的基本原理。

过去，你可能听到过对“作用域”的定义，即为“可访问到变量的地方”。现在不管这个定义是否正确，使用你新学到的知识——执行上下文和 JavaScript Visualizer 工具，作用域的概念会变得比之前更加清晰。实际上，MDN 将 “作用域” 定义为 “当前执行的上下文”。听起来很熟悉？我们可以用类似执行上下文的思维来思考“作用域”和“可访问到变量的地方”。

这里有个测试。下面代码中，bar 会打印出什么？

1
2
3
4
5
6
7

function foo () {
  var bar = 'Declared in foo'
}

foo()

console.log(bar)

我们用 JavaScript Visualizer 来验证。

查看可视化代码

foo 调用时，我们在执行栈中创建新的执行上下文。在 创建 阶段创建 this、arguments，并给 bar 赋值为 undefined。然后开始 执行 阶段，把字符串 Declared in foo 赋值给 bar。在 执行 阶段结束后，foo 执行上下文从栈中弹出。当 foo 从执行栈中移除时，我们尝试在 console 中打印 bar。此时通过 JavaScript Visualizer，发现 bar 好像是从来没有出现过，所以我们得到 undefined。这个告诉我们，函数内部定义的变量是局部作用域的。这意味着（对大多数而已，后面会看到例外的情况）一旦函数执行上下文从执行栈弹出，变量就无法访问到了。

下面是另一个测试。下面的代码执行完之后 console 会打印出什么？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function first () {
  var name = 'Jordyn'

  console.log(name)
}

function second () {
  var name = 'Jake'

  console.log(name)
}

console.log(name)
var name = 'Tyler'
first()
second()
console.log(name)

我们还是来看看 JavaScript Visualizer。

查看可视化代码

我们得到的结果是：undefined、Jordyn、Jake 和 Tyler。这个告诉我们，我们可以认为每个新的执行上下文有它自己的特有的变量环境。即使还有其他执行上下文包含变量 name，JavaScript 引擎会先从当前执行上下文查找变量。

这就引出新的问题，如果当前执行上下文中不存在变量怎么办？JavaScript 引擎是否就停止查找该变量？我们来看个例子，它会告诉我们答案。下面的代码，会打印什么结果？

1
2
3
4
5
6
7

var name = 'Tyler'

function logName () {
  console.log(name)
}

logName()

查看可视化代码

可能直觉告诉你会打印 undefined，因为 logName 执行上下文的作用域下没有 name 变量。这样想是正常的，但是是错误的。如果 JavaScript 引擎在函数执行上下文中找不到变量会发生什么呢？它会在最近的父级执行上下文中查找该变量。这个查找链将会一直持续，直到引擎查找到全局执行上下文。这种情况下，如果全局执行上下文也没有该变量，那么将会抛出引用错误（Reference Error）。

如果变量在局部执行上下文中不存在，JavaScript 引擎会逐个检查各自的父级执行上下文，这个过程称为 作用域链。在 JavaScript Visualizer 中显示，每个新的执行上下文添加了缩进并加上特别的背景颜色。通过可视化，你可以看到每个子级执行上下文可以引用它父级执行上下文中的任何变量，但是反之则不行。

前面我们学习到，函数内部定义的变量是局部作用域的，当函数执行上下文从执行栈弹出后，变量就无法访问了（针对大多数情况）。这个说法错误的一种情况是：当一个函数内嵌在另一个函数里时。这种情况下，即使父级函数的执行上下文已经从执行栈中移除，子函数也可以保持能访问外部函数作用域。这个说起来就复杂了。还是使用 JavaScript Visualizer，它可以帮助我们。

查看可视化代码

在 makeAdder 执行上下文在执行栈弹出后，JavaScript Visualizer 创建了 闭包作用域（Closure Scope）。在 闭包作用域（Closure Scope） 里拥有和 makeAdder 执行上下文里一样的变量环境。产生这个情况的原因是，我们在把函数嵌入到另一个函数里。在我们这个例子里，函数 inner 内嵌在函数 makeAdder 里，所以 inner 创建了包含 makeAdder 变量环境的 闭包。因为创建了闭包作用域（Closure Scope），所以即使 makeAdder 执行环境已经从执行栈弹出了，inner 还是可以访问变量 x（通过作用域链）。

正如你所想，子函数“包含”它父级函数的变量环境，把这个概念称为“闭包”。

原文: 5 Easy Steps to Understanding JSON Web Tokens (JWT)
作者: Mikey Stecky-Efantis
译者: hhking

这篇文章，将会解释 JSON Web Tokens (JWT) 的基本原理以及为什么使用它们。JWT 是确保你的应用程序可信任和安全的重要部分。JWT 允许以安全的方式来表示信息，例如用户数据。

为了解释 JWT 的工作原理，我们从抽象的定义开始：

JSON Web Token (JWT) 是一个 JSON 对象, 在 RFC 7519 中定义为一种用来表示双方信息集的安全方式。Token 由头部 (header)、负载 (payload)、签名 (signature) 组成。

简单的说，JWT 只是形如下面格式的字符串：

1

header.payload.signature

需要注意的是，双引号字符串也是合法的 JSON 对象

为了说明如何使用和为什么使用 JWT，我们将用一个简单的 3 实体示例（参见下图）。例子里的三个实体分别是用户（user）、应用服务器（application server）、认证服务器（authentication server）。认证服务器提供 JWT 给用户，然后用户可以安全的和应用通信。

在这个例子中，用户首先通过认证服务器提供的登录系统（例如：用户名和密码，Facebook 登录，Google 登录，等等）登录认证服务器。然后认证服务器生成 JWT 并返回给用户。当用户向应用服务器发起 API 请求时，会附带上 JWT。在这一步中，应用服务器会配置成去验证传入的 JWT 是否由认证服务器生成的（验证过程将在后面详细解释）。所以，当用户携带 JWT 发起 API 请求时，应用可以通过 JWT 来校验 API 请求是否来自认证的用户。

现在，我们将更加深入的研究 JWT 本身及其构建和验证的方式。

Step 1. 创建 HEADER

JWT 的头部（header）模块包含了如何计算 JWT 签名的信息。header 是个 JSON 对象，格式如下：

1
2
3
4

{
    "typ": "JWT",
    "alg": "HS256"
}

这个 JSON 中，”type” 字段的值指明这个对象是个 JWT，”alg” 字段的值说明用什么 hash 算法来生成 JWT 签名模块。例子中，我们使用的是 HMAC-SHA256 算法 —— 带有密钥的 hash 算法，来计算签名（在 step 3 详细说明）。

Step 2. 创建 PAYLOAD

JWT 的负载（payload）模块是存储在其中的数据（这个数据也被称为 JWT 的 “声明”）。在例子中，认证服务器生成 JWT，JWT 中保存了用户的信息，具体的说是用户 ID。

1
2
3

{
    "userId": "b08f86af-35da-48f2-8fab-cef3904660bd"
}

例子中，我们在 payload 中只保存了一个声明。你想要的话，也可以添加更多的声明。JWT 的 payload 有几种不同的标准声明，例如：“iss” 表示发行人, “sub” 表示主题, 以及 “exp” 表示过期时间。这些字段在创建 JWT 时非常有用，并且是可选的字段。可以在 wikipedia page 上查看详细的 JWT 标准 字段列表。

要记住，数据的大小会影响整个 JWT 的大小，整个一般不是问题，但是太大的 JWT 可能会对性能有负面影响并导致延迟。

Step 3. 创建 SIGNATURE

签名（signature）是有下面的伪代码计算得到的：

1
2
3
4

// signature algorithm
data = base64urlEncode( header ) + “.” + base64urlEncode( payload )
hashedData = hash( data, secret )
signature = base64urlEncode( hashedData )

这个算法做的是：对步骤 1 和 2 生成的 header 和 payload 进行 base64url encodes 编码，然后把编码生成的字符串中间通过句号（.）连接起来。在伪代码中，把连接的字符串赋值给 data。通过 JWT header 中定义的 hash 算法，加上密钥对 data 字符串 hash 处理。把 hash 后的数据赋值给 hashedData。这个 hash 后的数据通过 base64url 编码生成 JWT 签名（signature）。

我们的例子中，header 和 payload 被 base64url 编码成：

1
2
3
4

// header
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9
// payload
eyJ1c2VySWQiOiJiMDhmODZhZi0zNWRhLTQ4ZjItOGZhYi1jZWYzOTA0NjYwYmQifQ

然后，将编译后的 header 和 payload 进行拼接，使用指定的签名算法和密钥对它计算，得到签名需要的 hash 后的数据。在我们例子中，也就是使用 HS256 算法，密钥为字符串 secret，对字符串 data 计算得到字符串 hashedData。然后，通过 base64url 对字符串 hashedData 编码得到下面的 JWT 签名（signature）：

1
2

// signature
-xN_h82PHVTCMA9vdoHrcZxH-x5mb11y1537t3rGzcM

Step 4. 将 JWT 三个模块合并

现在，我们已经创建了所有的三个模块，可以生成 JWT 了。记住 JWT 的结构 header.payload.signature，我们简单的使用句点（.）作为分隔来合并他们。我们使用 base64url 编码后的 header 和 payload，以及在 Step 3 得到的 signature：

1
2

// JWT Token
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJiMDhmODZhZi0zNWRhLTQ4ZjItOGZhYi1jZWYzOTA0NjYwYmQifQ.-xN_h82PHVTCMA9vdoHrcZxH-x5mb11y1537t3rGzcM

你可以使用 jwt.io 去创建你的 JWT。

回到我们的例子，现在认证服务器可以把这个 JWT 发送给用户。

JWT 是如何保护数据的

重要的是要理解，使用 JWT 的目的不是以任何方式隐藏或者模糊数据。使用 JWT 的目的是为了证明发送的数据是由可信的源创建的。

正如前面的步骤所示，JWT 里的数据被编码、签名，但是没有加密。编码数据的目的是为了转化数据的结构。签名数据是可以让数据接收者校验数据来源的可靠性。所以编码和签名数据并没有保护数据。而另一方面，加密的主要目的是保护数据和防止未授权访问。关于编码和加密的不同之处的详细解释，以及更多关于 hash 的原理，可以看 这篇文章。

由于 JWT 只是签名和编码数据，没有加密，所有 JWT 不保证敏感数据的任何安全性。

Step 5. 校验 JWT

在我们的简单 3 实体实例中，我们使用的 JWT 是由 HS256 算法签名 —— 这个算法的密钥只有认证服务器和应用服务器知道。当应用服务器设置他的认证过程时，应用服务器从认证服务器那接收密钥。由于应用知道密钥，当用户向应用发起携带 JWT 的 API 请求时，应用可以执行和 Step 3 一样的签名算法。然后应用可以校验它自己 hash 操作生成的签名是否和 JWT 中的签名匹配（即它匹配认证服务器创建的 JWT 签名）。如果签名匹配，意味着 JWT 是合法的，标明 API 请求是来自可靠的来源。否则，如果签名不匹配，意味着接收的 JWT 是无效的，这也可能说明应用遭受潜在的攻击。所以，通过校验 JWT，应用在和用户之间建立了信任。

总结

我们了解了 JWT 是什么，如何创建和校验它，以及如何用它来建立应用和用户的信任。这是理解 JWT 的基本原理和它的作用的起点。JWT 只是确保应用中信任和安全性的难题之一。

需要指出的是，本文所述的 JWT 认证设置使用的是对称密钥算法（HS256）。你也可以用类似的方式来设置你的 JWT 认证，只是使用非对称算法（例如 RS256）—— 认证服务器有一个密钥，应用有一个公钥。关于使用对称和非对称算法的不同之处的详细分析，可以查看 这个 Stack Overflow 上的问题。

同时要说明的是，JWT 必须通过 HTTPS 连接（不是 HTTP）来发送。使用 HTTPS 可以防止未授权用户窃取发送的 JWT，从而无法拦截服务端和用户之间的通信。

还有就是，给你的 JWT payload 设置有效期 —— 特别是很短的有效期，这个很重要，从而如果旧的 JWT 被泄漏，它可能已经无效并无法在使用了。

高阶组件 High-Order Components，不属于 React 的 API，而是 React 的一种运用技巧，或者说设计模式。所以，不使用高阶组件，也是可以实现功能，但是掌握高阶组件，可以提高代码的灵活性和复用性，实现起来更加优雅。当然，学会 React 的高级运用，也可以让你更加深入的理解 React。

高阶组件，其实没有想象的那么复杂。

什么是高阶组件

高阶组件是一个函数，接收一个组件，然后返回一个新的组件。

1

const EnhancedComponent = highOrderComponent(WrappedComponent);

要记住的是，虽然名称是高阶组件，但是高阶组件不是组件，而是函数！

既然是函数，那就可以有参数，有返回值。从上面可以看出，这个函数接收一个组件 WrappedComponent 作为参数 ，返回加工过的新组件 EnhancedComponent。其实高阶组件就是设计模式里的装饰者模式。

可以说，组件是把 props 转化成 UI，而高阶组件是把一个组件转化成另外一个组件。

下面是一个简单的高阶组件：

1
2
3
4
5
6
7
8
9
10

import React, { Component } from 'react';

export default (WrappedComponent) => {
  return class EnhancedComponent extends Component {
    // do something
    render() {
      return <WrappedComponent />;
    }
  }
}

从上面的代码可以看出，我们可以对传入的原始组件 WrappedComponent 做一些你想要的操作（比如操作 props，提取 state，给原始组件包裹其他元素等），从而加工出你想要的组件 EnhancedComponent 。把通用的逻辑放在高阶组件中，对组件实现一致的处理，从而实现代码的复用。

使用高阶组件

高阶组件的一个应用场景，就是在表单中的使用。

React 中 受控组件，是通过 state 来控制用户的输入行为，所以我们需要通过监听 onChange 来更新 state，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import React, { Component } from 'react';

class Input extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
    }
  }
  
  handleChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }
  
  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

export default Input;

通常，我们还需要对表单元素进行验证，这时可能需要在 handleChange 中添加验证的逻辑。如果是一个表单元素，这样写没什么问题，但是当表单元素越来越多，还是这样一个一个元素的添加逻辑的话，是一种什么体验？如果产品再改一下需求，那你就只能含泪加班了！

这时候，高阶组件的作用就可以体现出来了。只需要把所有表单元素通用的逻辑放在高阶组件中。把输入框需要的 value 和 onChange 提取到高阶组件，再通过 props 传给原始的组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import React, { Component } from 'react';

export default (WrappedComponent) => {
  return class InputHOC extends Component {
    constructor(props) {
      super(props);
      this.state = {
        value: '',
      }
    }

    handleChange = (e) => {
      this.setState({
        value: e.target.value,
      });
    }

    render() {
      const passProps = {
        value: this.state.value,
        onChange: this.handleChange,
      }
      return <WrappedComponent {...passProps} />;
    }
  }
}

然后表单元素里就不需要实现 state 和 onChange 的逻辑，只需要处理传入的 props, 并调用一下高阶组件，得到的就是带有我们需要的属性和功能的新组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import React, { Component } from 'react';
import InputHOC from './InputHOC';

import './style.css';

class Input extends Component {
  render() {
    return (
      <input className="input" type="text" {...this.props} />
    )
  }
}

export default InputHOC(Input);

然后你只要拿新的组件去使用，就可以了。如果还有其他的表单元素，同样只需要调用高阶组件，就可以得到你需要的组件。这就是一个简单的高阶组件的运用，实现代码的复用。

从上面的例子可以看出，在高阶组件里，你可以操作 props、state，甚至修改 render 方法里的渲染内容。

高阶组件的模式和数据流实际如图：

一些注意点

参数

既然高级组件是一个函数，那么这个函数也可以有多个参数，例如：

1
2
3
4
5
6
7
8

export default (WrappedComponent, data) => {
  return class EnhancedComponent extends Component {
    // do something with data
    render() {
      return <WrappedComponent />;
    }
  }
}

命名

高阶组件的创建的容器组件的名称在 React Developer Tools 中看起来和普通组件一样，看不出是不是使用了高阶组件。

为了方便调试，一般约定用容器组件类名包裹原始组件来命名容器组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import React, { Component } from 'react';

const getDisplayName = (WrappedComponent) => {
  return WrappedComponent.displayName ||
    WrappedComponent.name ||
    'Component'
}

export default (WrappedComponent, validate) => {
  return class InputHOC extends Component {
    static displayName = `InputHOC(${getDisplayName(WrappedComponent)})`;
    constructor(props) {
      super(props);
      this.state = {
        value: '',
      }
    }

    handleChange = (e) => {
      console.log(e);
      this.setState({
        value: e.target.value,
      });
    }

    render() {
      const passProps = {
        value: this.state.value,
        onChange: this.handleChange,
      }
      return <WrappedComponent {...passProps} />;
    }
  }
}

结果如下，这样就可以直观的看出是使用了高阶组件：

多层高阶组件

可以对一个组件，应用多个高阶组件，形成多层嵌套：

1
2

Input = InputHOC(Input);
Input = InputHHOC(Input);

总结

高阶组件是属于 React 高级运用，但是其实是一个很简单的概念，但是它非常实用。在实际的业务场景中，灵活合理的使用高阶组件，可以提高代码的复用性和灵活性。

对高阶组件，我们可以总结以下几点：

• 高阶组件是一个函数，而不是组件
• 组件是把 props 转化成 UI，高阶组件是把一个组件转化成另一个组件
• 高阶组件的作用是复用代码
• 高阶组件对应设计模式里的装饰者模式

原文：Learn these neat JavaScript tricks in less than 5 minutes
作者：Alcides Queiroz

5 分钟学习一些优雅的 JavaScript 技巧 —— 专业的省时技巧

1. 清空或截取数组

一个简单的清空或者截取数组的方法，就是修改它的 length 属性：

1
2
3
4
5
6
7
8

const arr = [11, 22, 33, 44, 55, 66];
// 截取
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// 清空
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2.用对象解构来模拟参数命名

当你要给函数传入带有一系列配置的参数时，你很可能会使用配置对象的方法，例如：

1
2
3
4
5
6
7

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
  const foo = config.foo !== undefined ? config.foo : 'Hi';
  const bar = config.bar !== undefined ? config.bar : 'Yo!';
  const baz = config.baz !== undefined ? config.baz : 13;
  // ...
}

在 JavaScript 中模拟命名参数，是一个陈旧但是很有效的方式。这样函数调用看起来舒服多了。另一方面，配置对象的控制逻辑也不需要这么冗长，使用 ES2015 的对象解构，可以避免这个问题：

1
2
3

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
  // ...
}

如果你想让配置对象是可选的，也很简单：

1
2
3

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
  // ...
}

3.对数组使用对象解构

使用对象解构把数组项赋值给特定的变量：

1
2

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

译注：这里把数组下标为 2 的值（US）赋给变量 country; 下标为 4 的值（New York）赋给变量 state。

4. switch 中使用范围

注意：经过一番思考，我决定把这个技巧和文中其他的区别开来。这个并不是一个节约时间的技巧，在真正代码中也不适合使用。记住：这种场景下使用 if 通常会更好。
和文中其他的技巧不同，这个方法主要是为了好奇而不是实用。
总之，由于历史原因我会保留这个技巧在这篇文章中。

这里有个简单的在 switch 语句中使用范围的技巧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function getWaterState(tempInCelsius) {
  let state;
  
  switch (true) {
    case (tempInCelsius <= 0): 
      state = 'Solid';
      break;
    case (tempInCelsius > 0 && tempInCelsius < 100): 
      state = 'Liquid';
      break;
    default: 
      state = 'Gas';
  }
  return state;
}

5. 使用 async/await 时，await 多个 async 函数

可以使用 Promise.all 来 await 多个 async 函数执行完成：

1

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. 创建纯对象

你可以创建 100% 的纯对象（pure object）, 不继承 Object 的任何属性和方法（例如：constructor、toString() 等等）。

1
2
3
4
5

const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

7. 格式化 JSON 代码

JSON.stringify 能做的不只是简单的字符串化对象，你还可以使用它来格式化 JSON 的输出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const obj = { 
  foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
};
// The third parameter is the number of spaces used to 
// beautify the JSON output.
JSON.stringify(obj, null, 4); 
// =>"{
// =>    "foo": {
// =>        "bar": [
// =>            11,
// =>            22,
// =>            33,
// =>            44
// =>        ],
// =>        "baz": {
// =>            "bing": true,
// =>            "boom": "Hello"
// =>        }
// =>    }
// =>}"

8. 数组去重

只使用 ES2015 的 Set 和展开运算符，就可以轻松实现数组去重：

1
2
3

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

9.扁平化多维数组

使用展开运算符可以轻松的扁平化数组：

1
2

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

可惜的是，上面的这个技巧只对二维数组有效。但是通过递归，我们可以使它也适用于二维以上的数组：

1
2
3
4
5
6
7
8
9

function flattenArray(arr) {
  const flattened = [].concat(...arr);
  return flattened.some(item => Array.isArray(item)) ? 
    flattenArray(flattened) : flattened;
}

const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

就这些啦！希望这些优雅的小技巧可以帮你写出更好更漂亮的 JavaScript。

React 从 v16 开始，像是跨入了新的时代，性能和新的 API 都令人瞩目。重新认识 React，从重新认识生命周期开始。

为了更好的支持异步渲染（Async Rendering），解决一些生命周期滥用可能导致的问题，React 从 V16.3 开始，对生命周期进行渐进式调整，同时在官方文档也提供了使用的最佳实践。

这里我们将简要对比 React 新旧生命周期，重新认识一下 React 生命周期。

新的生命周期

先看看两张经典的生命周期的示意图

React 16.3 新增的生命周期方法

1. getDerivedStateFromProps()
2. getSnapshotBeforeUpdate()

逐渐废弃的生命周期方法：

1. componentWillMount()
2. componentWillReceiveProps()
3. componentWillUpdate()

虽然废弃了这三个生命周期方法，但是为了向下兼容，将会做渐进式调整。（详情见#12028）
V16.3 并未删除这三个生命周期，同时还为它们新增以 UNSAFE_ 前缀为别名的三个函数 UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()。
在 16.4 版本给出警告将会弃用 componentWillMount()、componentWillReceiveProps()、componentWillUpdate() 三个函数
然后在 17 版本将会删除 componentWillMount()、componentWillReceiveProps()、componentWillUpdate() 这三个函数，会保留使用 UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()

一般将生命周期分成三个阶段：

1. 创建阶段（Mounting）
2. 更新阶段（Updating）
3. 卸载阶段（Unmounting）

从 React v16 开始，还对生命周期加入了错误处理（Error Handling）。

下面分析一下生命周期的各个阶段。

创建阶段 Mounting

组件实例创建并插入 DOM 时，按顺序调用以下方法：

• constructor()
• static getDerivedStateFromProps()
• componentWillMount()/UNSAFE_componentWillMount()（being deprecated）
• render()
• componentDidMount()

有定义 getDerivedStateFromProps 时，会忽略 componentWillMount()/UNSAFE_componentWillMount()
（详情查看源码）

constructor()

1

constructor(props)

构造函数通常用于：

• 使用 this.state 来初始化 state
• 给事件处理函数绑定 this

注意：ES6 子类的构造函数必须执行一次 super()。React 如果构造函数中要使用 this.props，必须先执行 super(props)。

static getDerivedStateFromProps()

1

static getDerivedStateFromProps(nextProps, prevState)

当创建时、接收新的 props 时、setState 时、forceUpdate 时会执行这个方法。

注意：v16.3 setState 时、forceUpdate 时不会执行这个方法，v16.4 修复了这个问题。

这是一个 静态方法，参数 nextProps 是新接收的 props，prevState 是当前的 state。返回值（对象）将用于更新 state，如果不需要更新则需要返回 null。

下面是官方文档给出的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {
    isScrollingDown: false,
    lastRow: null,
  };

  static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

这个方法的常用作用也很明显了：父组件传入新的 props 时，用来和当前的 state 对比，判断是否需要更新 state。以前一般使用 componentWillReceiveProps 做这个操作。

这个方法在建议尽量少用，只在必要的场景中使用，一般使用场景如下：

1. 无条件的根据 props 更新 state
2. 当 props 和 state 的不匹配情况更新 state

详情可以参考官方文档的最佳实践 You Probably Don’t Need Derived State

componentWillMount()/UNSAFE_componentWillMount()（弃用）

1

UNSAFE_componentWillMount()

这个方法已经不推荐使用。因为在未来异步渲染机制下，该方法可能会多次调用。它所行使的功能也可以由 componentDidMount() 和 constructor() 代替：

• 之前有些人会把异步请求放在这个生命周期，其实大部分情况下都推荐把异步数据请求放在 componentDidMount() 中。
• 在服务端渲染时，通常使用 componentWillMount() 获取必要的同步数据，但是可以使用 constructor() 代替它。

可以使用 setState，不会触发 re-render

render

1

render()

每个类组件中，render() 唯一必须的方法。

render() 正如其名，作为渲染用，可以返回下面几种类型：

• React 元素（React elements）
• 数组（Arrays）
• 片段（fragments）
• 插槽（Portals）
• 字符串或数字（String and numbers）
• 布尔值或 null（Booleans or null）

注意：
Arrays 和 String 是 v16.0.0 新增。
fragments 是 v16.2.0 新增。
Portals 是 V16.0.0 新增。

里面不应该包含副作用，应该作为纯函数。

不能使用 setState。

componentDidMount()

1

componentDidMount()

组件完成装载（已经插入 DOM 树）时，触发该方法。这个阶段已经获取到真实的 DOM。

一般用于下面的场景：

• 异步请求 ajax
• 添加事件绑定（注意在 componentWillUnmount 中取消，以免造成内存泄漏）

可以使用 setState，触发re-render，影响性能。

更新阶段 Updating

• componentWillReceiveProps()/UNSAFE_componentWillReceiveProps()（being deprecated）
• static getDerivedStateFromProps()
• shouldComponentUpdate()
• componentWillUpdate()/UNSAFE_componentWillUpdate()（being deprecated）
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

有 getDerivedStateFromProps 或者 getSnapshotBeforeUpdate 时，componentWillReceiveProps()/UNSAFE_componentWillReceiveProps() 和 componentWillUpdate()/UNSAFE_componentWillUpdate() 不会执行 （详情查看源码）

componentWillReceiveProps()/UNSAFE_componentWillReceiveProps()（弃用）

1

UNSAFE_componentWillReceiveProps(nextProps)

这个方法在接收新的 props 时调用，需要注意的是，如果父组件导致组件重新渲染，即使 props 没有更改，也会调用此方法。

一般用这个方法来判断 props 的前后变化来更新 state，如下面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class ExampleComponent extends React.Component {
  state = {
    isScrollingDown: false,
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.currentRow !== nextProps.currentRow) {
      this.setState({
        isScrollingDown:
          nextProps.currentRow > this.props.currentRow,
      });
    }
  }
}

这个方法将被弃用，推荐使用 getDerivedStateFromProps 代替。

可以使用 setState

static getDerivedStateFromProps()

同 Mounting 时所述一致。

shouldComponentUpdate()

在接收新的 props 或新的 state 时，在渲染前会触发该方法。

该方法通过返回 true 或者 false 来确定是否需要触发新的渲染。返回 false， 则不会触发后续的 UNSAFE_componentWillUpdate()、render() 和 componentDidUpdate()（但是 state 变化还是可能引起子组件重新渲染）。

所以通常通过这个方法对 props 和 state 做比较，从而避免一些不必要的渲染。

PureComponent 的原理就是对 props 和 state 进行浅对比（shallow comparison），来判断是否触发渲染。

componentWillUpdate()/UNSAFE_componentWillUpdate() （弃用）

1

UNSAFE_componentWillUpdate(nextProps, nextState)

当接收到新的 props 或 state 时，在渲染前执行该方法。

在以后异步渲染时，可能会出现某些组件暂缓更新，导致 componentWillUpdate 和 componentDidUpdate 之间的时间变长，这个过程中可能发生一些变化，比如用户行为导致 DOM 发生了新的变化，这时在 componentWillUpdate 获取的信息可能就不可靠了。

不能使用 setState

render()

同 Mounting 时所述一致。

getSnapshotBeforeUpdate()

1

getSnapShotBeforeUpdate(prevProps, prevState)

这个方法在 render() 之后，componentDidUpdate() 之前调用。

两个参数 prevProps 表示更新前的 props，prevState 表示更新前的 state。

返回值称为一个快照（snapshot），如果不需要 snapshot，则必须显示的返回 null —— 因为返回值将作为 componentDidUpdate() 的第三个参数使用。所以这个函数必须要配合 componentDidUpdate() 一起使用。

这个函数的作用是在真实 DOM 更新（componentDidUpdate）前，获取一些需要的信息（类似快照功能），然后作为参数传给 componentDidUpdate。例如：在 getSnapShotBeforeUpdate 中获取滚动位置，然后作为参数传给 componentDidUpdate，就可以直接在渲染真实的 DOM 时就滚动到需要的位置。

下面是官方文档给出的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

componentDidUpdate()

1

componentDidUpdate(prevProps, prevState, snapshot)

这个方法是在更新完成之后调用，第三个参数 snapshot 就是 getSnapshotBeforeUpdate 的返回值。