155

Merge branch 'v2' of https://github.com/dt-fe/weekly into v2
154
2020-06-15 09:42:30 +08:00 · 2020-06-08 09:53:32 +08:00 · 2020-06-08 09:53:17 +08:00 · 2020-06-01 23:05:43 +08:00 · 2020-06-01 21:02:00 +08:00 · 2020-06-01 09:49:07 +08:00
19 changed files with 4085 additions and 2 deletions
@@ -80,7 +80,7 @@ SELECT * from bees WHERE bee = 'red';

 但是当我们将文法粒度变细，将 `CASE WHEN` 与 `WHERE` 区块分别交由两块文法解决，将等号这个通用的表达式抽离出来，就可以不关心上下文了，这种方式称为 **上下文无关文法**。

-附上一个 [mysql 上下文无关文法集合](https://github.com/antlr/grammars-v4/blob/master/mysql/MySqlParser.g4)。
+附上一个 [mysql 上下文无关文法集合](https://github.com/antlr/grammars-v4/blob/master/sql/mysql/Positive-Technologies/MySqlParser.g4)。

 ### 左推导与右推导

@@ -92,7 +92,7 @@ console 的功能主要在于控制台打印，它可以打印任何字符、对

 <img width=400 src="https://img.alicdn.com/tfs/TB1wAT2vbj1gK0jSZFuXXcrHpXa-1612-524.png">

-### console.memory( )
+### console.memory

 打印内存使用情况。

@@ -0,0 +1,279 @@
+## 1 引言
+
+`JSON.parse` 是浏览器内置的 API，但如果面试官让你实现一个怎么办？好在有人已经帮忙做了这件事，本周我们一起精读这篇 [JSON Parser with Javascript](https://lihautan.com/json-parser-with-javascript/) 文章吧，再温习一遍大学时编译原理相关知识。
+
+## 2 概述 & 精读
+
+要解析 JSON 首先要理解语法概念，之前的 [精读《手写 SQL 编译器 - 语法分析》](https://github.com/dt-fe/weekly/blob/v2/066.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E8%AF%AD%E6%B3%95%E5%88%86%E6%9E%90%E3%80%8B.md) 系列也有介绍过，不过本文介绍的更形象，看下面这个语法图：
+
+<img width=400 src="https://img.alicdn.com/tfs/TB1EbjfvQL0gK0jSZFtXXXQCXXa-1837-857.png">
+
+这是关于 Object 类型的语法描述图，从左向右看，根据箭头指向只要能走出这个迷宫就属于正确语法。
+
+比如第一行 `{` → `whitespace` → `}` 表示 `{ }` 属于合法的 JSON 语法。
+
+再比如观察向下的一条最长路线：`{` → `whitespace` → `string` → `whitespace` → `:` → `value` → `}` 表示 `{ string : value }` 属于合法的 JSON 语法。
+
+你可能会问，双引号去哪儿了？这就是语法树最核心的概念了，这张图是关于 Object 类型的 **产生式**，同理还有 string、value 的产生式，产生式中可以嵌套其他产生式，甚至形成环路，以此拥有描述纷繁多变语法的能力。
+
+最后我们再看一个环路，即 `{` → `whitespace` → `string` ... `,` → `whitespace` → `string` ... `,` ... `}`，我们发现，只要不走回头路，这条路是可以一直 “绕圈” 下去的，因此 Object 类型拥有了任意数量子字段的能力，只是每形成一个子字段，必须经过 `,` 号分割。
+
+### 实现 Parser
+
+首先实现一个基本结构：
+
+```js
+function fakeParseJSON(str) {
+  let i = 0;
+  // TODO
+}
+```
+
+`i` 表示访问字符的下标，当 `i` 走到字符串结尾表示遍历结束。
+
+然后是下一步，用几个函数描述解析语法的过程：
+
+```js
+function fakeParseJSON(str) {
+  let i = 0;
+  function parseObject() {
+    if (str[i] === '{') {
+      i++;
+      skipWhitespace();
+
+      // if it is not '}',
+      // we take the path of string -> whitespace -> ':' -> value -> ...
+      while (str[i] !== '}') {
+        const key = parseString();
+        skipWhitespace();
+        eatColon();
+        const value = parseValue();
+      }
+    }
+  }
+}
+```
+
+其中 `skipWhitespace` 表示匹配并跳过空格，所谓匹配意味着匹配成功，此时 `i` 下标可以继续后移，否则匹配失败。下一步则判断如果 `i` 不是结束标志 `}`，则按照 `parseString` 匹配字符串 → `skipWhitespace` 跳过空格 → `eatColon` 吃掉冒号 → `parseValue` 匹配值，这个链路循环。其中吃掉冒号表示 “匹配冒号但不会产生任何结果，所以就像吃掉了一样”，吃这个动作还可以用在其他场景，比如吃掉尾分号。
+
+> 对于看到这儿的小伙伴，笔者要友情提示一下，原文的思路是一种定制语法解析思路，无论是 `eatColon` 还是 `parseValue` 都仅具备解析 JSON 的通用性，但不具备解析任意语法的通用性。如果你想做一个具备解析任何通用语法的解析器，读入的内容应该是语法描述，处理方式必须更加通用，如果感兴趣可以阅读 [精读《手写 SQL 编译器 - 语法分析》](https://github.com/dt-fe/weekly/blob/v2/066.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E8%AF%AD%E6%B3%95%E5%88%86%E6%9E%90%E3%80%8B.md) 系列文章了解更多。
+
+由于 Object 第一个元素前面不允许加逗号，因此可以利用 `initial` 做一个初始化判定，在初始时机不会吃掉逗号：
+
+```js
+function fakeParseJSON(str) {
+  let i = 0;
+  function parseObject() {
+    if (str[i] === '{') {
+      i++;
+      skipWhitespace();
+
+      let initial = true;
+      // if it is not '}',
+      // we take the path of string -> whitespace -> ':' -> value -> ...
+      while (str[i] !== '}') {
+        if (!initial) {
+          eatComma();
+          skipWhitespace();
+        }
+        const key = parseString();
+        skipWhitespace();
+        eatColon();
+        const value = parseValue();
+        initial = false;
+      }
+      // move to the next character of '}'
+      i++;
+    }
+  }
+}
+```
+
+那么当第一个子元素前面存在逗号时，由于没有 “吃掉逗号” 这个功能，所以读到逗号会报错，语法解析提前结束。
+
+吃逗号和吃冒号的代码都非常简单，即判断当前字符串必须是 “要吃的那个元素”，并且在吃掉后将 `i` 下标自增 1：
+
+```js
+function fakeParseJSON(str) {
+  // ...
+  function eatComma() {
+    if (str[i] !== ',') {
+      throw new Error('Expected ",".');
+    }
+    i++;
+  }
+
+  function eatColon() {
+    if (str[i] !== ':') {
+      throw new Error('Expected ":".');
+    }
+    i++;
+  }
+}
+```
+
+在有了基本判定功能后，`fakeParseJSON` 需要返回 Object，因此我们只需在每个循环中对 Object 赋值，最后一并 return 即可：
+
+```js
+function fakeParseJSON(str) {
+  let i = 0;
+  function parseObject() {
+    if (str[i] === '{') {
+      i++;
+      skipWhitespace();
+
+      const result = {};
+
+      let initial = true;
+      // if it is not '}',
+      // we take the path of string -> whitespace -> ':' -> value -> ...
+      while (str[i] !== '}') {
+        if (!initial) {
+          eatComma();
+          skipWhitespace();
+        }
+        const key = parseString();
+        skipWhitespace();
+        eatColon();
+        const value = parseValue();
+        result[key] = value;
+        initial = false;
+      }
+      // move to the next character of '}'
+      i++;
+
+      return result;
+    }
+  }
+}
+```
+
+解析 Object 的代码就完成了。
+
+接着试着解析 Array，下面是 Array 的语法图：
+
+<img width=400 src="https://img.alicdn.com/tfs/TB1FvYjvKH2gK0jSZFEXXcqMpXa-1837-479.png">
+
+我们只需要吃逗号和 `parseValue` 即可：
+
+```js
+function fakeParseJSON(str) {
+  // ...
+  function parseArray() {
+    if (str[i] === '[') {
+      i++;
+      skipWhitespace();
+
+      const result = [];
+      let initial = true;
+      while (str[i] !== ']') {
+        if (!initial) {
+          eatComma();
+        }
+        const value = parseValue();
+        result.push(value);
+        initial = false;
+      }
+      // move to the next character of ']'
+      i++;
+      return result;
+    }
+  }
+}
+```
+
+接下来到了有趣的 `value` 语法图，可以看到 `value` 是许多种基础类型的 “或” 关系组成的：
+
+<img width=400 src="https://img.alicdn.com/tfs/TB1uGrmvND1gK0jSZFyXXciOVXa-1836-1293.png">
+
+我们只需要继续拆解分析即可：
+
+```js
+function fakeParseJSON(str) {
+  // ...
+  function parseValue() {
+    skipWhitespace();
+    const value =
+      parseString() ??
+      parseNumber() ??
+      parseObject() ??
+      parseArray() ??
+      parseKeyword('true', true) ??
+      parseKeyword('false', false) ??
+      parseKeyword('null', null);
+    skipWhitespace();
+    return value;
+  }
+}
+```
+
+其中 `parseKeyword` 函数用来解析一些保留关键字，比如将 `"true"` 解析成布尔类型 `true`：
+
+```js
+function fakeParseJSON(str) {
+  // ...
+  function parseKeyword(name, value) {
+    if (str.slice(i, i + name.length) === name) {
+      i += name.length;
+      return value;
+    }
+  }
+}
+```
+
+如上所示，只要在 name 与对应字符相等时，返回第二个传入参数即可。
+
+### 处理异常输入
+
+一个完整的语法解析功能需要包含错误处理，错误的情况主要分两种：
+
+1. 非法字符。
+2. 非正常结尾。
+
+原文提到的 JSON 错误提示优化非常棒，想想你在开发中突然看到下面的提示，是不是很蒙圈：
+
+```text
+Unexpected token "a"
+```
+
+既然我们是自己写的 JSON 解析器，就可以进行更友好的异常提示，比如：
+
+```text
+// show
+{ "b"a
+      ^
+JSON_ERROR_001 Unexpected token "a".
+Expecting a ":" over here, eg:
+{ "b": "bar" }
+      ^
+You can learn more about valid JSON string in http://goo.gl/xxxxx
+```
+
+更多 Demo 可以查看 [原文](https://lihautan.com/json-parser-with-javascript/)。
+
+## 3 总结
+
+这篇文章通过一个具体的例子解释如何做语法分析，对于词法解析入门非常直观，如果你想更深入理解语法解析，或者写一个通用语法解析器，可以阅读语法解析系列入门文章，笔者通过实际例子带你一步一步做一个完备的词法解析工具！
+
+语法解析入门系列文章，建议阅读顺序：
+
+- [精读《手写 SQL 编译器 - 词法分析》](https://github.com/dt-fe/weekly/blob/v2/064.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E8%AF%8D%E6%B3%95%E5%88%86%E6%9E%90%E3%80%8B.md)
+- [精读《手写 SQL 编译器 - 文法介绍》](https://github.com/dt-fe/weekly/blob/v2/065.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E6%96%87%E6%B3%95%E4%BB%8B%E7%BB%8D%E3%80%8B.md)
+- [精读《手写 SQL 编译器 - 语法分析》](https://github.com/dt-fe/weekly/blob/v2/066.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E8%AF%AD%E6%B3%95%E5%88%86%E6%9E%90%E3%80%8B.md)
+- [精读《手写 SQL 编译器 - 回溯》](https://github.com/dt-fe/weekly/blob/v2/067.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E5%9B%9E%E6%BA%AF%E3%80%8B.md)
+- [精读《手写 SQL 编译器 - 语法树》](https://github.com/dt-fe/weekly/blob/v2/070.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E8%AF%AD%E6%B3%95%E6%A0%91%E3%80%8B.md)
+- [精读《手写 SQL 编译器 - 错误提示》](https://github.com/dt-fe/weekly/blob/v2/071.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E9%94%99%E8%AF%AF%E6%8F%90%E7%A4%BA%E3%80%8B.md)
+- [精读《手写 SQL 编译器 - 性能优化之缓存》](https://github.com/dt-fe/weekly/blob/v2/078.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8B%E7%BC%93%E5%AD%98%E3%80%8B.md)
+- [精读《手写 SQL 编译器 - 智能提示》](https://github.com/dt-fe/weekly/blob/v2/085.%E7%B2%BE%E8%AF%BB%E3%80%8A%E6%89%8B%E5%86%99%20SQL%20%E7%BC%96%E8%AF%91%E5%99%A8%20-%20%E6%99%BA%E8%83%BD%E6%8F%90%E7%A4%BA%E3%80%8B.md)
+
+[syntax-parser](https://github.com/ascoders/syntax-parser) 这个零依赖的通用语法解析库就是根据上述文章一步一步完成的，看完了上面文章，就彻底理解了这个库的源码。
+
+> 讨论地址是：[精读《手写 JSON Parser》 · Issue #233 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/233)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,233 @@
+## 1 引言
+
+拖拽是前端非常常见的交互操作，但显然拖拽是强 DOM 交互的，而 React 绕过了 DOM 这一层，那么基于 React 的拖拽方案就必定值得聊一聊。
+
+结合 [How To Use The HTML Drag-And-Drop API In React](https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/) 这篇文章，让我们谈谈 React 拖拽这些事。
+
+## 2 概述
+
+原文说的比较简单，笔者先快速介绍其中重点部分。
+
+首先拖拽主要的 API 有 4 个：`dragEnter` `dragLeave` `dragOver` `drop`，分别对应拖入、拖出、正在当前元素范围内拖拽、完成拖入动作。
+
+基于这些 API，我们可以利用 React 实现一个拖入区域：
+
+```jsx
+import React from "react";
+
+const DragAndDrop = props => {
+  const handleDragEnter = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDragLeave = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDragOver = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDrop = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  return (
+    <div
+      className={"drag-drop-zone"}
+      onDrop={e => handleDrop(e)}
+      onDragOver={e => handleDragOver(e)}
+      onDragEnter={e => handleDragEnter(e)}
+      onDragLeave={e => handleDragLeave(e)}
+    >
+      <p>Drag files here to upload</p>
+    </div>
+  );
+};
+export default DragAndDrop;
+```
+
+`preventDefault` 指的是阻止默认响应，这个响应可能是跳转页面之类的，`stopPropagation` 是阻止冒泡，这样同样监听了事件的父元素就不会收到响应，我们可以精准作用于嵌套的子元素。
+
+接下来是拖拽状态管理，提到了 `useReducer`，顺便复习一下用法：
+
+```jsx
+...
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_DROP_DEPTH':
+      return { ...state, dropDepth: action.dropDepth }
+    case 'SET_IN_DROP_ZONE':
+      return { ...state, inDropZone: action.inDropZone };
+    case 'ADD_FILE_TO_LIST':
+      return { ...state, fileList: state.fileList.concat(action.files) };
+    default:
+      return state;
+  }
+};
+const [data, dispatch] = React.useReducer(
+  reducer, { dropDepth: 0, inDropZone: false, fileList: [] }
+)
+...
+```
+
+最后一个关键点在于拖入后的处理，利用 `dispatch` 增加拖入文件、设置拖入状态即可：
+
+```js
+const handleDrop = e => {
+  ...
+  let files = [...e.dataTransfer.files];
+
+  if (files && files.length > 0) {
+    const existingFiles = data.fileList.map(f => f.name)
+    files = files.filter(f => !existingFiles.includes(f.name))
+
+    dispatch({ type: 'ADD_FILE_TO_LIST', files });
+    e.dataTransfer.clearData();
+    dispatch({ type: 'SET_DROP_DEPTH', dropDepth: 0 });
+    dispatch({ type: 'SET_IN_DROP_ZONE', inDropZone: false });
+  }
+};
+```
+
+`e.dataTransfer.clearData` 函数用于清除拖拽过程中产生的临时变量，这些临时变量可以通过 `e.dataTransfer.xxx =` 的方式赋值，一般用于拖拽过程中值的传递。
+
+总结一下，利用 HTML5 的 API 将拖拽转化为状态，最终通过状态映射到 UI。
+
+原文内容还是比较简单的，笔者在精读部分再拓展一些更体系化的内容。
+
+## 3 精读
+
+现阶段拖拽主要分为两种，一种是 HTML5 原生规范的拖拽，这种方式在拖拽过程中不会影响 DOM 结构。另一种是完全所见即所得的拖拽方式，拖拽过程中 DOM 位置会随之变动，好处是可以立即反馈拖拽结果，当然缺点是华而不实，一旦用在生产环境，这种拖拽过程可能导致页面结构频繁跳动，反而看不清拖拽效果。
+
+由于本文也采用了第一种拖拽方案，因为笔者再重新整理一遍自己的封装思路。
+
+从使用角度反推，假设我们拥有一个拖拽库，那必定要拥有两个 API：
+
+```jsx
+import { DragContainer, DropContainer } from 'dnd'
+
+const DragItem = (
+  <DragContainer>
+    {({ dragProps }) => (
+      <div {...dragProps} />
+    )}
+  </DragContainer>
+)
+
+const DropItem = (
+  <DropContainer>
+    {({ dropProps }) => (
+      <div {...dropProps} />
+    )}
+  </DropContainer>
+)
+```
+
+`DragContainer` 包裹可以被拖拽的元素，`DropContainer` 包裹可以被拖入的元素，而至于 `dragProps` 与 `dropProps` 需要透传到子元素的 dom 节点，是为了利用 DOM API 控制拖拽效果，这也是拖拽唯一对 DOM 的要求，双方元素都需要有实体 DOM 承载。
+
+而上面例子中给出 `dragProps` 与 `dropProps` 的方式属于 RenderProps，我们可以将 `children` 当作函数执行以达到效果：
+
+```jsx
+const DragContainer = ({ children, componentId }) => {
+  const { dragProps } = useDnd(componentId)
+
+  return children({
+    dragProps
+  })
+}
+
+const DropContainer = ({ children, componentId }) => {
+  const { dropProps } = useDnd(componentId)
+
+  return children({
+    dropProps
+  })
+}
+```
+
+那么这里创建了一个自定义 Hook `useDnd` 接收 `dragProps` 与 `dropProps`，这个自定义 Hook 可以这么写：
+
+```jsx
+const useDnd = ({ componentId }) => {
+  const dragProps = {}
+  const dropProps = {}
+
+  return { dragProps, dropProps }
+}
+```
+
+接下来，我们就要分别实现 `drag` 与 `drop` 了。
+
+对 `drag` 来说，只要实现 `onDragStart` 与 `onDragEnd` 即可：
+
+```jsx
+const dragProps = {
+  onDragStart: ev => {
+    ev.stopPropagation()
+    ev.dataTransfer.setData('componentId', componentId)
+  },
+  onDragEnd: ev => {
+    // 做一些拖拽结束的清理工作
+  }
+}
+```
+
+`stopPropagation` 的作用在原文简介中已经介绍过了，`setData` 则是通知拖拽方，当前拖拽的组件 id 是什么，**这是由于拖拽由 `drag` 发起而由 `drop` 响应，因此必须有个数据传输过程，而 `dataTransfer` 就最适合做这件事。**
+
+对于 `drop` 来说，只要实现 `onDragOver` 与 `onDrop` 即可：
+
+```jsx
+const dropProps = {
+  onDropOver: ev => {
+    // 做一些样式处理，提示用户此时松手会将元素防止在何处
+  },
+  onDrop: ev => {
+    ev.stopPropagation()
+    const componentId = ev.dataTransfer.getData('componentId')
+    // 通过 componentId 修改数据，通过 React Rerender 刷新 UI
+  }
+}
+```
+
+重点在 `onDrop`，它是实现拖拽效果的 “真正执行处”，最终通过修改 UI 的方式更新数据。
+
+存在一种场景，一个容器既可以被拖动，也可以被拖入，这种情况一般这个组件是个容器，但这个容器可以被拖入到其他容器中，可以自由嵌套。
+
+实现这种场景的方式就是将 `DragContainer` 与 `DropContainer` 作用到一个组件上：
+
+```jsx
+const Box = (
+  <DragContainer>
+    {({ dragProps }) => (
+      <DropContainer>
+        {({ dropProps }) => {
+          <div {...dragProps} {...dropProps} />
+        }}
+      </DropContainer>
+    )}
+  </DragContainer>
+)
+```
+
+之所以能嵌套，在于 HTML5 的 API 允许一个元素同时拥有 `onDragStart`、`onDrop` 这两种属性，而上面的语法不过是同时将这两种属性传给组件 DOM。
+
+所以，动手实现一个拖拽库就是这么简单，只要活用 HTML5 的拖拽 API，结合 React 一些特殊语法便够了。
+
+## 4 总结
+
+最后留下一个思考题，许多具有拖拽功能的系统都具备 “拖拽 placeholder” 的功能，即拖拽元素的过程中，在其 “落点” 位置展示一条横线或竖线，引导出松手后元素位置落点，如图所示：
+
+<img width=400 src="https://img.alicdn.com/tfs/TB11H04wbY1gK0jSZTEXXXDQVXa-1434-384.png">
+
+那么这条辅助线是通过什么方式实现的呢？欢迎在评论区留言！如果你有辅助线实现方案解析的文章，欢迎分享，也可以期待笔者未来专门写一篇 “拖拽 placeholder” 实现剖析的精读。
+
+> 讨论地址是：[精读《手写 JSON Parser》 · Issue #233 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/233)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,108 @@
+## 1 引言
+
+`useRef` 是常用的 API，但还有一个 `createRef` 的 API，你知道他们的区别吗？通过 [React.useRef and React.createRef: The Difference](https://blog.bitsrc.io/react-useref-and-react-createref-the-difference-afedb9877d0f) 这篇文章，你可以了解到何时该使用它们。
+
+## 2 概述
+
+其实原文就阐述了这样一个事实：`useRef` 仅能用在 FunctionComponent，`createRef` 仅能用在 ClassComponent。
+
+第一句话是显然的，因为 Hooks 不能用在 ClassComponent。
+
+第二句话的原因是，`createRef` 并没有 Hooks 的效果，其值会随着 FunctionComponent 重复执行而不断被初始化：
+
+```tsx
+function App() {
+  // 错误用法，永远也拿不到 ref
+  const valueRef = React.createRef();
+  return <div ref={valueRef} />;
+}
+```
+
+上述 `valueRef` 会随着 App 函数的 Render 而重复初始化，**这也是 Hooks 的独特之处，虽然用在普通函数中，但在 React 引擎中会得到超出普通函数的表现，比如初始化仅执行一次，或者引用不变**。
+
+为什么 `createRef` 可以在 ClassComponent 正常运行呢？这是因为 ClassComponent 分离了生命周期，使例如 `componentDidMount` 等初始化时机仅执行一次。
+
+原文完。
+
+## 3 精读
+
+那么知道如何正确创建 Ref 后，还知道如何正确更新 Ref 吗？
+
+由于 Ref 是贯穿 FunctionComponent 所有渲染周期的实例，理论上在任何地方都可以做修改，比如：
+
+```tsx
+function App() {
+  const valueRef = React.useRef();
+
+  valueRef.current += 1;
+
+  return <div />;
+}
+```
+
+但其实上面的修改方式是不规范的，React 官方文档里要求我们避免在 Render 函数中直接修改 Ref，请先看下面的 FunctionComponent 生命周期图：
+
+<img width=600 src="https://img.alicdn.com/tfs/TB12aHDwQL0gK0jSZFtXXXQCXXa-3300-2550.png">
+
+从图中可以发现，在 `Render phase` 阶段是不允许做 “side effects” 的，也就是写副作用代码，这是因为这个阶段可能会被 React 引擎随时取消或重做。
+
+修改 Ref 属于副作用操作，因此不适合在这个阶段进行。我们可以看到，在 `Commit phase` 阶段可以做这件事，或者在回调函数中做（脱离了 React 生命周期）。
+
+当然有一种情况是可以的，即 [懒初始化](https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily)：
+
+```ts
+function Image(props) {
+  const ref = useRef(null);
+
+  // ✅ IntersectionObserver is created lazily once
+  function getObserver() {
+    if (ref.current === null) {
+      ref.current = new IntersectionObserver(onIntersect);
+    }
+    return ref.current;
+  }
+
+  // When you need it, call getObserver()
+  // ...
+}
+```
+
+懒初始化的情况下，副作用最多执行一次，而且仅用于初始化赋值，所以这种行为是被允许的。
+
+为什么对副作用限制的如此严格？因为 FunctionComponent 增加了内置调度系统，为了优先响应用户操作，可能会暂定某个 React 组件的渲染，具体可以看第 99 篇精读：[精读《Scheduling in React》](https://github.com/dt-fe/weekly/blob/v2/099.%E7%B2%BE%E8%AF%BB%E3%80%8AScheduling%20in%20React%E3%80%8B.md)
+
+Ref 不仅可以拿到组件引用、创建一个 Mutable 副作用对象，还可以配合 `useEffect` 存储一个较老的值，最常用来拿到 `previousProps`，React 官方利用 Ref 封装了一个简单的 Hooks 拿到上一次的值：
+
+```tsx
+function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+```
+
+由于 `useEffect` 在 Render 完毕后才执行，因此 `ref` 的值在当前 Render 中永远是上一次 Render 时候的，我们可以利用它拿到上一次 Props：
+
+```tsx
+function App(props) {
+  const preProps = usePrevious(props);
+}
+```
+
+要实现这个功能，还是要归功于 `ref` 可以将值 “在各个不同的 Render 闭包中传递的特性”。最后，不要滥用 Ref，Mutable 引用越多，对 React 来说可维护性一般会越差。
+
+## 4 总结
+
+你还挖掘了 `useRef` 哪些有意思的使用方式？欢迎在评论区留言。
+
+> 讨论地址是：[精读《useRef 与 createRef 的区别》 · Issue #236 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/236)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,97 @@
+## 1 引言
+
+任何软件都是协同开发的，所以 CodeReview 非常重要，它可以帮助你减少代码质量问题，提高开发效率，提升稳定性，同时还能保证软件架构的稳定性，防止代码结构被恶意破坏导致难以维护。
+
+所以 CodeReview 机制是否健全是一个工程团队能否长期健康发展的决定因素之一，这次我们读一篇关于 CodeReview 如何做得更好的文章： [how-to-make-good-code-reviews-better](https://stackoverflow.blog/2019/09/30/how-to-make-good-code-reviews-better/)。
+
+## 2 概述 & 精读
+
+作者结合自己在 Uber、微软的工作经历介绍了自己对如何做好 CodeReview 的看法。
+
+### CodeReview 的覆盖范围
+
+**Good CodeReview** 会检查代码的正确性、测试覆盖率、功能变化、是否遵循代码规范与最佳实践、可以指出一些较为明显的改进点，比如难以阅读的写法、未使用到变量、一些边界问题、commit 数量过大需要拆分等等。
+
+**Better CodeReview** 会检查引入代码的必要性，与已有系统是否适配，是否具有可维护性，从抽象角度思考代码是否与已有系统逻辑能够自洽。
+
+> Better CodeReview 会关注在可维护性层面，并具有全局性，往往几个局部正确的代码组合在一起会产生错误的结果，或者是没必要的代码，或者是相互冲突的逻辑。Better CodeReview 更多用在底层架构场景，因为架构底层模块关联比较紧密，需要有整体视角，而业务上层模块间最好采用解耦模式，这样不仅不需要更耗费精力的 Better CodeReview，也是一种更正确的架构设计。
+
+### CodeReview 的语气
+
+**Good CodeReview** 会给出建设性意见，而不是发表强硬措辞要求对方改正，或认为自己的意见是唯一正确的答案，因为这样的评论其实具有一定攻击性，激发对方的防御心理，产生敌对心态，这样会从内部瓦解一个团队。最好能给出建议，或者多个选择，给对方留有余地。
+
+**Better CodeReview** 永远是考虑全面且正向积极的，会对写的好的地方进行鼓励，对写的不好的地方也体现出善解人意的关怀，考虑到对方可能花费了很多心血，以一种换位思考的鼓励心态进行评论。
+
+> 其实读到语气这一章节，逐渐发现 CodeReview 不仅是一个技术专业行为，还是一个人与人相处的社交行为，有的人平时与人打交道非常谦逊，但在 CodeReview 中就变得尖酸刻薄，显然是只关注到了 CodeReview 的专业性这一面，忽略了社交性这一点。而要做到 Better CodeReview 还要学会换位思考，体现出包容、正向积极的态度，因为你技术经验更丰富，能指出别人的问题很正常，但能保持谦逊，让别人容易接受并受到鼓励，可以让你成为一个有气度的技术专家。
+
+### 如何完成 CodeReview 的审阅
+
+**Good CodeReview** 不会轻易通过那些开放式 PR，至少在其被得到充分讨论前，但每个 Review 者对自己关注的部分完成 Review 后需要进行反馈，无论是 “看起来不错” 或者用缩写单词 “LGTM”，之后需要有明确的跟进，比如通过协作软件通知作者进行进一步反馈。
+
+**Better CodeReview** 实际执行中会更加灵活一些，对于一些比较紧急的改动会留下改进建议，但快速通过，让作者通过后续代码提交解决遗留的问题。
+
+> 实际工作场景会遇到一些开放式或紧急的提交，良好的 CodeReview 习惯自然是要严谨一些，讨论清楚再通过，并且要及时反馈。但某些比较紧急的提交就要区别对待了，更好的态度是在实践中灵活对待，但及时紧急通过了，也要保证问题在后续得以修复，比如在代码中留一些 "TODO" 或 "FIXME" 的标记，写上对应的负责人与预期解决时间。
+
+### 从 CodeReview 到直接交流
+
+**Good CodeReview** 会给出完整的评论和修改建议，如果后续提交的代码不符合预期，Review 者可以直接与代码提交者面对面交流，这样可以避免后续花费更多沟通时间。
+
+**Better CodeReview** 会在第一次给出完整的评论和修改建议，如果后续提交代码不符合预期，会立即与代码提交者当面沟通，避免异步沟通带来更多的理解偏差。
+
+> 补充一下，在 PR 内容过多时也可以选择直接与提交者当面沟通，这样可以更多理解作者的想法，使 Review 准确性更高。另外并不要每次都直接交流，异步的 CodeReview 本身就是一种提效方案，这会使你工作节奏把握在自己手中，仅在这种方案出现沟通问题时再选择当面交流。
+
+### 区分重点
+
+**Good CodeReview** 可以区分提示的重要程度，并在不太重要的改动前面加上 “nit:” 标记，这样可以使提交者的注意力集中在重要的问题上。
+
+**Better CodeReview** 会采取工具手段解决这些问题，比如一些代码 lint 工具，因为这些问题往往是可以被工具自动化解决的。
+
+> 代码自动化工具的目的，很大一部分也是为了保证代码一致性，从而降低 CodeReview 成本，也减少不重要的评论信息出现，让 CodeReview 尽可能反馈逻辑问题而不是格式问题。
+
+### 针对新人的 CodeReview
+
+**Good CodeReview** 对任何人都是用相同评判标准，可以遵循上面几点注意事项。
+
+**Better CodeReview** 会对新人区分对待，对新人给予对多的耐心、解释和评论，甚至给出解决方法，并更积极的给出鼓励。
+
+> 任何人到一家新公司都有适应过程，一视同仁是 base 要求，但如果能给予新人更多关怀就更好啦。
+
+### 跨办公区、时区的 CodeReview
+
+**Good CodeReview** 仅在工作时间有重叠的时间范围内进行 CodeReview，这样能保证对方可以积极响应，在必要时进行语音、视频沟通。
+
+**Better CodeReview** 会注意到更本质的问题，留意跨团队协作的必要性，如果某个模块经常被另一个时区同时修改，也许可以将这个模块交给对方维护，或者将 CodeReview 交给对方团队内部进行会更加高效。
+
+> 笔者所在公司也有跨时区协作情况，但绝大部分场景会避免跨时区的 CodeReview，因为 CodeReview 一般会在同一时区团队内部进行，这样效率更高，应对跨时区协作时，往往也是电话、视频会议优先。
+
+### 公司支持
+
+**Good CodeReview** 会得到公司组织支持，公司能意识到这么做虽然看起来占用开发时间，但长远来看提升了开发效率，因此能任何 CodeReview 价值。
+
+**Better CodeReview** 会得到公司进一步支持，公司甚至不断研发并完善 CodeReview 系统与流程，通过系统化方案保证上面几项 CodeReview 注意事项是否有在团队内落实，可以全员参与。
+
+> CodeReview 也是一种团队文化和公司文化，公司文化带来的是规章制度与系统工具，团队文化带来的是良好 CodeReview 氛围与更高 CodeReview 的效率。
+
+## 3 总结
+
+总结一下，良好的 CodeReview 需要做到以下几点：
+
+1. 更全面，从正确性到系统影响评估。
+2. 注意语气，从给出建设性一觉到换位思考。
+3. 及时完成审阅，从充分讨论到随机应变。
+4. 加强交流，从面对面交流到灵活选择最高效的沟通方式。
+5. 区分重点，从添加标记到利用工程化工具自动解决。
+6. 对新人要更友好。
+7. 尽量避免跨时区协作，必要时选择视频会议。
+
+最后，希望 CodeReview 能够得到公司的支持，如果你们公司还没有认可 CodeReview 的价值，可以将这篇文章分享给你的领导。
+
+> 讨论地址是：[精读《如何做好 CodeReview》 · Issue #237 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/237)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,302 @@
+## 1 引言
+
+很多人都用过 React Suspense，但如果你认为它只是配合 React.lazy 实现异步加载的蒙层，就理解的太浅了。实际上，React Suspense 改变了开发规则，要理解这一点，需要作出思想上的改变。
+
+我们结合 [Why React Suspense Will Be a Game Changer](https://medium.com/react-in-depth/why-react-suspense-will-be-a-game-changer-37b40fea71ec) 这篇文章，带你重新认识 React Suspense。
+
+## 2 概述
+
+异步加载是前端开发的重要环节，也是一直以来样板代码最严重的场景之一，原文通过三种取数方案的对比，逐渐找到一种最佳的异步取数方式。
+
+在讲解这三种取数方案之前，首先通过下面这张图说明了 Suspense 的功能：
+
+![](https://img.alicdn.com/tfs/TB12.npyoz1gK0jSZLeXXb9kVXa-1024-808.gif)
+
+从上图可以看出，子元素在异步取数时会阻塞父组件渲染，并一直冒泡到最外层第一个 Suspense，此时 Suspense 不会渲染子组件，而是渲染 `fallback`，当所有子组件异步阻塞取消后才会正常渲染。
+
+下面介绍文中给出的三种取数方式，首先是最原始的本地状态管理方案。
+
+### 本地异步状态管理，直白但不利于维护
+
+在 Suspense 方案出来之前，我们一般都在代码中利用本地状态管理异步数据。
+
+即便代码做了一定抽象，那也只是把逻辑从一个文件移到了另一个问题，可维护性与可拓展性都没有本质的改变，因此基本可以用下面的结构说明：
+
+```javascript
+class DynamicData extends Component {
+  state = {
+    loading: true,
+    error: null,
+    data: null
+  };
+
+  componentDidMount() {
+    fetchData(this.props.id)
+      .then(data => {
+        this.setState({
+          loading: false,
+          data
+        });
+      })
+      .catch(error => {
+        this.setState({
+          loading: false,
+          error: error.message
+        });
+      });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.id !== prevProps.id) {
+      this.setState({ loading: true }, () => {
+        fetchData(this.props.id)
+          .then(data => {
+            this.setState({
+              loading: false,
+              data
+            });
+          })
+          .catch(error => {
+            this.setState({
+              loading: false,
+              error: error.message
+            });
+          });
+      });
+    }
+  }
+
+  render() {
+    const { loading, error, data } = this.state;
+    return loading ? (
+      <p>Loading...</p>
+    ) : error ? (
+      <p>Error: {error}</p>
+    ) : (
+      <p>Data loaded ?</p>
+    );
+  }
+}
+```
+
+如上所述，首先申明本地状态管理至少三种数据：异步状态、异步结果与异步错误，其次在不同的生命周期中处理初始化发请求与重新发请求的问题，最后在渲染函数中根据不同的状态渲染不同的结果，所以实际上我们写了三个渲染组件。
+
+从下面几个角度对上述代码进行评价：
+
+- **冗余的三种状态 - 糟糕的开发体验**
+  - 很明显，存储了三套数据，渲染三种结果，不利于开发维护。
+- **冗余的样板代码 - 糟糕的开发体验**
+  - 为了管理异步状态，上述代码非常冗长，显然这个问题是存在的。
+- **数据与状态封闭性 - 糟糕的用户体验 + 开发体验**
+  - 所有数据与状态管理都存储在每一个这种组件中，将取数状态与组件绑定的结果就是，我们只能忍受组件独立运行的 Loading 逻辑，而无法对他们进行统一管理。
+- **重新取数 - 糟糕的开发体验**
+  - 需要在另一个生命周期中申明重新取数，很明显是个麻烦的行为。
+- **一闪而过的短暂 Loading - 糟糕的用户体验**
+  - 如果用户网速足够快，则 Loading 时间会非常短，此时一闪而过的 Loading 反而比没有 Loading 更烦人，我们应该在用户感知到卡的时候再出现 Loading 状态。
+
+### Context 管理状态，有进步但问题依然很多
+
+如果利用 Context 做状态共享，我们将取数的数据管理与逻辑代码写在父组件，子组件专心用于展示，效果会好一些，代码如下：
+
+```javascript
+const DataContext = React.createContext();
+
+class DataContextProvider extends Component {
+  // We want to be able to store multiple sources in the provider,
+  // so we store an object with unique keys for each data set +
+  // loading state
+  state = {
+    data: {},
+    fetch: this.fetch.bind(this)
+  };
+
+  fetch(key) {
+    if (this.state[key] && (this.state[key].data || this.state[key].loading)) {
+      // Data is either already loaded or loading, so no need to fetch!
+      return;
+    }
+
+    this.setState(
+      {
+        [key]: {
+          loading: true,
+          error: null,
+          data: null
+        }
+      },
+      () => {
+        fetchData(key)
+          .then(data => {
+            this.setState({
+              [key]: {
+                loading: false,
+                data
+              }
+            });
+          })
+          .catch(e => {
+            this.setState({
+              [key]: {
+                loading: false,
+                error: e.message
+              }
+            });
+          });
+      }
+    );
+  }
+
+  render() {
+    return <DataContext.Provider value={this.state} {...this.props} />;
+  }
+}
+
+class DynamicData extends Component {
+  static contextType = DataContext;
+
+  componentDidMount() {
+    this.context.fetch(this.props.id);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.id !== prevProps.id) {
+      this.context.fetch(this.props.id);
+    }
+  }
+
+  render() {
+    const { id } = this.props;
+    const { data } = this.context;
+
+    const idData = data[id];
+
+    return idData.loading ? (
+      <p>Loading...</p>
+    ) : idData.error ? (
+      <p>Error: {idData.error}</p>
+    ) : (
+      <p>Data loaded ?</p>
+    );
+  }
+}
+```
+
+`DataContextProvider` 组件承担了状态管理与异步逻辑工作，而 `DynamicData` 组件只需要从 Context 获取异步状态渲染即可，这样来看至少解决了一部分问题，我们还是从之前的角度进行评价：
+
+- **冗余的三种状态 - 糟糕的开发体验**
+  - 问题依然存在，只不过代码的位置转移了一部分到父组件。
+- **冗余的样板代码 - 糟糕的开发体验**
+  - 将展示与逻辑分离，成功降低了样板代码数量，至少当一个异步数据复用于多个组件时，不需要写多份样板代码了。
+- **数据与状态封闭性 - 糟糕的用户体验 + 开发体验**
+  - 这个问题得到一定程度解决，但是引入了新问题，即这个子组件仅在特定环境下可以正常运行。但在一个良好的设计下，组件运行不应该依赖于它所处的位置。
+- **重新取数 - 糟糕的开发体验**
+  - 问题依然存在。
+- **一闪而过的短暂 Loading - 糟糕的用户体验**
+  - 问题依然存在。
+
+### Suspense 管理状态，最棒的方案
+
+利用 Suspense 进行异步处理，代码处理大概是这样的：
+
+```javascript
+import createResource from "./magical-cache-provider";
+const dataResource = createResource(id => fetchData(id));
+
+class DynamicData extends Component {
+  render() {
+    const data = dataResource.read(this.props.id);
+    return <p>Data loaded ?</p>;
+  }
+}
+
+class App extends Component {
+  render() {
+    return (
+      <Suspense fallback={<p>Loading...</p>}>
+        <DeepNesting>
+          <DynamicData />
+        </DeepNesting>
+      </Suspense>
+    );
+  }
+}
+```
+
+在原文写作的时候，Suspense 仅能对 React.lazy 生效，但现在已经可以对任何异步状态生效了，只要符合 Pending 中 throw promise 的规则。
+
+我们再审视一下上面的代码，可以发现代码量减少了很多，其中和转换成 Function Component 的写法也有关系。
+
+最后还是从如下几个角度进行评价：
+
+- **冗余的三种状态 - 糟糕的开发体验** - ⭐️
+  - 可以看到，组件只要处理成功得到数据的状态即可，三种状态合并成了一种状态。
+- **冗余的样板代码 - 糟糕的开发体验** - ⭐️
+  - 展示与逻辑完全分离，展示只要拿到数据展示 UI 即可。
+- **数据与状态封闭性 - 糟糕的用户体验 + 开发体验** - ⭐️
+  - 这个问题得到了完美的解决，具体看下面详细介绍。
+- **重新取数 - 糟糕的开发体验** - ⭐️
+  - 不需要关心何时需要重新取数，当数据变化时会自动执行。
+- **一闪而过的短暂 Loading - 糟糕的用户体验**
+  - 问题依然存在。
+
+为了进一步说明 Suspense 的魔力，笔者特意把这段代码单独拿出来说明：
+
+```javascript
+class App extends Component {
+  render() {
+    return (
+      <Suspense fallback={<p>Loading...</p>}>
+        <DeepNesting>
+          <MaybeSomeAsycComponent />
+          <Suspense fallback={<p>Loading content...</p>}>
+            <ThereMightBeSeveralAsyncComponentsHere />
+          </Suspense>
+          <Suspense fallback={<p>Loading footer...</p>}>
+            <DeeplyNestedFooterTree />
+          </Suspense>
+        </DeepNesting>
+      </Suspense>
+    );
+  }
+}
+```
+
+上面代码表明了逻辑与展示的完美分离。
+
+从代码结构上来看，我们可以在任何需要异步取数的组件父级添加 Suspense 达到 Loading 的效果，也就是说，如果只在最外层加一个 Suspense，那么整个应用所有 Loading 都结束后才会渲染，然而我们也能随心所欲的在任何层级继续添加 Suspense，那么对应作用域内的 Loading 就会首先执行完毕，并由当前的 Suspense 控制。
+
+**这意味着我们可以自由决定 Loading 状态的范围组合。** 试想当 Loading 状态交由组件控制的方案一与方案二，是不可能做到合并 Loading 时机的，而 Suspense 方案做到了将 Loading 状态与 UI 分离，我们可以通过添加 Suspense 自由控制 Loading 的粒度。
+
+## 3 精读
+
+Suspense 对所有子组件异步都可以作用，因此无论是 React.lazy 还是异步取数，都可以通过 Suspense 进行 Pending。
+
+异步时机被 Suspense pending 需要遵循一定规则，这个规则在之前的 [精读《Hooks 取数 - swr 源码》](https://github.com/dt-fe/weekly/blob/v2/128.%E7%B2%BE%E8%AF%BB%E3%80%8AHooks%20%E5%8F%96%E6%95%B0%20-%20swr%20%E6%BA%90%E7%A0%81%E3%80%8B.md) 有介绍过，即 Suspense 要求代码 suspended，即抛出一个可以被捕获的 Promise 异常，在这个 Promise 结束后再渲染组件，因此取数函数需要在 Pending 状态时抛出一个 Promise，使其可以被 Suspense 捕获到。
+
+另外，关于文中提到的 fallback 最小出现时间的保护间隔，目前还是一个 [Open Issue](https://github.com/facebook/react/issues/17351)，也许有一天 React 官方会提供支持。
+
+不过即便官方不支持，我们也有方式实现，即让这个逻辑由 fallback 组件实现：
+
+```jsx
+<Suspense fallback={MyFallback} />;
+
+const MyFallback = () => {
+  // 计时器，200 ms 以内 return null，200 ms 后 return <Spin />
+};
+```
+
+## 4 总结
+
+之所以说 Suspense 开发方式改变了开发规则，是因为它做到了将异步的状态管理与 UI 组件分离，所有 UI 组件都无需关心 Pending 状态，而是当作同步去执行，这本身就是一个巨大的改变。
+
+另外由于状态的分离，我们可以利用纯 UI 组件拼装任意粒度的 Pending 行为，以整个 App 作为一个大的 Suspense 作为兜底，这样 UI 彻底与异步解耦，哪里 Loading，什么范围内 Loading，完全由 Suspense 组合方式决定，这样的代码显然具备了更强的可拓展性。
+
+> 讨论地址是：[精读《Suspense 改变开发方式》 · Issue #238 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/238)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,132 @@
+## 1 引言
+
+先说结论：Webpack5 模块联邦让 Webpack 达到了线上 Runtime 的效果，让代码直接在项目间利用 CDN 直接共享，不再需要本地安装 Npm 包、构建再发布了！
+
+我们知道 Webpack 可以通过 DLL 或者 Externals 做代码共享时 Common Chunk，但不同应用和项目间这个任务就变得困难了，我们几乎无法在项目之间做到按需热插拔。
+
+模块联邦是 Webpack5 新内置的一个重要功能，可以让跨应用间真正做到模块共享，所以这周让我们通过 [webpack-5-module-federation-a-game-changer-in-javascript-architecture](https://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture/#its-important-to-note-these-are-special-entry-points-they-are-only-a-few-kb-in-size-containing-a-special-webpack-runtime-that-can-interface-with-the-host-it-is-not-a-standard-entry-point--7/) 这篇文章了解什么是 “模块联邦” 功能。
+
+## 2 概述 & 精读
+
+### NPM 方式共享模块
+
+想象一下正常的共享模块方式，对，就是 NPM。
+
+如下图所示，正常的代码共享需要将依赖作为 Lib 安装到项目，进行 Webpack 打包构建再上线，如下图：
+
+<img width=500 src="https://img.alicdn.com/tfs/TB1MoLPy.z1gK0jSZLeXXb9kVXa-2494-1478.png">
+
+对于项目 Home 与 Search，需要共享一个模块时，最常见的办法就是将其抽成通用依赖并分别安装在各自项目中。
+
+虽然 Monorepo 可以一定程度解决重复安装和修改困难的问题，但依然需要走本地编译。
+
+### UMD 方式共享模块
+
+真正 Runtime 的方式可能是 UMD 方式共享代码模块，即将模块用 Webpack UMD 模式打包，并输出到其他项目中。这是非常普遍的模块共享方式：
+
+<img width=500 src="https://img.alicdn.com/tfs/TB1rQnSy4n1gK0jSZKPXXXvUXXa-2404-1484.png">
+
+对于项目 Home 与 Search，直接利用 UMD 包复用一个模块。但这种技术方案问题也很明显，就是包体积无法达到本地编译时的优化效果，且库之间容易冲突。
+
+### 微前端方式共享模块
+
+微前端：micro-frontends (MFE) 也是最近比较火的模块共享管理方式，微前端就是要解决多项目并存问题，多项目并存的最大问题就是模块共享，不能有冲突。
+
+<img width=500 src="https://img.alicdn.com/tfs/TB1vqvTy1T2gK0jSZFvXXXnFXXa-2410-1520.png">
+
+由于微前端还要考虑样式冲突、生命周期管理，所以本文只聚焦在资源加载方式上。微前端一般有两种打包方式：
+
+1. 子应用独立打包，模块更解耦，但无法抽取公共依赖等。
+2. 整体应用一起打包，很好解决上面的问题，但打包速度实在是太慢了，不具备水平扩展能力。
+
+### 模块联邦方式
+
+终于提到本文的主角了，作为 Webpack5 内置核心特性之一的 Federated Module：
+
+<img width=500 src="https://img.alicdn.com/tfs/TB1qLz1yYj1gK0jSZFuXXcrHpXa-2414-1474.png">
+
+从图中可以看到，这个方案是直接将一个应用的包应用于另一个应用，同时具备整体应用一起打包的公共依赖抽取能力。
+
+让应用具备模块化输出能力，其实开辟了一种新的应用形态，即 “中心应用”，这个中心应用用于在线动态分发 Runtime 子模块，并不直接提供给用户使用：
+
+<img width=300 src="https://img.alicdn.com/tfs/TB1ymbWy7Y2gK0jSZFgXXc5OFXa-1346-1442.png">
+
+对微前端而言，这张图就是一个完美的主应用，因为所有子应用都可以利用 Runtime 方式复用主应用的 Npm 包和模块，更好的集成到主应用中。
+
+模块联邦的使用方式如下：
+
+```js
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+
+module.exports = {
+  // other webpack configs...
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "app_one_remote",
+      remotes: {
+        app_two: "app_two_remote",
+        app_three: "app_three_remote"
+      },
+      exposes: {
+        AppContainer: "./src/App"
+      },
+      shared: ["react", "react-dom", "react-router-dom"]
+    }),
+    new HtmlWebpackPlugin({
+      template: "./public/index.html",
+      chunks: ["main"]
+    })
+  ]
+};
+```
+
+模块联邦本身是一个普通的 Webpack 插件 `ModuleFederationPlugin`，插件有几个重要参数：
+
+1. `name` 当前应用名称，需要全局唯一。
+2. `remotes` 可以将其他项目的 `name` 映射到当前项目中。
+3. `exposes` 表示导出的模块，只有在此申明的模块才可以作为远程依赖被使用。
+4. `shared` 是非常重要的参数，制定了这个参数，可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM。
+
+比如设置了 `remotes: { app_two: "app_two_remote" }`，在代码中就可以直接利用以下方式直接从对方应用调用模块：
+
+```js
+import { Search } from "app_two/Search";
+```
+
+这个 `app_two/Search` 来自于 `app_two` 的配置：
+
+```js
+// app_two 的 webpack 配置
+export default {
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "app_two",
+      library: { type: "var", name: "app_two" },
+      filename: "remoteEntry.js",
+      exposes: {
+        Search: "./src/Search"
+      },
+      shared: ["react", "react-dom"]
+    })
+  ]
+};
+```
+
+正是因为 `Search` 在 `exposes` 被导出，我们因此可以使用 `[name]/[exposes_name]` 这个模块，这个模块对于被引用应用来说是一个本地模块。
+
+## 3 总结
+
+模块联邦为更大型的前端应用提供了开箱解决方案，并已经作为 Webpack5 官方模块内置，可以说是继 Externals 后最终的运行时代码复用解决方案。
+
+另外 Webpack5 还内置了大量编译时缓存功能，可以看到，无论是性能还是多项目组织，Webpack5 都在尝试给出自己的最佳思路，期待 Webpack5 正式发布，前端工程化会迈向一个新的阶段。
+
+> 讨论地址是：[精读《Webpack5 新特性 - 模块联邦》 · Issue #239 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/239)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,384 @@
+## 1 引言
+
+[React Router v6](https://github.com/ReactTraining/react-router) alpha 版本发布了，本周通过 [A Sneak Peek at React Router v6](https://alligator.io/react/react-router-v6/) 这篇文章分析一下带来的改变。
+
+## 2 概述
+
+### <Switch> 更名为 <Routes>
+
+一个不痛不痒的改动，使 API 命名更加规范。
+
+```jsx
+// v5
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route exact path="/">
+          <Home />
+        </Route>
+        <Route path="/profile">
+          <Profile />
+        </Route>
+      </Switch>
+    </BrowserRouter>
+  );
+}
+```
+
+在 React Router v6 版本里，直接使用 `Routes` 替代 `Switch`：
+
+```jsx
+// v6
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="profile/*" element={<Profile />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+### <Route> 升级
+
+在 v5 版本里，想要给组件传参数是不太直观的，需要利用 RenderProps 的方式透传 `routeProps`：
+
+```jsx
+import Profile from './Profile';
+
+// v5
+<Route path=":userId" component={Profile} />
+<Route
+  path=":userId"
+  render={routeProps => (
+    <Profile {...routeProps} animate={true} />
+  )}
+/>
+
+// v6
+<Route path=":userId" element={<Profile />} />
+<Route path=":userId" element={<Profile animate={true} />} />
+```
+
+而在 v6 版本中，`render` 与 `component` 方案合并成了 `element` 方案，可以轻松传递 props 且不需要透传 `roteProps` 参数。
+
+### 更方便的嵌套路由
+
+在 v5 版本中，嵌套路由需要通过 `useRouteMatch` 拿到 `match`，并通过 `match.path` 的拼接实现子路由：
+
+```jsx
+// v5
+import {
+  BrowserRouter,
+  Switch,
+  Route,
+  Link,
+  useRouteMatch
+} from "react-router-dom";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Switch>
+        <Route exact path="/" component={Home} />
+        <Route path="/profile" component={Profile} />
+      </Switch>
+    </BrowserRouter>
+  );
+}
+
+function Profile() {
+  let match = useRouteMatch();
+
+  return (
+    <div>
+      <nav>
+        <Link to={`${match.url}/me`}>My Profile</Link>
+      </nav>
+
+      <Switch>
+        <Route path={`${match.path}/me`}>
+          <MyProfile />
+        </Route>
+        <Route path={`${match.path}/:id`}>
+          <OthersProfile />
+        </Route>
+      </Switch>
+    </div>
+  );
+}
+```
+
+在 v6 版本中省去了 `useRouteMatch` 这一步，支持直接用 `path` 表示相对路径：
+
+```jsx
+// v6
+import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";
+
+// Approach #1
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="profile/*" element={<Profile />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+function Profile() {
+  return (
+    <div>
+      <nav>
+        <Link to="me">My Profile</Link>
+      </nav>
+
+      <Routes>
+        <Route path="me" element={<MyProfile />} />
+        <Route path=":id" element={<OthersProfile />} />
+      </Routes>
+    </div>
+  );
+}
+
+// Approach #2
+// You can also define all
+// <Route> in a single place
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="profile" element={<Profile />}>
+          <Route path=":id" element={<MyProfile />} />
+          <Route path="me" element={<OthersProfile />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+function Profile() {
+  return (
+    <div>
+      <nav>
+        <Link to="me">My Profile</Link>
+      </nav>
+
+      <Outlet />
+    </div>
+  );
+}
+```
+
+注意 `Outlet` 是渲染子路由的 Element。
+
+### useNavigate 替代 useHistory
+
+在 v5 版本中，主动跳转路由可以通过 `useHistory` 进行 `history.push` 等操作：
+
+```jsx
+// v5
+import { useHistory } from "react-router-dom";
+
+function MyButton() {
+  let history = useHistory();
+  function handleClick() {
+    history.push("/home");
+  }
+  return <button onClick={handleClick}>Submit</button>;
+}
+```
+
+而在 v6 版本中，可以通过 `useNavigate` 直接实现这个常用操作：
+
+```jsx
+// v6
+import { useNavigate } from "react-router-dom";
+
+function MyButton() {
+  let navigate = useNavigate();
+  function handleClick() {
+    navigate("/home");
+  }
+  return <button onClick={handleClick}>Submit</button>;
+}
+```
+
+react-router 内部对 history 进行了封装，如果需要 `history.replace`，可以通过 `{ replace: true }` 参数指定：
+
+```jsx
+// v5
+history.push("/home");
+history.replace("/home");
+
+// v6
+navigate("/home");
+navigate("/home", { replace: true });
+```
+
+### 更小的体积 8kb
+
+由于代码几乎重构，v6 版本的代码压缩后体积从 20kb 缩小到 8kb。
+
+## 3 精读
+
+react-router v6 源码中有一段比较核心的理念，笔者拿出来与大家分享，对一些框架开发是大有裨益的。我们看 `useRoutes` 这段代码节选：
+
+```jsx
+export function useRoutes(routes, basename = "", caseSensitive = false) {
+  let {
+    params: parentParams,
+    pathname: parentPathname,
+    route: parentRoute
+  } = React.useContext(RouteContext);
+
+  if (warnAboutMissingTrailingSplatAt) {
+    // ...
+  }
+
+  basename = basename ? joinPaths([parentPathname, basename]) : parentPathname;
+
+  let navigate = useNavigate();
+  let location = useLocation();
+  let matches = React.useMemo(
+    () => matchRoutes(routes, location, basename, caseSensitive),
+    [routes, location, basename, caseSensitive]
+  );
+
+  // ...
+
+  // Otherwise render an element.
+  let element = matches.reduceRight((outlet, { params, pathname, route }) => {
+    return (
+      <RouteContext.Provider
+        children={route.element}
+        value={{
+          outlet,
+          params: readOnly({ ...parentParams, ...params }),
+          pathname: joinPaths([basename, pathname]),
+          route
+        }}
+      />
+    );
+  }, null);
+
+  return element;
+}
+```
+
+可以看到，利用 `React.Context`，v6 版本在每个路由元素渲染时都包裹了一层 `RouteContext`。
+
+拿更方便的路由嵌套来说：
+
+> 在 v6 版本中省去了 `useRouteMatch` 这一步，支持直接用 `path` 表示相对路径。
+
+这就是利用这个方案做到的，因为给每一层路由文件包裹了 Context，所以在每一层都可以拿到上一层的 `path`，因此在拼接路由时可以完全由框架内部实现，而不需要用户在调用时预先拼接好。
+
+再以 `useNavigate` 举例，有人觉得 `navigate` 这个封装仅停留在形式层，但其实在功能上也有封装，比如如果传入但是一个相对路径，会根据当前路由进行切换，下面是 `useNavigate` 代码节选：
+
+```jsx
+export function useNavigate() {
+  let { history, pending } = React.useContext(LocationContext);
+  let { pathname } = React.useContext(RouteContext);
+
+  let navigate = React.useCallback(
+    (to, { replace, state } = {}) => {
+      if (typeof to === "number") {
+        history.go(to);
+      } else {
+        let relativeTo = resolveLocation(to, pathname);
+
+        let method = !!replace || pending ? "replace" : "push";
+        history[method](relativeTo, state);
+      }
+    },
+    [history, pending, pathname]
+  );
+
+  return navigate;
+}
+```
+
+可以看到，利用 `RouteContext` 拿到当前的 `pathname`，并根据 `resolveLocation` 对 `to` 与 `pathname` 进行路径拼接，而 `pathname` 就是通过 `RouteContext.Provider` 提供的。
+
+### 巧用多层 Context Provider
+
+很多时候我们利用 Context 停留在一个 `Provider`，多个 `useContext` 的层面上，这是 Context 最基础的用法，但相信读完 React Router v6 这篇文章，我们可以挖掘出 Context 更多的用法：多层 Context Provider。
+
+**虽然说 Context Provider 存在多层会采取最近覆盖的原则，但这不仅仅是一条规避错误的功能，我们可以利用这个功能实现 React Router v6 这样的改良。**
+
+为了更仔细说明这个特性，这里再举一个具体的例子：比如实现搭建渲染引擎时，每个组件都有一个 id，但这个 id 并不透出在组件的 props 上：
+
+```jsx
+const Input = () => {
+  // Input 组件在画布中会自动生成一个 id，但这个 id 组件无法通过 props 拿到
+};
+```
+
+此时如果我们允许 Input 组件内部再创建一个子元素，又希望这个子元素的 id 是由 Input 推导出来的，我们可能需要用户这么做：
+
+```jsx
+const Input = ({ id }) => {
+  return <ComponentLoader id={id + "1"} />;
+};
+```
+
+这样做有两个问题：
+
+1. 将 id 暴露给 Input 组件，违背了之前设计的简洁性。
+2. 组件需要对 id 进行拼装，很麻烦。
+
+这里遇到的问题和 React Router 遇到的一样，我们可以将代码简化成下面这样，但功能不变吗？
+
+```jsx
+const Input = () => {
+  return <ComponentLoader id="1" />;
+};
+```
+
+答案是可以做到，我们可以利用 Context 实现这种方案。关键点就在于，渲染 Input 但组件容器需要包裹一个 Provider：
+
+```jsx
+const ComponentLoader = ({ id, element }) => {
+  <Context.Provider value={{ id }}>{element}</Context.Provider>;
+};
+```
+
+那么对于内部的组件来说，在不同层级下调用 `useContext` 拿到的 id 是不同的，这正是我们想要的效果：
+
+```jsx
+const ComponentLoader = ({id,element}) => {
+  const { id: parentId } = useContext(Context)
+
+  <Context.Provider value={{ id: parentId + id }}>
+    {element}
+  </Context.Provider>
+}
+```
+
+这样我们在 `Input` 内部调用的 `<ComponentLoader id="1" />` 实际上拼接的实际 id 是 `01`，而这完全抛到了外部引擎层处理，用户无需手动拼接。
+
+## 4 总结
+
+React Router v6 完全利用 Hooks 重构后，不仅代码量精简了很多，还变得更好用了，等发正式版的时候可以快速升级一波。
+
+另外从 React Router v6 做的这些优化中，我们从源码中挖掘到了关于 Context 更巧妙的用法，希望这个方法可以帮助你运用到其他更复杂的项目设计中。
+
+> 讨论地址是：[精读《React Router v6》 · Issue #241 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/241)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,354 @@
+## 1 引言
+
+React Hooks 渐渐被国内前端团队所接受，但基于 Hooks 的数据流方案却还未固定，我们有 “100 种” 类似的选择，却各有利弊，让人难以取舍。
+
+本周笔者就深入谈一谈对 Hooks 数据流的理解，相信读完文章后，可以从百花齐放的 Hooks 数据流方案中看到本质。
+
+## 2 精读
+
+基于 React Hooks 谈数据流，我们先从最不容易产生分歧的基础方案说起。
+
+### 单组件数据流
+
+单组件最简单的数据流一定是 `useState`：
+
+```jsx
+function App() {
+  const [count, setCount] = useState();
+}
+```
+
+`useState` 在组件内用是毫无争议的，那么下个话题就一定是跨组件共享数据流了。
+
+### 组件间共享数据流
+
+跨组件最简单的方案就是 `useContext`：
+
+```jsx
+const CountContext = createContext();
+
+function App() {
+  const [count, setCount] = useState();
+  return (
+    <CountContext.Provider value={{ count, setCount }}>
+      <Child />
+    </CountContext.Provider>
+  );
+}
+
+function Child() {
+  const { count } = useContext(CountContext);
+}
+```
+
+用法都是官方 API，显然也是毫无争议的，但问题是数据与 UI 不解耦，这个问题 [unstated-next](https://github.com/jamiebuilds/unstated-next) 已经为你想好解决方案了。
+
+### 数据流与组件解耦
+
+[unstated-next](https://github.com/jamiebuilds/unstated-next) 可以帮你把上面例子中，定义在 `App` 中的数据单独出来，形成一个自定义数据管理 Hook：
+
+```jsx
+import { createContainer } from "unstated-next";
+
+function useCounter() {
+  const [count, setCount] = useState();
+  return { count, setCount };
+}
+
+const Counter = createContainer(useCounter);
+
+function App() {
+  return (
+    <Counter.Provider>
+      <Child />
+    </Counter.Provider>
+  );
+}
+
+function Child() {
+  const { count } = Counter.useContainer();
+}
+```
+
+数据与 `App` 就解耦了，这下 `Counter` 再也不和 `App` 绑定了，`Counter` 可以和其他组件绑定作用了。
+
+这个时候性能问题就慢慢浮出了水面，首当其冲的就是 `useState` 无法合并更新的问题，我们自然想到利用 `useReducer` 解决。
+
+### 合并更新
+
+`useReducer` 可以让数据合并更新，这也是 React 官方 API，毫无争议：
+
+```jsx
+import { createContainer } from "unstated-next";
+
+function useCounter() {
+  const [state, dispath] = useReducer(
+    (state, action) => {
+      switch (action.type) {
+        case "setCount":
+          return {
+            ...state,
+            count: action.setCount(state.count),
+          };
+        case "setFoo":
+          return {
+            ...state,
+            foo: action.setFoo(state.foo),
+          };
+        default:
+          return state;
+      }
+      return state;
+    },
+    { count: 0, foo: 0 }
+  );
+
+  return { ...state, dispatch };
+}
+
+const Counter = createContainer(useCounter);
+
+function App() {
+  return (
+    <Counter.Provider>
+      <Child />
+    </Counter.Provider>
+  );
+}
+
+function Child() {
+  const { count } = Counter.useContainer();
+}
+```
+
+这下即便要同时更新 `count` 和 `foo`，我们也能通过抽象成一个 `reducer` 的方式合并更新。
+
+然而还有性能问题：
+
+```jsx
+function ChildCount() {
+  const { count } = Counter.useContainer();
+}
+
+function ChildFoo() {
+  const { foo } = Counter.useContainer();
+}
+```
+
+更新 `foo` 时，`ChildCount` 和 `ChildFoo` 同时会执行，但 `ChildCount` 没用到 `foo` 呀？这个原因是 `Counter.useContainer` 提供的数据流是一个引用整体，其子节点 `foo` 引用变化后会导致整个 Hook 重新执行，继而所有引用它的组件也会重新渲染。
+
+此时我们发现可以利用 Redux `useSelector` 实现按需更新。
+
+### 按需更新
+
+首先我们利用 Redux 对数据流做一次改造：
+
+```jsx
+import { createStore } from "redux";
+import { Provider, useSelector } from "react-redux";
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "setCount":
+      return {
+        ...state,
+        count: action.setCount(state.count),
+      };
+    case "setFoo":
+      return {
+        ...state,
+        foo: action.setFoo(state.foo),
+      };
+    default:
+      return state;
+  }
+  return state;
+}
+
+function App() {
+  return (
+    <Provider store={store}>
+      <Child />
+    </Provider>
+  );
+}
+
+function Child() {
+  const { count } = useSelector(
+    (state) => ({ count: state.count }),
+    shallowEqual
+  );
+}
+```
+
+`useSelector` 可以让 `Child` 在 `count` 变化时才更新，而 `foo` 变化时不更新，这已经接近较为理想的性能目标了。
+
+但 `useSelector` 的作用仅仅是计算结果不变化时阻止组件刷新，但并不能保证返回结果的引用不变化。
+
+### 防止数据引用频繁变化
+
+对于上面的场景，拿到 `count` 的引用是不变的，**但对于其他场景就不一定了**。
+
+举个例子：
+
+```jsx
+function Child() {
+  const user = useSelector((state) => ({ user: state.user }), shallowEqual);
+
+  return <UserPage user={user} />;
+}
+```
+
+**假设 `user` 对象在每次数据流更新引用都会发生变化**，那么 `shallowEqual` 自然是不起作用，那我们换成 `deepEqual`深对比呢？结果是引用依然会变，只是重渲染不那么频繁了：
+
+```jsx
+function Child() {
+  const user = useSelector(
+    (state) => ({ user: state.user }),
+    // 当 user 值变化时才重渲染
+    deepEqual
+  );
+
+  // 但此处拿到的 user 引用还是会变化
+
+  return <UserPage user={user} />;
+}
+```
+
+是不是觉得在 `deepEqual` 的作用下，没有触发重渲染，`user` 的引用就不会变呢？答案是会变，因为 `user` 对象在每次数据流更新都会变，`useSelector` 在 `deepEqual` 作用下没有触发重渲染，但因为全局 reducer 隐去组件自己的重渲染依然会重新执行此函数，此时拿到的 `user` 引用会不断变化。
+
+因此 `useSelector` `deepEqual` 一定要和 `useDeepMemo` 结合使用，才能保证 `user` 引用不会频繁改变：
+
+```jsx
+function Child() {
+  const user = useSelector(
+    (state) => ({ user: state.user }),
+    // 当 user 值变化时才重渲染
+    deepEqual
+  );
+
+  const userDeep = useDeepMemo(() => user, [user]);
+
+  return <UserPage user={userDeep} />;
+}
+```
+
+当然这是比较极端的情况，只要看到 `deepEqual` 与 `useSelector` 同时作用了，就要问问自己其返回的值的引用会不会发生意外变化。
+
+### 缓存查询函数
+
+对于极限场景，即便控制了重渲染次数与返回结果的引用最大程度不变，还是可能存在性能问题，这最后一块性能问题就处在查询函数上。
+
+上面的例子中，查询函数比较简单，但如果查询函数非常复杂就不一样了：
+
+```jsx
+function Child() {
+  const user = useSelector(
+    (state) => ({ user: verySlowFunction(state.user) }),
+    // 当 user 值变化时才重渲染
+    deepEqual
+  );
+
+  const userDeep = useDeepMemo(() => user, [user]);
+
+  return <UserPage user={userDeep} />;
+}
+```
+
+我们假设 `verySlowFunction` 要遍历画布中 1000 个组件的 n 3 次方次，那组件的重渲染时间消耗与查询时间相比完全不值一提，我们需要考虑缓存查询函数。
+
+一种方式是利用 [reselect](https://github.com/reduxjs/reselect) 根据参数引用进行缓存。
+
+想象一下，如果 `state.user` 的引用不频繁变化，但 `verySlowFunction` 非常慢，理想情况是 `state.user` 引用变化后才重新执行 `verySlowFunction`，但上面的例子中，`useSelector` 并不知道还能这么优化，只能傻傻的每次渲染重复执行 `verySlowFunction`，哪怕 `state.user` 没有变。
+
+此时我们要告诉引用，`state.user` 是否变化才是重新执行的关键：
+
+```jsx
+import { createSelector } from "reselect";
+
+const userSelector = createSelector(
+  (state) => state.user,
+  (user) => verySlowFunction(user)
+);
+
+function Child() {
+  const user = useSelector(
+    (state) => userSelector(state),
+    // 当 user 值变化时才重渲染
+    deepEqual
+  );
+
+  const userDeep = useDeepMemo(() => user, [user]);
+
+  return <UserPage user={userDeep} />;
+}
+```
+
+在上面的例子中，通过 `createSelector` 创建的 `userSelector` 会一层层进行缓存，当第一个参数返回的 `state.user` 引用不变时，会直接返回上一次执行结果，直到其应用变化了才会继续往下执行。
+
+> 这也说明了函数式保持幂等的重要性，如果 `verySlowFunction` 不是严格幂等的，这种缓存也无法实施。
+
+看上去很美好，然而实战中你可能发现没有那么美好，因为上面的例子都建立在 **Selector 完全不依赖外部变量**。
+
+### 结合外部变量的缓存查询
+
+如果我们要查询的用户来自于不同地区，需要传递 `areaId` 加以识别，那么可以拆分为两个 Selector 函数：
+
+```jsx
+import { createSelector } from "reselect";
+
+const areaSelector = (state, props) => state.areas[props.areaId].user;
+
+const userSelector = createSelector(areaSelector, (user) =>
+  verySlowFunction(user)
+);
+
+function Child() {
+  const user = useSelector(
+    (state) => userSelector(state, { areaId: 1 }),
+    deepEqual
+  );
+
+  const userDeep = useDeepMemo(() => user, [user]);
+
+  return <UserPage user={userDeep} />;
+}
+```
+
+所以为了不在组件函数内调用 `createSelector`，我们需要尽可能将用到外部变量的地方抽象成一个通用 Selector，并作为 `createSelector` 的一个先手环节。
+
+但 `userSelector` 提供给多个组件使用时缓存会失效，原因是我们只创建了一个 Selector 实例，因此这个函数还需要再包装一层高阶形态：
+
+```jsx
+import { createSelector } from "reselect";
+
+const userSelector = () =>
+  createSelector(areaSelector, (user) => verySlowFunction(user));
+
+function Child() {
+  const customSelector = useMemo(userSelector, []);
+
+  const user = useSelector(
+    (state) => customSelector(state, { areaId: 1 }),
+    deepEqual
+  );
+}
+```
+
+所以对于外部变量结合的环节，还需要 `useMemo` 与 `useSelector` 结合使用，`useMemo` 处理外部变量依赖的引用缓存，`useSelector` 处理 Store 相关引用缓存。
+
+## 3 总结
+
+基于 Hooks 的数据流方案不能算完美，我在写作这篇文章时就感觉到这种方案属于 “浅入深出”，简单场景还容易理解，随着场景逐步复杂，方案也变得越来越复杂。
+
+但这种 Immutable 的数据流管理思路给了开发者非常自由的缓存控制能力，只要透彻理解上述概念，就可以开发出非常 “符合预期” 的数据缓存管理模型，只要精心维护，一切就变得非常有秩序。
+
+> 讨论地址是：[精读《React Hooks 数据流》 · Issue #242 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/242)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,141 @@
+## 1 引言
+
+从 [@types/react](https://unpkg.com/browse/@types/react@16.9.34/index.d.ts) 源码中挖掘一些 Typescript 使用技巧吧。
+
+## 2 精读
+
+### 泛型 extends
+
+泛型可以指代可能的参数类型，但指代任意类型范围太模糊，当我们需要对参数类型加以限制，或者确定只处理某种类型参数时，就可以对泛型进行 extends 修饰。
+
+问题：`React.lazy` 需要限制返回值是一个 `Promise<T>` 类型，且 `T` 必须是 React 组件类型。
+
+方案：
+
+```typescript
+function lazy<T extends ComponentType<any>>(
+  factory: () => Promise<{ default: T }>
+): LazyExoticComponent<T>;
+```
+
+`T extends ComponentType` 确保了 T 这个类型一定符合 `ComponentType` 这个 React 组件类型定义，我们再将 T 用到 `Promise<{ default: T }>` 位置即可。
+
+## 泛型 extends + infer
+
+如果有一种场景，需要拿到一个类型，这个类型是当某个参数符合某种结构时，这个结构内的一种子类型，就需要结合 泛型 extends + infer 了。
+
+问题：`React.useReducer` 第一个参数是 Reducer，第二个参数是初始化参数，其实第二个参数的类型是第一个参数中回调函数第一个参数的类型，那我们怎么将这两个参数的关系联系到一起呢？
+
+方案：
+
+```typescript
+function useReducer<R extends Reducer<any, any>, I>(
+  reducer: R,
+  initializerArg: I & ReducerState<R>,
+  initializer: (arg: I & ReducerState<R>) => ReducerState<R>
+): [ReducerState<R>, Dispatch<ReducerAction<R>>];
+
+type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any>
+  ? S
+  : never;
+```
+
+`R extends Reducer<any, any>` 的意思在上面已经提过了，也就是 R 必须符合 `Reducer` 结构，也就是 `reducer` 必须符合这个结构，之后重点来了：`initializerArg` 利用 `ReducerState` 这个类型直接从 `reducer` 的类型 `R` 中将第一个回调参数挖了出来并返回。
+
+`ReducerState` 定义中 `R extends Reducer<infer S, any> ? S : never` 的含义是：如果 R 符合 `Reducer<infer S, any>` 类型，则返回类型 `S`，这个 `S` 是 `Reducer<infer S>` 也就是 State 位置的类型，否则返回 `never` 类型。
+
+所以 infer 表示待推断类型，是非常强大的功能，可以指定在任意位置代指其类型，并配合 extends 判断是否符合结构，可以使类型推断具备一定编程能力。
+
+要用 extends 的另一个原因是，只有 extends 才能将结构描述出来，我们才能精确定义 infer 指代类型的位置。
+
+### 类型重载
+
+当一个类型拥有多种使用可能性时，可以采用类型重载定义复数类型，Typescript 作用时会逐个匹配并找到第一个满足条件的。
+
+问题：`createElement` 第一个参数支持 FunctionComponent 与 ClassComponent，而且传入参数不同，返回值的类型也不同。
+
+方案：
+
+```typescript
+function createElement<P extends {}>(
+  type: FunctionComponent<P>,
+  props?: (Attributes & P) | null,
+  ...children: ReactNode[]
+): FunctionComponentElement<P>;
+function createElement<P extends {}>(
+  type: ClassType<
+    P,
+    ClassicComponent<P, ComponentState>,
+    ClassicComponentClass<P>
+  >,
+  props?: (ClassAttributes<ClassicComponent<P, ComponentState>> & P) | null,
+  ...children: ReactNode[]
+): CElement<P, ClassicComponent<P, ComponentState>>;
+```
+
+将 `createElement` 写两遍及以上，并配合不同的参数类型与返回值类型即可。
+
+### 自定义类型收窄
+
+我们可以通过 `typeof` 或 `instanceof` 做一些类型收窄工作，但有些类型甚至自定义类型的收窄判断函数需要自定义，我们可以通过 `is` 关键字定义自定义类型收窄判断函数。
+
+问题：`isValidElement` 判断对象是否是合法的 React 元素，我们希望这个函数具备类型收窄的功能。
+
+方案：
+
+```typescript
+function isValidElement<P>(
+  object: {} | null | undefined
+): object is ReactElement<P>;
+
+const element: string | ReactElement = "";
+
+if (isValidElement(element)) {
+  element; // 自动推导类型为 ReactElement
+} else {
+  element; // 自动推导类型为 string
+}
+```
+
+基于这个方案，我们可以创建一些很有用的函数，比如 `isArray`，`isMap`，`isSet` 等等，通过 `is` 关键字时其被调用时具备类型收窄的功能。
+
+### 用 Interface 定义函数
+
+一般定义函数类型我们用 `type`，但有些情况下定义的函数既可被调用，也有一些默认属性值需要定义，我们可以继续用 Interface 定义。
+
+问题：`FunctionComponent` 既可以当作函数调用，同时又能定义 `defaultProps` `displayName` 等固定属性。
+
+方案：
+
+```typescript
+interface FunctionComponent<P = {}> {
+  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
+  propTypes?: WeakValidationMap<P>;
+  contextTypes?: ValidationMap<any>;
+  defaultProps?: Partial<P>;
+  displayName?: string;
+}
+```
+
+`(props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null` 表示这种类型的变量可以作为函数执行：
+
+```jsx
+const App: FunctionComponent = () => <div />;
+App.displayName = "App";
+```
+
+## 3 总结
+
+看完文章内容，相信你已经可以独立读懂 [@types/react](https://unpkg.com/browse/@types/react@16.9.34/index.d.ts) 这个包的所有类型定义！ 
+
+更多基础内容可以阅读 [精读《Typescript2.0 - 2.9》](https://github.com/dt-fe/weekly/blob/7de3c77c3bdd7304c9e4b0c0f70c3ba6968ebd29/058.%E7%B2%BE%E8%AF%BB%E3%80%8ATypescript2.0%20-%202.9%E3%80%8B.md) 与 [精读《Typescript 3.2 新特性》](https://github.com/dt-fe/weekly/blob/v2/084.%E7%B2%BE%E8%AF%BB%E3%80%8ATypescript%203.2%20%E6%96%B0%E7%89%B9%E6%80%A7%E3%80%8B.md)，由于 TS 更新频繁，后续 TS 技巧可能继续以阅读源码方式进行，希望这次选用的 React 类型源码可以让你印象深刻。
+
+> 讨论地址是：[精读《@types/react 值得注意的 TS 技巧》 · Issue #245 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/245)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,133 @@
+## 1 引言
+
+Error Boundaries 是 React16 提出来用来捕获渲染时错误的概念，今天我们一起读一读 [A Simple Guide to Error Boundaries in React](https://alligator.io/react/error-boundaries/) 这篇文章，了解一下这个重要机制。
+
+## 2 概述
+
+Error Boundaries 可以用来捕获渲染时错误，API 如下：
+
+```jsx
+class MyErrorBoundary extends Component {
+  state = {
+    error: null,
+  };
+
+  static getDerivedStateFromError(error) {
+    // 更新 state，下次渲染可以展示错误相关的 UI
+    return { error: error };
+  }
+
+  componentDidCatch(error, info) {
+    // 错误上报
+    logErrorToMyService(error, info);
+  }
+
+  render() {
+    if (this.state.error) {
+      // 渲染出错时的 UI
+      return <p>Something broke</p>;
+    }
+    return this.props.children;
+  }
+}
+```
+
+- `static getDerivedStateFromError`: 在出错后有机会修改 state 触发最后一次错误 fallback 的渲染。
+- `componentDidCatch`: 用于出错时副作用代码，比如错误上报等。
+
+这两种方法中任意一个被定义时，这个组件就会成为 `Error Boundary` 组件，可以阻止子组件渲染时报错。
+
+最后作者还提出一个建议，建议将 Error Boundary 单独作为一个组件，而不是将错误监听方法与业务组件耦合，一方面考虑到复用，另一方面则因为错误检测只对子组件生效。
+
+好吧，其实 React 官方文档比这篇文章介绍的详细的多得多，原文介绍到此结束。
+
+## 3 精读
+
+[React Error Boundaries 官方文档](https://reactjs.org/docs/error-boundaries.html) 里提到了四种无法 Catch 的错误场景：
+
+1. 回调事件。由于回调事件执行时机不在渲染周期内，因此无法被 Error Boundary Catch 住，如有必要得自行 try/catch。
+2. 异步。比如 `setTimeout` 或 `requestAnimationFrame`，和第一条同理。
+3. 服务端渲染。
+4. Error Boundary 组件自身触发的错误。因为只能捕获其子组件的错误。
+
+这也是使用 Error Boundaries 最容易有疑问的地方。除了上面的情况，笔者结合自身经验再列举几种异常边界场景。
+
+### 无法捕获编译时错误
+
+很明显，即便是 React 官方 API `Error Boundary` 也只能捕获运行时错误，而对编译时错误无能为力。
+
+编译时错误包括不限于编译环境错误、运行前的框架错误检查提示、TS/Flow 类型错误等，这些都是 `Error Boundary` 无法捕获的，而且没有更好的办法 Catch 住，遇到编译错误就在编译时解决吧，仅关注运行时错误就好了。
+
+### 可以作用于 Function Component
+
+虽然函数式组件无法定义 `Error Boundary`，但 `Error Boundary` 可以捕获函数式组件的错误，因此可以曲线救国：
+
+```jsx
+// ErrorBoundary 组件
+class ErrorBoundary extends React.Component {
+  // ...
+}
+
+// 可以捕获所有组件异常，包括 Function Component 的子组件
+const App = () => {
+  return (
+    <ErrorBoundary>
+      <Child />
+    </ErrorBoundary>
+  );
+};
+```
+
+### 对 Hooks 也可生效
+
+对于 Hooks 中异常也可以生效，比如下面的代码：
+
+```jsx
+const Child = (props) => {
+  React.useEffect(() => {
+    console.log(1);
+    props.a.b;
+    console.log(2);
+  }, [props.a.b]);
+
+  return <div />;
+};
+```
+
+要注意的是，出现在 deps 中的错误会立即被 Catch，导致 `console.log(1)` 都无法打印。但如果是下面的代码，则可以打印出 `console.log(1)`，无法打印出 `console.log(2)`:
+
+```jsx
+const Child = (props) => {
+  React.useEffect(() => {
+    console.log(1);
+    props.a.b;
+    console.log(2);
+  }, []);
+
+  return <div />;
+};
+```
+
+所以 React 官网的这句话并不是指 `Error Boundary` 对 Hooks 不生效，而是指 `Error Boundary` 无法以 Hooks 方式指定，对功能是没有影响的：
+
+> componentDidCatch and getDerivedStateFromError: There are no Hook equivalents for these methods yet, but they will be added soon.
+
+所以这里的理解要注意一下，另外 React 官方文档 [Hooks FAQ](https://reactjs.org/docs/hooks-faq.html#how-do-lifecycle-methods-correspond-to-hooks) 有很多宝藏，建议抽时间逐条阅读。
+
+## 4 总结
+
+`Error Boundary` 可以捕获所有子元素渲染时异常，包括 render、各生命周期函数，但也有很多使用限制，希望你可以正确使用它。
+
+错误捕获也不是万能的，更多时候我们要避免并及时修复错误，通过错误捕获降低出错时对用户体验的影响，并在第一时间内监控起来并快速修复。
+
+最后，你有明明正确使用了 `Error Boundary` 却依然无法 Catch 住的错误 Case 吗？
+
+> 讨论地址是：[精读《React Error Boundaries》 · Issue #246 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/246)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,199 @@
+## 1 引言
+
+在数据中台做 BI 工具经常面对海量数据的渲染处理，除了组件本身性能优化之外，经常要排查整体页面性能瓶颈点，尤其是维护一些性能做得并不好的旧代码时。
+
+React 性能调试是面对这种问题的必修课，借助 [Profiling React.js Performance](https://addyosmani.com/blog/profiling-react-js/) 这篇文章一起学习一下这个技能吧。
+
+## 2 精读
+
+本文介绍了众多性能检测工具与方法。
+
+### React Profiler
+
+`Profiler` 这个 API 是一种运行时 Debug 的补充，可以通过其 callback 拿到组件渲染信息，用法如下：
+
+```jsx
+const Movies = ({ movies, addToQueue }) => (
+  <React.Profiler id="Movies" onRender={callback}>
+    <div />
+  </React.Profiler>
+);
+
+function callback(
+  id,
+  phase,
+  actualTime,
+  baseTime,
+  startTime,
+  commitTime,
+  interactions
+) {}
+```
+
+这个 callback 会在每次渲染时执行，渲染分为初始化和更新阶段，通过 `phase` 区分，下面是参数详细说明：
+
+- id: 传入的 id。
+- phase: "mount" 或 "update"，表示更新状态。
+- actualDuration: 实际渲染耗时。
+- baseDuration: 没有使用 memo 时的渲染预计耗时。
+- startTime: 开始渲染的时间。
+- commitTime: React 提交更新的时间
+- interactions: 何种原因导致的渲染，比如 `setState` 或 hooks changed 之类。
+
+注意尽量不要轻易使用 `Profiler` 检测性能，因为 `Profiler` 本身也会消耗性能。
+
+如果不想获得这么详细的渲染耗时，或者不想提前在代码中埋点，可以利用 DevTools 的 Profiler 查看更直观更简洁的渲染耗时：
+
+<img width=400 src="https://img.alicdn.com/tfs/TB1sPAuDuL2gK0jSZPhXXahvXXa-1846-1028.png">
+
+其中 Ranked 可以展示按照渲染耗时排序后的结果，Interations 需要配合 Tracing API 使用，在后面会提到。
+
+### Tracing API
+
+利用 `scheduler/tracing` 提供的 `trace` API，我们可以记录某个动作的耗时，比如 “点击添加按钮收藏一个电影” 耗时多久：
+
+```jsx
+import { render } from "react-dom";
+import { unstable_trace as trace } from "scheduler/tracing";
+
+class MyComponent extends Component {
+  addMovieButtonClick = (event) => {
+    trace("Add To Movies Queue click", performance.now(), () => {
+      this.setState({ itemAddedToQueue: true });
+    });
+  };
+}
+```
+
+在 Interations 中可以看到动作触发的耗时：
+
+<img width=400 src="https://img.alicdn.com/tfs/TB1XR.FDAY2gK0jSZFgXXc5OFXa-1846-1010.png">
+
+这个动作还可以是渲染，比如可以记录 ReactDOM 渲染的耗时：
+
+```jsx
+import { unstable_trace as trace } from "scheduler/tracing";
+
+trace("initial render", performance.now(), () => {
+  ReactDom.render(<App />, document.getElementById("app"));
+});
+```
+
+<img width=300 src="https://img.alicdn.com/tfs/TB18hyHfcKfxu4jSZPfXXb3dXXa-1846-740.png">
+
+甚至还可以追踪异步的耗时：
+
+```jsx
+import {
+  unstable_trace as trace,
+  unstable_wrap as wrap,
+} from "scheduler/tracing";
+
+trace("Some event", performance.now(), () => {
+  setTimeout(
+    wrap(() => {
+      // 异步操作
+    })
+  );
+});
+```
+
+有了 `Profiler` 与 `trace` 这两件武器，我们可以监控任意元素的渲染耗时与交互耗时，几乎可以涵盖所有性能监控需要。
+
+### Puppeteer
+
+我们还可以利用 Puppeteer 实现自动化操作并打印报告：
+
+```jsx
+const puppeteer = require("puppeteer");
+
+(async () => {
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+  const navigationPromise = page.waitForNavigation();
+  await page.goto("https://react-movies-queue.glitch.me/");
+  await page.setViewport({ width: 1276, height: 689 });
+  await navigationPromise;
+
+  const addMovieToQueueBtn =
+    "li:nth-child(3) > .card > .card__info > div > .button";
+  await page.waitForSelector(addMovieToQueueBtn);
+
+  // Begin profiling...
+  await page.tracing.start({ path: "profile.json" });
+  // Click the button
+  await page.click(addMovieToQueueBtn);
+  // Stop profliling
+  await page.tracing.stop();
+
+  await browser.close();
+})();
+```
+
+首先利用 `puppeteer` 创建一个浏览器，新建一个页面并打开 `https://react-movies-queue.glitch.me/` 这个 URL，等待页面加载完毕后利用 DOM 选择器找到按钮，利用 `page.click` API 模拟点击这个按钮，并在前后利用 `page.tracing` 记录性能变化，并将这个文件上传到 DevTools Performance 面板，就会得到一份自动的性能检测报告：
+
+<img width=400 src="https://img.alicdn.com/tfs/TB1623EDxz1gK0jSZSgXXavwpXa-2769-2289.png">
+
+这张图相当重要，是浏览器综合运行开销分析的利器，最上面分为 4 个部分：
+
+- FPS：每秒帧数，绿色竖线越高表示 FPS 越高，出现红线则表示出现了卡顿。
+- CPU：CPU 资源，用面积图展示消耗 CPU 资源的事件。
+- NET：网络消耗，每条横杠表示一种资源的加载。
+- HEAP：内存水位，由于短时间内看不出来是否会内存溢出，一般只用来简单看看内存消耗是否符合预期，对于内存溢出的检测需要用持续监控上报的方式。
+
+下面会有一张 Network 详细图解，比如这张图：
+
+<img width=400 src="https://img.alicdn.com/tfs/TB1D.wKDxD1gK0jSZFyXXciOVXa-2868-750.png">
+
+细线表示等待的时间，粗线表示实际加载的情况，其中浅色部分表示服务器等待时间，即从发送下载请求到服务器响应第一个字节的时间。这部分可以看出资源并行加载阻塞情况以及资源服务器响应时间是否存在问题。
+
+Timings 展示了几个重要时间节点，这里列举一部分：
+
+- FP：First Paint，第一次绘制。
+- FCP：First Contentful Paint，第一次内容绘制。
+- LCP：Largest Contentful Paint，最大内容绘制。
+- DCL：Document Content Loaded，DOM 内容加载完毕。
+
+再下面是 JS 计算消耗，用了一张火焰图，火焰图是性能分析的常用可视化工具。以下面这张图为例：
+
+<img width=350 src="https://img.alicdn.com/tfs/TB1JecIDrr1gK0jSZFDXXb9yVXa-1404-616.png">
+
+看火焰图首先看跨度最长的函数，也就是最长的那条线，这是最耗时的部分，从左到右是浏览器脚本的调用顺序，从上到下是函数嵌套的顺序。
+
+我们可以看到鼠标位置的 34 这个函数虽然长，但并不是性能瓶颈，因为下面执行的 n 函数长度和它一样，表示 34 函数的性能几乎无损耗，其性能由其调用的 n 函数决定。
+
+我们可以利用这种方式一步步排查到叶子结点，找到对性能影响最大的元子函数。
+
+### User Timing API
+
+我们还可以利用 `performance.mark` 自定义性能检测节点：
+
+```jsx
+// Record the time before running a task
+performance.mark("Movies:updateStart");
+// Do some work
+
+// Record the time after running a task
+performance.mark("Movies:updateEnd");
+
+// Measure the difference between the start and end of the task
+performance.measure("moviesRender", "Movies:updateStart", "Movies:updateEnd");
+```
+
+这些节点可以在上面介绍的 Performance 面板中展示出来用于自定义分析。
+
+## 3 总结
+
+利用 Performance 进行通用性能分析，利用 React Profiler 进行 React 定制性能分析，这两个结合在一起几乎可以完成任何性能检测。
+
+一般来说，首先应该用 React Profiler 进行 React 层面的问题筛查，这样更直观，更容易定位问题。如果某些问题跳出了 React 框架范围，或者不再能以组件粒度进行度量，我们可以回到 Performance 面板进行通用性能分析。
+
+> 讨论地址是：[精读《React 性能调试》 · Issue #247 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/247)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,259 @@
+## 1 引言
+
+Deno 是什么？Deno 和 Node 有什么关系？Deno 和我有什么关系？
+
+Deno 将于 2020-05-13 发布 1.0，如果你还有上面的疑惑，可以和我一起通过 [Deno 1.0: What you need to know](https://blog.logrocket.com/deno-1-0-what-you-need-to-know/) 这篇文章一起了解 Deno 基础知识。
+
+希望你带着疑问思考，未来 10 年看今天，会不会出现 Deno 官方生态壮大，完全替代 Node 进而影响到 Web 生态的局面呢？这个思考结果会影响到你未来职业发展，你需要学会自己思考，并对这个思考结果负责。
+
+## 2 介绍 & 精读
+
+Deno 的作者是 Ryan Dahl，他是 Nodejs 背后的策划者，曾经说过 [我对 Nodejs 感到遗憾的 10 件事](https://www.youtube.com/watch?v=M3BM9TB-8yA)。这也是为什么新开一个坑的原因，但 Deno 并不定位为 Nodejs 的替代品，从整体功能来看，Deno 有更大的野心，据我的推测是想要取代现在陈旧的前后端开发模式，让 Deno 一统前后端开发全流程。
+
+Nodejs 是由 C++ 写的，而 Deno 则是由 Rust 写的，并选择了 [Tokio](https://tokio.rs/) 这个异步编程框架，并使用 V8 引擎解析 Javascript，并内置了对 Ts 的解析。
+
+### 安装
+
+Deno 支持如下安装方式：
+
+**Shell:**
+
+```shell
+curl -fsSL https://deno.land/x/install/install.sh | sh
+```
+
+**PowerShell:**
+
+```shell
+iwr https://deno.land/x/install/install.ps1 -useb | iex
+```
+
+**Homebrew:**
+
+```shell
+brew install deno
+```
+
+**Chocolatey:**
+
+```shell
+choco install deno
+```
+
+脚本执行方式为 `deno run`，可以类比为 `node`，但功能不同且支持远程文件，实际上远程依赖是 Deno 的一大特色，也是有争议的地方：
+
+```shell
+deno run https://deno.land/std/examples/welcome.ts
+```
+
+在 ts 文件中允许用远程脚本加载资源，这个后面还会提到：
+
+```ts
+import { serve } from "https://deno.land/std@v0.42.0/http/server.ts";
+const s = serve({ port: 8000 });
+console.log("http://localhost:8000/");
+for await (const req of s) {
+  req.respond({ body: "Hello World\n" });
+}
+```
+
+### 安全性
+
+Deno 是默认安全的，这体现在默认没有环境、网络访问权限、文件读写权限、运行子进程的能力。所以如果直接运行一个依赖权限的文件会报错：
+
+```shell
+deno run file-needing-to-run-a-subprocess.ts
+
+# error: Uncaught PermissionDenied: access to run a subprocess, run again with the --allow-run flag
+```
+
+可以通过参数方式允许权限的执行，有 `--allow-read`、`--allow-write`、`--allow-net` 等：
+
+```shell
+deno --allow-read=/etc
+```
+
+上面表示 `/etc` 文件夹下的文件拥有文件读权限。
+
+除了直接加参数调用、Bash 脚本调用外，还可以用 Make 运行，或者使用类似的 [drake](https://deno.land/x/drake/) 启动。
+
+或者使用 `deno install` 命令，将脚本转化为一个快捷指令：
+
+```shell
+deno install --allow-net --allow-read -n serve https://deno.land/std/http/file_server.ts
+```
+
+`-n` 表示 `--name`，可以对这个脚本进行重命名，比如上面的例子中，`serve` 命令就等同于 `deno run --allow-net --allow-read https://deno.land/std/http/file_server.ts`。
+
+### 标准库
+
+Deno 在标准库上很有特点，对常用功能提供了官方版本，保证可用性与稳定性。原文中列出了一些与 Npm 三方库的对比：
+
+| Deno Module | Description                                                                       | npm | Equivalents              |
+| ----------- | --------------------------------------------------------------------------------- | --- | ------------------------ |
+| colors      | Adds color to the terminal                                                        |     | chalk, kleur, and colors |
+| datetime    | Helps working with the JavaScript Date object                                     |     |
+| encoding    | Adds support for external data scructures like base32, binary, csv, toml and yaml |     |
+| flags       | Helps working with command line arguments                                         |     | minimist                 |
+| fs          | Helps with manipulation of the file system                                        |     |
+| http        | Allows serving local files over HTTP                                              |     | http-server              |
+| log         | Used for creating logs                                                            |     | winston                  |
+| testing     | For unit testing assertion and benchmarking                                       |     | chai                     |
+| uuid        | UUID generation                                                                   |     | uuid                     |
+| ws          | Helps with creating WebSocket client/server                                       |     | ws                       |
+
+从这个点上来看，Deno 既做运行环境又做基础生态，缓解了 Npm 生态下选择困难症，这件事需要辩证来看：集成了官方包对功能确定的模块来说是很有必要的，而且提高了底层库的稳定性；但 Deno 生态也有三方库，而且本质上三方库和官方库在功能上没有任何壁垒，因为实现代码都类似，唯一区别是谁能为其稳定性站台，假设微软和 Deno 同时出了基于 Npm 生态与 Deno 生态官方库，都保证会持续维护，你更相信谁呢？官方是否有优势要取决于官方自身的实力。
+
+### 内置 Typescript
+
+Deno 内置支持了 TS，因此不需要 `ts-node` 我们就可以用 `deno run test.ts` 运行 Typescript 文件。值得注意的是，Deno 内部也是利用 Typescript 引擎解析为 Js 后交由 V8 引擎解析，因此本质上没太大的变化，只是这样 Deno 的生态会更规范。
+
+由于内置了 TS 支持，自然也不需要写 `tsconfig.json` 配置了，但你依然可以定制它：
+
+```shell
+deno run -c tsconfig.json [file-to-run.ts]
+```
+
+Deno 默认还开启了 TS 严格模式，所以看到这里，可以认为 Deno 是为了构建高质量理想库而诞生的运行环境，基于已有的生态来做，但做了更多内置技术选型，这和 Facebook 的 [rome](https://github.com/facebookexperimental/rome) 很像，但做的却更彻底。
+
+其实从实现上来看，我们基于 Javascript 生态也能写出 `deno run test.ts` 这样类似的引擎，只不过是由 JS 驱动执行，可能编译还会选择 Webpack，但 Deno 本身基于 Rust 实现，并重新实现了一套模块加载标准，可以说从更底层的方式重新解读了 W3C 标准规范，以期望解决 Javascript 生态的各种痛点问题。
+
+### 支持 Web 标准
+
+Deno 还支持 W3C 标准规范，因此像 `fetch`、`setTimeout` 等 API 都可以被直接使用，如果你按照 Deno 支持的那几个函数写代码，可以保证在 Deno、Node、Web 三个平台实现跨平台运行。
+
+虽然距离完全实现 W3C 所有标准规范还有一些路要走，但我们看到了 Deno 兼容规范的决心。
+
+### ESModule
+
+模块化是 Deno 的亮点，Deno 使用官方 ESModule 规范，但引用路径必须加上后缀：
+
+```ts
+import * as log from "https://deno.land/std/log/mod.ts";
+import { outputToConsole } from "./view.ts";
+```
+
+Deno 不需要申明依赖，代码的引用路径就是依赖申明，会包括完整的路径以及文件后缀，也支持网络资源，可以摆脱 NPM 中心化的包管理模式，因为这个路径可以是任何网络地址。
+
+### 包管理
+
+对于 `import * as log from "https://deno.land/std/log/mod.ts";` 这行代码，Deno 会下载到一个缓存文件夹，用户不会感知到这个文件夹与这个过程的存在，也就是说，Deno 环境中是没有 `node_modules` 的。
+
+也可以通过 `deno --reload` 的方式强制刷新缓存。
+
+但这里也要辩证的看待 “Deno 去中心化” 这件事，虽然引用了网络源，但会引发下面几个问题：
+
+1. 实际上还存在一个 "node_modules"，只是用户看不到。
+2. 网络下载速度放到运行时，第一次启动还是很慢。
+3. 普通模式下无 lock，必须配合 `deps.ts` 使用，这个后面会提到。
+
+即使被打上 “中心化恶人” 的 npm 也有去中心化的一面，因为 npm 支持私有化部署，无论是速度还是稳定性都可以由公司自己掌控，从稳定性来说还是 npm 拥有压倒性优势。
+
+### 三方库
+
+Deno 还有第三方库生态，截止目前共有 [221 个三方库](<[](https://deno.land/x/)>)。
+
+由于 Deno 走网络资源，我们可以借助 [Pika](https://www.pika.dev/cdn) 提供的 CDN 服务直接引用网络资源包：
+
+```jsx
+import * as pkg from "https://cdn.pika.dev/preact@^10.3.0";
+```
+
+虽然这样看上去很轻量，但对公司来说还是需要自建一个 “Pika” 保障稳定性，以及做全球 CDN 缓存等的工作。
+
+### 告别 package.json
+
+npm 生态下包信息存放在 `package.json`，包含但不限于下面的内容：
+
+- 项目元信息。
+- 项目依赖和版本号。
+- 依赖还进行分类，比如 `dependencies`、`devDependencies` 甚至 `peerDependencies`。
+- 标记入口，`main` 和 `module`，还有 TS 用的 `types` 与 `typings`，脚手架的 `bin` 等等。
+- npm scripts。
+
+随着标准的不断更新，`package.json` 信息已经非常臃肿了。
+
+对于 Deno 来说，则使用 `deps.ts` 集中管理依赖：
+
+```ts
+export { assert } from "https://deno.land/std@v0.39.0/testing/asserts.ts";
+export { green, bold } from "https://deno.land/std@v0.39.0/fmt/colors.ts";
+```
+
+`deps.ts` 就是一个普通文件，只是将项目的依赖精确描述出来，这样其他地方引用 `assert` 时，就可以这么写了：
+
+```ts
+// import { assert } from "https://deno.land/std@v0.39.0/testing/asserts.ts";
+import { assert } from "./deps.ts";
+```
+
+如果需要锁定依赖，可以通过 `deno --lock=lock.json` 方式申明。
+
+### deno doc
+
+`deno doc <filename>` 命令可以根据文件按照 JS Doc 规则生成文档，同时也支持 TS 语法，比如下面这段代码：
+
+```ts
+/** Asynchronously fulfill a response with a file from the local file
+ * system. */
+export async function send(
+  { request, response }: Context,
+  path: string,
+  options: SendOptions = { root: "" }
+): Promise<string | undefined> {
+  // ...
+}
+```
+
+生成文档如下：
+
+```text
+function send(_: Context, path: string, options: SendOptions): Promise<string | undefined>
+Asynchronously fulfill a response with a file from the local file system.
+```
+
+deno 本身文档就是用这个命令生成的，可以 [访问官方文档](https://doc.deno.land/) 查看使用效果。
+
+### 内置工具链
+
+前端 Javascript 工具链相当混乱，虽然业界已有 Umi 等框架做了开箱即用的封装，但回到 Javascript 设计的初衷就是可以在浏览器直接使用的，包括浏览器对不依赖构建工具的模块化支持，注定了未来 Webpack 一定会被消灭。
+
+Deno 通过内置一套工具链的方式解决这个问题，包括：
+
+- 测试：提供 `deno test` 命令与 `Deno.test()` 测试函数。
+- 格式化：提供 [vscode 插件](https://marketplace.visualstudio.com/items?itemName=axetroy.vscode-deno)。
+- 编译：提供 `deno bundle` 命令。
+
+不过值得注意的是，在最重要的编译环节，`deno bundle` 目前提供的能力是相对欠缺的，比如还不支持 Tree Shaking。
+
+用 Rust 等语言提升构建效率是业界一直在尝试的事，比如 @陈成 就基于 [esbuild](https://github.com/evanw/esbuild) 做了 [@umijs/plugin-esbuild](https://umijs.org/zh-CN/plugins/plugin-esbuild) 插件用于提升 Umi 构建速度，但为了防止生产构建产物与 Webpack 默认规则不一致，仅使用了其压缩（minifier）功能。
+
+对 deno 来说也一样，目前其实没有任何证据表明 deno 的构建结果可以完美适配 webpack 环境，所以请勿认为 deno 发布了 1.0 版本就等于可以在生产环境使用。
+
+## 3 总结
+
+正如原文结尾所说的，Deno 虽然将要发布 1.0 版本，但仍不能完全替代 Nodejs，这背后的原因主要是历史兼容成本，也就是完整支持整个 Node 生态不只是设计的问题，更是一个体力活，需要一个个高地去攻克。
+
+同样 Deno 对 Web 的支持也让人耳目一新，但仍不能放到生产环境使用，除了官方和三方生态还在逐渐完善外，`deno bundle` 对 Tree Shaking 能力的缺失以及构建产物无法保证与现在的 Webpack 完全相同，这样会导致对稳定性要求极高的大型应用迁移成本非常高。
+
+最亮眼的改动是模块化部分，依赖完全去中心化从长远来看是一个非常好的设计，只是基础设施和生态要达到一个较为理想的水平。
+
+最后，让我们站在一个预言者角度思考一下 Deno 到底会不会火吧：
+
+Deno 做的初心是做一个更好的 Node，但很不幸，对于这种级别的生态底层工具来说，重新做一个并重新火起来的难度，不亚于重新做一个阿里巴巴并取代现在阿里的难度。也就是不同的时间点做同一件事，哪怕后者可以吸取教训，大概率也无法复制以前成功的路线。
+
+从 Deno 的功能来看，解决了 Node 很多痛点，其中就包括去中心化管理，有点云开发的意思，但在 2020 年，基于 Nodejs 和 Webpack 的云开发都搞出来了，说实话是没有 Deno 什么空间的。从功能上来看，开篇就说了 Deno 基于 V8 解析 Javascript，对于性能和功能都没有革命性提升，从技术上作出突破也几乎不可能了。
+
+Deno 的思想确实比 Node 先进，但不能说比 Node 好十倍，则无法撼动 Node 的生态，即便是 Node 作者自己可能也不行。
+
+然而我上面说的可能都是错的。
+
+> 讨论地址是：[精读《Deno 1.0 你需要了解的》 · Issue #248 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/248)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,453 @@
+## 1 引言
+
+与组件生命周期绑定的 Utils 非常适合基于 React Hooks 来做，比如可以将 “发请求” 这个功能与组件生命周期绑定，实现一些便捷的功能。
+
+这次以 [@umijs/use-request](https://hooks.umijs.org/zh-CN/hooks/async) 为例子，分析其功能思路与源码。
+
+## 2 简介
+
+[@umijs/use-request](https://hooks.umijs.org/zh-CN/hooks/async) 支持以下功能：
+
+- 默认自动请求：在组件初次加载时自动触发请求函数，并自动管理 `loading`, `data` , `error` 状态。
+- 手动触发请求：设置 `options.manual = true` , 则手动调用 `run` 时才会取数。
+- 轮询请求：设置 `options.pollingInterval` 则进入轮询模式，可通过 `run` / `cancel` 开始与停止轮询。
+- 并行请求：设置 `options.fetchKey` 可以对请求状态隔离，通过 `fetches` 拿到所有请求状态。
+- 请求防抖：设置 `options.debounceInterval` 开启防抖。
+- 请求节流：设置 `options.throttleInterval` 开启节流。
+- 请求缓存 & SWR：设置 `options.cacheKey` 后开启对请求结果缓存机制，下次请求前会优先返回缓存并在后台重新取数。
+- 请求预加载：由于 `options.cacheKey` 全局共享，可以提前执行 `run` 实现预加载效果。
+- 屏幕聚焦重新请求：设置 `options.refreshOnWindowFocus = true` 在浏览器 `refocus` 与 `revisible` 时重新请求。
+- 请求结果突变：可以通过 `mutate` 直接修改取数结果。
+- 加载延迟：设置 `options.loadingDelay` 可以延迟 `loading` 变成 `true` 的时间，有效防止闪烁。
+- 自定义请求依赖：设置 `options.refreshDeps` 可以在依赖变动时重新触发请求。
+- 分页：设置 `options.paginated` 可支持翻页场景。
+- 加载更多：设置 `options.loadMore` 可支持加载更多场景。
+
+一切 Hooks 的功能拓展都要基于 React Hooks 生命周期，我们可以利用 Hooks 做下面几件与组件相关的事：
+
+1. 存储与当前组件实例绑定的 mutable、immutable 数据。
+2. 主动触发调用组件 rerender。
+3. 访问到组件初始化、销毁时机的钩子。
+
+上面这些功能就可以基于这些基础能力拓展了：
+
+**默认自动请求**
+
+在组件初始时机取数。由于和组件生命周期绑定，可以很方便实现各组件相互隔离的取数顺序强保证：可以利用取数闭包存储 requestIndex，取数结果返回后与当前最新 requestIndex 进行比对，丢弃不一致的取数结果。
+
+**手动触发请求**
+
+将触发取数的函数抽象出来并在 CustomHook 中 return。
+
+**轮询请求**
+
+在取数结束后设定 `setTimeout` 重新触发下一轮取数。
+
+**并行请求**
+
+每次取数时先获取当前请求唯一标识 `fetchKey`，仅更新这个 key 下的状态。
+
+**请求防抖、请求节流**
+
+这个实现方式可以挺通用化，即取数调用函数处替换为对应 `debounce` 或 `throttle` 函数。
+
+**请求预加载**
+
+这个功能只要实现全局缓存就自然支持了。
+
+**屏幕聚焦重新请求**
+
+这个可以统一监听 window action 事件，并触发对应组件取数。可以全局统一监听，也可以每个组件分别监听。
+
+**请求结果突变**
+
+由于取数结果存储在 CustomHook 中，直接修改数据 data 值即可。
+
+**加载延迟**
+
+有加载延迟时，可以先将 `loading` 设置为 `false`，等延迟到了再设置为 `true`，如果此时取数提前完毕则销毁定时器，实现无 loading 取数。
+
+**自定义请求依赖**
+
+利用 `useEffect` 和自带的 deps 即可。
+
+**分页**
+
+基于通用取数 Hook 封装，本质上是多带了一些取数参数与返回值参数，并遵循 Antd Table 的 API。
+
+**加载更多**
+
+和分页类似，区别是加载更多不会清空已有数据，并且需要根据约定返回结构 `noMore` 判断是否能继续加载。
+
+## 3 精读
+
+接下来是源码分析。
+
+首先定义了一个类 `Fetch`，这是因为一个 `useRequest` 的 `fetchKey` 特性可以通过多实例解决。
+
+Class 的生命周期不依赖 React Hooks，所以将不依赖生命周期的操作收敛到 Class 中，不仅提升了代码抽象程度，也提升了可维护性。
+
+```tsx
+class Fetch<R, P extends any[]> {
+  // ...
+  // 取数状态存储处
+  state: FetchResult<R, P> = {
+    loading: false,
+    params: [] as any,
+    data: undefined,
+    error: undefined,
+    run: this.run.bind(this.that),
+    mutate: this.mutate.bind(this.that),
+    refresh: this.refresh.bind(this.that),
+    cancel: this.cancel.bind(this.that),
+    unmount: this.unmount.bind(this.that),
+  };
+
+  constructor(
+    service: Service<R, P>,
+    config: FetchConfig<R, P>,
+    // 外部通过这个回调订阅 state 变化
+    subscribe: Subscribe<R, P>,
+    initState?: { data?: any; error?: any; params?: any; loading?: any }
+  ) {}
+
+  // 此 setState 非彼 setState，作用是更新 state 并通知订阅
+  setState(s = {}) {
+    this.state = {
+      ...this.state,
+      ...s,
+    };
+    this.subscribe(this.state);
+  }
+
+  // 实际取数函数，但下划线命名的带有一些历史气息啊
+  _run(...args: P) {}
+
+  // 对外暴露的取数函数，对防抖和节流做了分发处理
+  run(...args: P) {
+    if (this.debounceRun) {
+      // return ..
+    }
+    if (this.throttleRun) {
+      // return ..
+    }
+    return this._run(...args);
+  }
+
+  // 取消取数，考虑到了防抖、节流兼容性
+  cancel() {}
+
+  // 以上次取数参数重新取数
+  refresh() {}
+
+  // 轮询 starter
+  rePolling() {}
+
+  // 对应 mutate 函数
+  mutate(data: any) {}
+
+  // 销毁订阅
+  unmount() {}
+}
+```
+
+**默认自动请求**
+
+通过 `useEffect` 零依赖实现，需要：
+
+1. 有缓存则不需响应，当对应缓存结束后会通知，同时也支持了请求预加载功能。
+2. 为支持并行请求，所有请求都通过 `fetches` 独立管理。
+
+```tsx
+// 第一次默认执行
+useEffect(() => {
+  if (!manual) {
+    // 如果有缓存
+    if (Object.keys(fetches).length > 0) {
+      /* 重新执行所有的 */
+      Object.values(fetches).forEach((f) => {
+        f.refresh();
+      });
+    } else {
+      // 第一次默认执行，可以通过 defaultParams 设置参数
+      run(...(defaultParams as any));
+    }
+  }
+}, []);
+```
+
+默认执行第 11 行，并根据当前的 `fetchKey` 生成对应 `fetches`，如果初始化已经存在 `fetches`，则行为改为重新执行所有 **已存在的** 并行请求。
+
+**手动触发请求**
+
+上一节已经在初始请求时禁用了 `manual` 开启时的默认取数。下一步只要将封装的取数函数 `run` 定义出来并暴露给用户：
+
+```tsx
+const run = useCallback(
+  (...args: P) => {
+    if (fetchKeyPersist) {
+      const key = fetchKeyPersist(...args);
+      newstFetchKey.current = key === undefined ? DEFAULT_KEY : key;
+    }
+    const currentFetchKey = newstFetchKey.current;
+    // 这里必须用 fetchsRef，而不能用 fetches。
+    // 否则在 reset 完，立即 run 的时候，这里拿到的 fetches 是旧的。
+    let currentFetch = fetchesRef.current[currentFetchKey];
+    if (!currentFetch) {
+      const newFetch = new Fetch(
+        servicePersist,
+        config,
+        subscribe.bind(null, currentFetchKey),
+        {
+          data: initialData,
+        }
+      );
+      currentFetch = newFetch.state;
+      setFeches((s) => {
+        // eslint-disable-next-line no-param-reassign
+        s[currentFetchKey] = currentFetch;
+        return { ...s };
+      });
+    }
+    return currentFetch.run(...args);
+  },
+  [fetchKey, subscribe]
+);
+```
+
+主动取数函数与内部取数函数共享一个，所以 `run` 函数要考虑多种情况，其中之一就是并行取数的情况，因此需要拿到当前取数的 `fetchKey`，并创建一个 `Fetch` 的实例，最终调用 `Fetch` 实例的 `run` 函数取数。
+
+**轮询请求**
+
+轮询取数在 `Fetch` 实际取数函数 `_fetch` 中定义，当取数函数 `fetchService`（对多种形态的取数方法进行封装后）执行完后，无论正常还是报错，都要进行轮询逻辑，因此在 `.finally` 时机里判断：
+
+```tsx
+fetchService.then().finally(() => {
+  if (!this.unmountedFlag && currentCount === this.count) {
+    if (this.config.pollingInterval) {
+      // 如果屏幕隐藏，并且 !pollingWhenHidden, 则停止轮询，并记录 flag，等 visible 时，继续轮询
+      if (!isDocumentVisible() && !this.config.pollingWhenHidden) {
+        this.pollingWhenVisibleFlag = true;
+        return;
+      }
+      this.pollingTimer = setTimeout(() => {
+        this._run(...args);
+      }, this.config.pollingInterval);
+    }
+  }
+});
+```
+
+轮询还要考虑到屏幕是否隐藏，如果可以触发轮询则触发定时器再次调用 `_run`，注意这个定时器需要正常销毁。
+
+**并行请求**
+
+每个 `fetchKey` 对应一个 `Fetch` 实例，这个逻辑在 **手动触发请求** 介绍的 `run` 函数中已经实现。
+
+这块的封装思路可以品味一下，从外到内分别是 React Hooks 的 fetch -> Fetch 类的 run -> Fetch 类的 \_run，并行请求做在 React Hooks 这一层。
+
+**请求防抖、请求节流**
+
+这个实现就在 Fetch 类的 `run` 函数中：
+
+```tsx
+function run(...args: P) {
+  if (this.debounceRun) {
+    this.debounceRun(...args);
+    return Promise.resolve(null as any);
+  }
+  if (this.throttleRun) {
+    this.throttleRun(...args);
+    return Promise.resolve(null as any);
+  }
+  return this._run(...args);
+}
+```
+
+由于防抖和节流是 React 无关的，也不是最终取数无关的，因此实现在 `run` 这个夹层函数进行分发。
+
+这里实现的比较简化，防抖后 `run` 拿到的 Promise 不再是有效的取数结果了，其实这块还是可以进一步对 Promise 进行封装，无论在防抖还是正常取数的场景都返回 Promise，只需 resolve 的时机由 `Fetch` 这个类灵活把控即可。
+
+**请求预加载**
+
+预加载就是缓存机制，首先利用 `useEffect` 同步缓存：
+
+```tsx
+// cache
+useEffect(() => {
+  if (cacheKey) {
+    setCache(cacheKey, {
+      fetches,
+      newstFetchKey: newstFetchKey.current,
+    });
+  }
+}, [cacheKey, fetches]);
+```
+
+在初始化 `Fetch` 实例时优先采用缓存：
+
+```tsx
+const [fetches, setFeches] = useState<Fetches<U, P>>(() => {
+  // 如果有 缓存，则从缓存中读数据
+  if (cacheKey) {
+    const cache = getCache(cacheKey);
+    if (cache) {
+      newstFetchKey.current = cache.newstFetchKey;
+      /* 使用 initState, 重新 new Fetch */
+      const newFetches: any = {};
+      Object.keys(cache.fetches).forEach((key) => {
+        const cacheFetch = cache.fetches[key];
+        const newFetch = new Fetch();
+        // ...
+        newFetches[key] = newFetch.state;
+      });
+      return newFetches;
+    }
+  }
+  return [];
+});
+```
+
+**屏幕聚焦重新请求**
+
+在 `Fetch` 构造函数实现监听并调用 `refresh` 即可，源码里采取全局统一监听的方式：
+
+```tsx
+function subscribe(listener: () => void) {
+  listeners.push(listener);
+  return function unsubscribe() {
+    const index = listeners.indexOf(listener);
+    listeners.splice(index, 1);
+  };
+}
+
+let eventsBinded = false;
+if (typeof window !== "undefined" && window.addEventListener && !eventsBinded) {
+  const revalidate = () => {
+    if (!isDocumentVisible()) return;
+    for (let i = 0; i < listeners.length; i++) {
+      // dispatch 每个 listener
+      const listener = listeners[i];
+      listener();
+    }
+  };
+  window.addEventListener("visibilitychange", revalidate, false);
+  // only bind the events once
+  eventsBinded = true;
+}
+```
+
+在 `Fetch` 构造函数里注册：
+
+```tsx
+this.limitRefresh = limit(this.refresh.bind(this), this.config.focusTimespan);
+
+if (this.config.pollingInterval) {
+  this.unsubscribe.push(subscribeVisible(this.rePolling.bind(this)));
+}
+```
+
+并通过 `limit` 封装控制调用频率，并 push 到 `unsubscribe` 数组，一边监听可以随组件一起销毁。
+
+**请求结果突变**
+
+这个函数只要更新 `data` 数据结果即可：
+
+```tsx
+function mutate(data: any) {
+  if (typeof data === "function") {
+    this.setState({
+      data: data(this.state.data) || {},
+    });
+  } else {
+    this.setState({
+      data,
+    });
+  }
+}
+```
+
+值得注意的是，`cancel`、`refresh`、`mutate` 都必须在初次请求完成后才有意义，所以初次返回的函数是一个抛错：
+
+```tsx
+const noReady = useCallback(
+  (name: string) => () => {
+    throw new Error(`Cannot call ${name} when service not executed once.`);
+  },
+  []
+);
+
+return {
+  loading: !manual || defaultLoading,
+  data: initialData,
+  error: undefined,
+  params: [],
+  cancel: noReady("cancel"),
+  refresh: noReady("refresh"),
+  mutate: noReady("mutate"),
+  ...(fetches[newstFetchKey.current] || {}),
+} as BaseResult<U, P>;
+```
+
+等取数完成后会被 `...(fetches[newstFetchKey.current] || {})` 这一段覆盖为正常函数。
+
+**加载延迟**
+
+如果设置了加载延迟，请求发动时就不应该立即设置为 loading，这个逻辑写在 `_run` 函数中：
+
+```tsx
+function _run(...args: P) {
+  // 取消 loadingDelayTimer
+  if (this.loadingDelayTimer) {
+    clearTimeout(this.loadingDelayTimer);
+  }
+  this.setState({
+    loading: !this.config.loadingDelay,
+    params: args,
+  });
+
+  if (this.config.loadingDelay) {
+    this.loadingDelayTimer = setTimeout(() => {
+      this.setState({
+        loading: true,
+      });
+    }, this.config.loadingDelay);
+  }
+}
+```
+
+启动一个 `setTimeout` 将 loading 设为 `true` 即可，这个 timeout 在下次执行 `_run` 时被 `clearTimeout` 清空。
+
+**自定义请求依赖**
+
+最明智的做法是利用 `useEffect` 实现，实际代码做了组件 unmount 保护：
+
+```tsx
+//  refreshDeps 变化，重新执行所有请求
+useUpdateEffect(() => {
+  if (!manual) {
+    /* 全部重新执行 */
+    Object.values(fetchesRef.current).forEach((f) => {
+      f.refresh();
+    });
+  }
+}, [...refreshDeps]);
+```
+
+非手动条件下，依赖变化所有已存在的 `fetche` 执行 `refresh` 即可。
+
+分页和加载更多就不解析了，原理是在 `useAsync` 这个基础请求 Hook 基础上再包一层 Hook，拓展取数参数与返回结果。
+
+## 4 总结
+
+目前还有 错误重试、请求超时管理、Suspense 没有支持，看完这篇精读后，相信你已经可以提 PR 了。
+
+> 讨论地址是：[精读《@umijs/use-request》源码 · Issue #249 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/249)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,284 @@
+## 1 引言
+
+[Recoil](https://recoiljs.org/) 是 Facebook 公司出的数据流管理方案，有一定思考的价值。
+
+Recoil 是基于 Immutable 的数据流管理方案，这也是它值得被拿出来看的最重要原因，如果要用 Mutable 方式管理 React 数据流，直接看 [mobx-react](https://github.com/mobxjs/mobx-react) 就足够了。
+
+然而 React Immutable 特性带来的可预测性非常利于调试和维护：
+
+1. 断点调试时变量的值与当前执行位置无关，已创建过的值不会突然 Mutable 突变，非常可预测。
+2. 在 React 框架下组件更新机制单一，只有引用变化才触发重渲染，而没有 Mutable 模式下 ForceUpdate 的心智负担。
+
+当然 Immutable 模式下存在一定编码心智负担，所以各有优劣。
+
+> 但 Recoil 和 Redux 一样，并不代表 React 官方数据流管理方案，因此不用带着官方光环去看它。
+
+## 2 简介
+
+Recoil 解决 React 全局数据流管理的问题，采用分散管理原子状态的设计模式，支持派生数据与异步查询，在基本功能上可以覆盖 Redux。
+
+### 状态作用域
+
+和 Redux 一样，全局数据流管理需要存在作用域 `RecoilRoot`：
+
+```jsx
+import React from "react";
+import { RecoilRoot } from "recoil";
+
+function App() {
+  return (
+    <RecoilRoot>
+      <CharacterCounter />
+    </RecoilRoot>
+  );
+}
+```
+
+`RecoilRoot` 在被嵌套时，最内层的 `RecoilRoot` 会覆盖外层的配置及状态值。
+
+### 定义数据
+
+与 Redux 集中定义 `initState` 不同，Recoil 采用 `atom` 以分散方式定义数据：
+
+```jsx
+const textState = atom({
+  key: "textState",
+  default: "",
+});
+```
+
+其中 `key` 必须在 `RecoilRoot` 作用域内唯一，也可以认为是 state 树打平时 key 必须唯一的要求。
+
+`default` 定义默认值，既然数据定义分散了，默认值定义也是分散的。
+
+### 读取数据
+
+与 Redux 的 Connect 或 useSelector 类似，Recoil 采用 Hooks 方式读取数据：
+
+```jsx
+import { useRecoilValue } from "recoil";
+
+function App() {
+  const text = useRecoilValue(textState);
+}
+```
+
+`useRecoilValue` 与 `useSetRecoilState` 都可以获取数据，区别是 `useRecoilState` 还可以获取写数据的函数：
+
+```jsx
+import { useRecoilState } from "recoil";
+
+function App() {
+  const [text, setText] = useRecoilState(useRecoilState);
+}
+```
+
+### 修改数据
+
+与 Redux 集中定义纯函数 `reducer` 修改数据不同，Recoil 采用 Hooks 方式写数据。
+
+除了上面提到的 `useRecoilState` 之外，还有一个 `useSetRecoilState` 可以仅获取写函数：
+
+```jsx
+import { useSetRecoilState } from "recoil";
+
+function App() {
+  const setText = useSetRecoilState(useRecoilState);
+}
+```
+
+`useSetRecoilState` 与 `useRecoilState`、`useRecoilValue` 的不同之处在于，数据流的变化不会导致组件 Rerender，因为 `useSetRecoilState` 仅写不读。
+
+这也导致 Recoil API 偏多被诟病，这也是 Immutable 模式下存的编码心智负担，虽然很好理解，但也只有 `useSelector` 或 Recoil 这样拆分 API 的方式可以解决。
+
+> 另外还提供了 `useResetRecoilState` 重置到默认值并读取。
+
+### 仅读不订阅
+
+与 ReactRedux 的 `useStore` 类似，Recoil 提供了 `useRecoilCallback` 用于只读不订阅场景：
+
+```jsx
+import { atom, useRecoilCallback } from "recoil";
+
+const itemsInCart = atom({
+  key: "itemsInCart",
+  default: 0,
+});
+
+function CartInfoDebug() {
+  const logCartItems = useRecoilCallback(async ({ getPromise }) => {
+    const numItemsInCart = await getPromise(itemsInCart);
+
+    console.log("Items in cart: ", numItemsInCart);
+  });
+}
+```
+
+`useRecoilCallback` 通过回调方式定义要读取的数据，这个数据变化也不会导致当前组件重渲染。
+
+### 派生值
+
+与 Mobx `computed` 类似，recoil 提供了 `selector` 支持派生值，这是比较有特色的功能:
+
+```jsx
+import { atom, selector, useRecoilState } from "recoil";
+
+const tempFahrenheit = atom({
+  key: "tempFahrenheit",
+  default: 32,
+});
+
+const tempCelcius = selector({
+  key: "tempCelcius",
+  get: ({ get }) => ((get(tempFahrenheit) - 32) * 5) / 9,
+  set: ({ set }, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
+});
+
+function TempCelcius() {
+  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
+  const [tempC, setTempC] = useRecoilState(tempCelcius);
+}
+```
+
+`selector` 提供了 `get`、`set` 分别定义如何赋值与取值，所以其与 `atom` 定义一样可以被 `useRecoilState` 等三套 API 操作，这里甚至不用看源码就能猜到，`atom` 应该是基于 `selector` 的一个特定封装。
+
+### 异步读取
+
+基于 `selector` 可以实现异步数据读取，只要将 `get` 函数写成异步即可：
+
+```jsx
+const currentUserNameQuery = selector({
+  key: "CurrentUserName",
+  get: async ({ get }) => {
+    const response = await myDBQuery({
+      userID: get(currentUserIDState),
+    });
+    if (response.error) {
+      throw response.error;
+    }
+    return response.name;
+  },
+});
+
+function CurrentUserInfo() {
+  const userName = useRecoilValue(currentUserNameQuery);
+  return <div>{userName}</div>;
+}
+
+function MyApp() {
+  return (
+    <RecoilRoot>
+      <ErrorBoundary>
+        <React.Suspense fallback={<div>Loading...</div>}>
+          <CurrentUserInfo />
+        </React.Suspense>
+      </ErrorBoundary>
+    </RecoilRoot>
+  );
+}
+```
+
+1. 异步状态可以被 `Suspense` 捕获。
+2. 异步过程报错可以被 `ErrorBoundary` 捕获。
+
+如果不想用 `Suspense` 阻塞异步，可以换 `useRecoilValueLoadable` 这个 API 在当前组件内管理异步状态：
+
+```jsx
+function UserInfo({ userID }) {
+  const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));
+  switch (userNameLoadable.state) {
+    case "hasValue":
+      return <div>{userNameLoadable.contents}</div>;
+    case "loading":
+      return <div>Loading...</div>;
+    case "hasError":
+      throw userNameLoadable.contents;
+  }
+}
+```
+
+### 依赖外部变量
+
+与 `reselect` 一样，Recoil 也面临状态管理不纯粹的问题，即数据读取依赖外部变量，这样会面临较为复杂的缓存计算问题，甚至还出现了 `re-reselect` 库。
+
+因为 Recoil 本身是原子化状态管理的，所以这个问题相对好解决：
+
+```jsx
+const myMultipliedState = selectorFamily({
+  key: "MyMultipliedNumber",
+  get: (multiplier) => ({ get }) => {
+    return get(myNumberState) * multiplier;
+  },
+});
+
+function MyComponent() {
+  const number = useRecoilValue(myMultipliedState(100));
+}
+```
+
+当外部传参 `multiplier` 与依赖值 `myNumberState` 不变时，就不会重新计算。
+
+Recoil 在 `get` 与 `set` 函数定义 `Atom` 时，内部会自动生成依赖，这个部分做的比较好。
+
+> 依赖外部变量使用了 Family 后缀，比如 selector -> selectorFamily；atom -> atomFamily。
+
+## 3 精读
+
+Recoil 以原子化方式对状态进行分离管理，确实比较契合 Immutable 的编程模式，尤其在缓存处理时非常亮眼，但编程领域中，优势换一个角度看往往就变成了劣势，我们还是要客观评价一下 Recoil。
+
+### Immutable 心智负担
+
+API 较多，在简介中也提到了，这可能是 Immutable 自带的硬伤，而不仅仅是 Recoil 的问题。
+
+Immutable 模式中，对数据流只有读与写两种诉求，**而申明式编程讲究的是数据变化后 UI 自动 Rerender，那么对数据的读自然而然就被赋予了订阅其变化后触发 Rerender 的期待**，但是写与读不同，为什么 `setState` 强调用回调方式写数据？因为回调方式的写不依赖读，有写诉求的组件没必要与读挂上钩，也就是写组件的地方不一定要订阅对应数据。
+
+Recoil 提供了 `useRecoilState` 作为读写双重 API，仅在既读又写的场景使用，而 `useRecoilValue` 仅仅是为了简化 API，替换为 `useRecoilState` 不会有性能损失，而 `useSetRecoilValue` 则必须认真对待，在仅写不读的场景必须严格使用这个 API。
+
+那 `useState` 为什么默认是读写的？因为 `useState` 是单组件状态管理的场景，一个定义在组件内的状态不可能只写不读，但 Recoil 是全局状态解决方案，读写分离的场景下，对于只写的组件很有必要脱离对数据的订阅实现性能最大化。
+
+### 条件访问数据
+
+这也是 Hooks 的通病，由于 Hooks 不能写在条件语句中，因此要利用 Hooks 获取一个带有条件判断的数据时，必须回到 `selector` 模式：
+
+```jsx
+const articleOrReply = selectorFamily({
+  key: "articleOrReply",
+  get: ({ isArticle, id }) => ({ get }) => {
+    if (isArticle) {
+      return get(article(id));
+    }
+
+    return get(reply(id));
+  },
+});
+```
+
+这样的代码其实挺冗余的，其实在 Mutable 模式下可以 `isArticle ? store.articles[id] : store.replies[id]` 就能搞定的模式，必须单独抽一个 `selector` 出来写上头十行代码，显得非常繁琐。
+
+### Recoil 的本质
+
+从 Hooks API 到派生值，这两个核心特点恰巧是对 Context 与 useMemo 的封装。
+
+首先基于 Hooks 的 `useContext` 已经足够轻量易用，可以认为 `atom` 与 `useRecoilState`、`useRecoilValue`、`useSetRecoilValue` 分别对应封装后的 `createContext` 与 `useContext`。
+
+再看 `useMemo`，大部分情况我们可以利用 `useMemo` 造出派生值，这对应了 Recoil 的 `selector` 和 `selectorFamily`。
+
+所以 Recoil 本质更像一个模式化封装库，针对数据驱动易于数据原子化管理的场景，并做到高性能。
+
+## 3 总结
+
+无论你用不用 Recoil，我们都可以从 Recoil 这儿学到 React 状态管理的基本功：
+
+1. 对象的读与写分离，做到最优按需渲染。
+2. 派生的值必须严格缓存，并在命中缓存时引用保证严格相等。
+3. 原子存储的数据相互无关联，所有关联的数据都使用派生值方式推导。
+
+> 讨论地址是：[精读《recoil》· Issue #251 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/251)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,175 @@
+## 1 引言
+
+基于 webpack 构建的大型项目开发速度已经非常慢了，前端开发者已经逐渐习惯忍受超过 100 秒的启动时间，超过 30 秒的 reload 时间。即便被寄予厚望的 webpack5 内置了缓存机制也不会得到质的提升。但放到十年前，等待时间是几百毫秒。
+
+好在浏览器支持了 [ESM import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 模块化加载方案，终于原生支持了文件模块化，这使得本地构建不再需要处理模块化关系并聚合文件，这甚至可以将构建时间从 30 秒降低到 300 毫秒。
+
+当然基于 [ESM import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 的构建框架不止 [snowpack](https://www.snowpack.dev/) 一个，还有比如基于 vue 的 [vite](https://github.com/vitejs/vite)，因为浏览器支持模块化是一个标准，而不与任何框架绑定，未来任何构建工具都会基于此特性开发，这意味着在未来的五年，前端构建一定会回到十年前的速度，这个趋势是明显、确定的。
+
+[ESM import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 带来的最直观的改变有下面三点：
+
+1. `node_modules` 完全不需要参与到构建过程，仅这一点就足以让构建效率提升至少 10 倍。
+2. 模块化交给浏览器管理，修改任何组件都只需做单文件编译，时间复杂度永远是 O(1)，reload 时间与项目大小无关。
+3. 浏览器完全模块化加载文件，不存在资源重复加载问题，这种原生的 TreeShaking 还可以做到访问文件时再编译，做到单文件级别的按需构建。
+
+所以可以说 [ESM import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 模式下的开发效率，能做到与十年前修改 HTML 单文件的零构建效率几乎相当。
+
+## 2 简介 & 精读
+
+snowpack 核心特征：
+
+- 开发模式启动仅需 50ms 甚至更少。
+- 热更新速度非常快。
+- 构建时可以结合任何 bundler，比如 webpack。
+- 内置支持 TS、JSX、CSS Modules 等。
+- 支持自定义构建脚本以及三方插件。
+
+### 安装
+
+```bash
+yarn add --dev snowpack
+```
+
+通过 `snowpack.config.json` 文件配置，并能自动读取 `babel.config.json` 生效 babel 插件。
+
+### 开发调试
+
+调试 `snowpack dev`，编译 `snowpack build`，会自动以 `src/index` 作为应用入口进行编译。
+
+`snowpack dev` 命令几乎是零耗时的，因为文件仅会在被浏览器访问时进行按需编译，因此构建速度是理想的最快速。
+
+当浏览器访问文件时，snowpack 会将文件做如下转换：
+
+```jsx
+// Your Code:
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+// Build Output:
+import * as React from "/web_modules/react.js";
+import * as ReactDOM from "/web_modules/react-dom.js";
+```
+
+目的就是生成一个相对路径，并启动本地服务让浏览器可以访问到这些被 import 的文件。其中 `web_modules` 是 snowpack 对 `node_modules` 构建的结果。
+
+在这之前也会对 Typescript 文件做 tsc 编译，或者 babel 编译。
+
+### 编译
+
+编译命令 `snowpack build` 默认方式与 `snowpack dev` 相同：
+
+<img width=500 src="https://img.alicdn.com/tfs/TB1QeckIuH2gK0jSZJnXXaT1FXa-1467-368.png">
+
+也可以指定以 webpack 作为构建器：
+
+```json
+// snowpack.config.json
+{
+  // Optimize your production builds with Webpack
+  "plugins": [
+    [
+      "@snowpack/plugin-webpack",
+      {
+        /* ... */
+      }
+    ]
+  ]
+}
+```
+
+除了默认构建方式之外，还支持自定义文件处理，通过 `snowpack.config.json` 配置 `scripts` 指定：
+
+```json
+{
+  "extends": "@snowpack/app-scripts-react",
+  "scripts": {
+    "build:scss": "sass $FILE"
+  },
+  "plugins": []
+}
+```
+
+比如上述语法支持了对 `scss` 文件编译的拓展。
+
+**"build:\*": "..."**
+
+对文件后缀进行编译，比如：`"build:js,jsx": "babel --filename $FILE"` 指定了对 `js,jsx` 后缀的文件进行 babel 构建。
+
+**"run:\*": "..."**
+
+仅执行一次，可以用来做 lint，也可以用来配合批量文件处理命令，比如 `tsc`: `"run:tsc": "tsc"`
+
+**"mount:\*": "mount DIR [--to /PATH]"**
+
+将文件部署到某个 URL 地址，比如 `"mount:public": "mount public --to /"` 意味着将 `public` 文件夹下的文件部署到 `/` 这个 URL 地址。
+
+还有 `proxy` 等 API 就不一一列举了，详细可以见 [官方文档](https://www.snowpack.dev/)。
+
+我们可以从构建命令体会到 snowpack 的理念，**将源码以流式方式编译后，直接部署到本地 server 提供的 URL 地址，浏览器通过一个 main 入口以 [ESM import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 的方式加载这些文件。**
+
+所以所有加载与构建逻辑都是按需的，snowpack 要做的只是将本地文件逐个构建好并启动本地服务给浏览器调用。
+
+前端开发离不开 `node_modules`，snowpack 通过 `snowpack install` 的方式支持了这一点。
+
+### snowpack install
+
+这个命令已经被 `snowpack dev` 内置了，所以 `snowpack install` 仅用来理解原理。
+
+以下是 `snowpack install` 执行的结果：
+
+```js
+✔ snowpack install complete. [0.88s]
+
+  ⦿ web_modules/                 size       gzip       brotli
+    ├─ react-dom.js              128.93 KB  39.89 KB   34.93 KB
+    └─ react.js                  0.54 KB    0.32 KB    0.28 KB
+  ⦿ web_modules/common/ (Shared)
+    └─ index-8961bd84.js         10.83 KB   3.96 KB    3.51 KB
+```
+
+可以看到，`snowpack` 遍历项目源码对 `node_modules` 的访问，并对 `node_modules` 进行了 Web 版 `install`，可以认为 `npm install` 是将 npm 包安装到了本地，而 `snowpack install` 是将 `node_modules` 安装到了 Web API，所以这个命令只需构建一次，`node_modules` 就变成了可以按需被浏览器加载的静态资源文件。
+
+同时源码中对 npm 包的引用都会转换为对 `web_modules` 这个静态资源地址的引用：
+
+```jsx
+import * as ReactDOM from "react-dom";
+
+// 转换
+import * as React from "/web_modules/react.js";
+```
+
+但同时可以看到 snowpack 对前端生态的高要求，如果某些包通过 webpack 别名设置了一些 magic 映射，就无法通过文件路径直接映射，所以 snowpack 生态成熟需要一段时间，但模块标准化一定是趋势，不规范的包在未来几年内会逐步被淘汰。
+
+### 2020 年适合使用 snowpack 吗
+
+答案是还不适合用在生产环境。
+
+当然用在开发环境还是可以的，但需要承担三个风险：
+
+1. 开发与生产环境构建结果不一致的风险。
+2. 项目生态存在非 [ESM import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 模块化包而导致大量适配成本的风险。
+3. 项目存在大量 webpack 插件的 magic 魔法，导致标准化后丢失定制打包逻辑的风险。
+
+但可以看到，这些风险的原因都是非标准化造成的。我们站在 2020 年看以前浏览器非标准化 API 适配与兼容工作，可能会觉得不可思议，为什么要与那些陈旧非标准化的语法做斗争；相应的，2030 年看 2020 年的今天可能也觉得不可思议，为什么很多项目存在大量 magic 自定义构建逻辑，明明标准化构建逻辑已经完全够用了 :P。
+
+所以我们要看到未来的趋势，也要理解当下存在的问题，不要在生态尚未成熟的时候贸然使用，但也要跟进前端规范化的步伐，在合适的时机跟上节奏，毕竟 bundleless 模式带来的开发效率提升是非常明显的。
+
+## 3 总结
+
+前端发展到 2020 年这个时间点，代码规范已经基本稳定，工程化要做的事情已经从新增功能逐渐转移到研发提效上了，因此提升开发时热更新速度、构建速度是当下前端工程化的重中之重。
+
+snowpack 代表的 bundleless 方案肯定是光明的未来，带来的构建提效非常明显，人力充足的前端团队与不需要考虑浏览器兼容性的敏捷小团队都已经开始实践 bundleless 方案了。
+
+但对于业务需要兼容各浏览器的大团队来说，目前 bundleless 方案仅可用于开发环境，生产环境还是需要 webpack 打包，因此 webpack 生态还可以继续繁荣几年，直到大的前端团队也抛弃它为止。
+
+如果看未来十年，可能前端工程化构建脚本都不需要了，浏览器可以直接运行源码。在这一点上，以 snowpack 为代表的 bundleless 模式着实跨越了一大步。
+
+> 讨论地址是：[精读《snowpack》· Issue #252 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/252)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,398 @@
+## 1 引言
+
+BI 平台是阿里数据中台团队非常重要的平台级产品，要保证报表编辑与浏览的良好体验，性能优化是必不可少的。
+
+当前 BI 工具普遍是报表形态，要知道报表形态可不仅仅是一张张图表组件，与这些组件关联的筛选条件和联动关系错综复杂，任何一个筛选条件变化就会导致其关联项重新取数并重渲染组件，而报表数据量非常大，一个表格组件加载百万量级的数据稀松平常，为了维持这么大量级数据量下的正常展示，按需渲染是必须要做的功课。
+
+这里说的按需渲染不是指 ListView 无限滚动，因为报表的布局模式有流式布局、磁贴布局和自由布局三套，每种布局风格差异很大，无法用固定的公式计算组件是否可见，因此我们选择初始化组件全量渲染，阻止非首屏内组件的重渲染。因为初始条件下还没有获取数据，全量渲染不会造成性能问题，这是这套方案成立的前提。
+
+所以我今天就专门介绍如何利用 DOM 判断组件在画布中是否可见这个技术方案，从架构设计与代码抽象的角度一步步分解，不仅希望你能轻松理解这个技术方案如何实现，也希望你能掌握这其中的诀窍，学会举一反三。
+
+## 2 精读
+
+我们以 React 框架为例，做按需渲染的思维路径是这样的：
+
+得到组件 `active` 状态 -> 阻塞非 `active` 组件的重渲染。
+
+这里我选择从结果入手，先考虑如何阻塞组件渲染，再一步步推导出判断组件是否可见这个函数怎么写。
+
+### 阻塞组件重渲染
+
+我们需要一个 `RenderWhenActive` 组件，支持一个 `active` 参数，当 `active` 为 true 时这一层是透明的，当 `active` 为 false 时阻塞所有渲染。
+
+再具体描述一下，其效果是这样的：
+
+1. inActive 时，任何 props 变化都不会导致组件渲染。
+2. 从 inActive 切换到 active 时，之前作用于组件的 props 要立即生效。
+3. 如果切换到 active 后 props 没有变化，也不应该触发重渲染。
+4. 从 active 切换到 inActive 后不应触发渲染，且立即阻塞后续重渲染。
+
+目前 Function Component 做不到这一点，我们仍需借助 Class Component 的 `shouldComponentUpdate` 做到这一点，因为 Class Component 阻塞渲染时，会将最新 props 存储下来，而 Function Component 完全没有内部状态，目前还无法胜任这项工作。
+
+我们可以写一个 `RenderWhenActive` 组件轻松实现此功能：
+
+```jsx
+class RenderWhenActive extends React.Component {
+  public shouldComponentUpdate(nextProps) {
+    return nextProps.active;
+  }
+
+  public render() {
+    return this.props.children
+  }
+}
+```
+
+### 获取组件 active 状态
+
+在进一步思考之前，我们先不要掉到 “如何判断组件是否显示” 这个细节中，可以先假设 “已经有了这样一个函数”，我们应该如何调用。
+
+很显然我们需要一个自定义 Hook：`useActive` 判断组件是否是激活态，并拿到 `active` 返回值传递给 `RenderWhenActive` 组件：
+
+```jsx
+const ComponentLoader = ({ children }) => {
+  const active = useActive();
+
+  return <RenderWhenActive active={active}>{children}</RenderWhenActive>;
+};
+```
+
+这样，渲染引擎利用 `ComponentLoader` 渲染的任何组件就具备了按需渲染的功能。
+
+### 实现 useActive
+
+到现在，组件与 Hook 侧的流程已经完整串起来了，我们可以聚焦于如何实现 `useActive` 这个 Hook。
+
+利用 Hooks 的 API，可以在组件渲染完毕后利用 `useEffect` 判断组件是否 Active，并利用 `useState` 存储这个状态：
+
+```jsx
+export function useActive(domId: string) {
+  // 所有元素默认 unActive
+  const [active, setActive] = React.useState(false);
+
+  React.useEffect(() => {
+    const visibleObserve = new VisibleObserve(domId, "rootId", setActive);
+
+    visibleObserve.observe();
+
+    return () => visibleObserve.unobserve();
+  }, [domId]);
+
+  return active;
+}
+```
+
+初始化时，所有组件 active 状态都是 false，然而这种状态在 `shouldComponentUpdate` 并不会阻塞第一次渲染，因此组件的 dom 节点初始化仍会渲染出来。
+
+在 `useEffect` 阶段注册了 `VisibleObserve` 这个自定义 Class，用来监听组件 dom 节点在其父级节点 `rootId` 内是否可见，并在状态变更时通过第三个回调抛出，这里将 `setActive` 作为第三个参数，可以及时改变当前组件 active 状态。
+
+`VisibleObserve` 这个函数拥有 `observe` 与 `unobserve` 两个 API，分别是启动监听与取消监听，利用 `useEffect` 销毁时执行 return callback 的特性，监听与销毁机制也完成了。
+
+下一步就是如何实现最核心的 `VisibleObserve` 函数，用来监听组件是否可见。
+
+### 监听组件是否可见的准备工作
+
+在实现 `VisibleObserve` 之前，想一下有几种方法实现呢？可能你脑海中冒出了很多种奇奇怪怪的方案。是的，判断组件在某个容器内是否可见有许多种方案，即便从功能上能找到最优解，但从兼容性角度来看也无法找到完美的方案，因此这是一个拥有多种实现可能性的函数，在不同版本的浏览器采用不同方案才是最佳策略。
+
+处理这种情况的方法之一，就是做一个抽象类，让所有实际方法都继承并实现抽象类，这样我们就拥有了多套 “相同 API 的不同实现”，以便在不同场景随时切换使用。
+
+利用 `abstract` 创建抽象类 `AVisibleObserve`，实现构造函数并申明两个 public 的重要函数 `observe` 与 `unobserve`：
+
+```jsx
+/**
+ * 监听元素是否可见的抽象类
+ */
+abstract class AVisibleObserve {
+  /**
+   * 监听元素的 DOM ID
+   */
+  protected targetDomId: string;
+
+  /**
+   * 可见范围根节点 DOM ID
+   */
+  protected rootDomId: string;
+
+  /**
+   * Active 变化回调
+   */
+  protected onActiveChange: (active?: boolean) => void;
+
+  constructor(targetDomId: string, rootDomId: string, onActiveChange: (active?: boolean) => void) {
+    this.targetDomId = targetDomId;
+    this.rootDomId = rootDomId;
+    this.onActiveChange = onActiveChange;
+  }
+
+  /**
+   * 开始监听
+   */
+  abstract observe(): void;
+
+  /**
+   * 取消监听
+   */
+  abstract unobserve(): void;
+}
+```
+
+这样我们就可以实现多套方案。稍加思索可以发现，我们只要两套方案，一套是利用 `setInterval` 实现的轮询检测的笨方法，一种是利用浏览器高级 API `IntersectionObserver` 实现的新潮方法，由于后者有兼容性要求，前者就作为兜底方案实现。
+
+因此我们可以定义两套对应方法：
+
+```jsx
+class IntersectionVisibleObserve extends AVisibleObserve {
+  constructor(/**/) {
+    super(targetDomId, rootDomId, onActiveChange);
+  }
+
+  observe() {
+    // balabala..
+  }
+
+  unobserve() {
+    // balabala..
+  }
+}
+
+class SetIntervalVisibleObserve extends AVisibleObserve {
+  constructor(/**/) {
+    super(targetDomId, rootDomId, onActiveChange);
+  }
+
+  observe() {
+    // balabala..
+  }
+
+  unobserve() {
+    // balabala..
+  }
+}
+```
+
+最后再做一个总类作为调用入口：
+
+```jsx
+/**
+ * 监听元素是否可见总类
+ */
+export class VisibleObserve extends AVisibleObserve {
+  /**
+   * 实际 VisibleObserve 类
+   */
+  private actualVisibleObserve: AVisibleObserve = null;
+
+  constructor(targetDomId: string, rootDomId: string, onActiveChange: (active?: boolean) => void) {
+    super(targetDomId, rootDomId, onActiveChange);
+
+    // 根据浏览器 API 兼容程度选用不同 Observe 方案
+    if ('IntersectionObserver' in window) {
+      // 最新 IntersectionObserve 方案
+      this.actualVisibleObserve = new IntersectionVisibleObserve(targetDomId, rootDomId, onActiveChange);
+    } else {
+      // 兼容的 SetInterval 方案
+      this.actualVisibleObserve = new SetIntervalVisibleObserve(targetDomId, rootDomId, onActiveChange);
+    }
+  }
+
+  observe() {
+    this.actualVisibleObserve.observe();
+  }
+
+  unobserve() {
+    this.actualVisibleObserve.unobserve();
+  }
+}
+```
+
+在构造函数就判断了当前浏览器是否支持 `IntersectionObserver` 这个 API，然而无论何种方案创建的实例都继承于 `AVisibleObserve`，所以我们可以用统一的 `actualVisibleObserve` 成员变量存放。
+
+`observe` 与 `unobserve` 阶段都可以无视具体类的实现，直接调用 `this.actualVisibleObserve.observe()` 与 `this.actualVisibleObserve.unobserve()` 这两个 API。
+
+这里体现的思想是，父类关心接口层 API，子类关心基于这套接口 API 如何具体实现。
+
+接下来我们看看低配版（兼容）与高配版（原生）分别如何实现。
+
+### 监听组件是否可见 - 兼容版本
+
+兼容版本模式中，需要定义一个额外成员变量 `interval` 存储 SetInterval 引用，在 `unobserve` 的时候 `clearInterval`。
+
+其判断可见函数我抽象到了 `judgeActive` 函数中，核心思想是判断两个矩形（容器与要判断的组件）是否存在包含关系，如果包含成立则代表可见，如果包含不成立则不可见。
+
+下面是完整实现函数：
+
+```jsx
+class SetIntervalVisibleObserve extends AVisibleObserve {
+  /**
+   * Interval 引用
+   */
+  private interval: number;
+
+  /**
+   * 检查是否可见的时间间隔
+   */
+  private checkInterval = 1000;
+
+  constructor(targetDomId: string, rootDomId: string, onActiveChange: (active?: boolean) => void) {
+    super(targetDomId, rootDomId, onActiveChange);
+  }
+
+  /**
+   * 判断元素是否可见
+   */
+  private judgeActive() {
+    // 获取 root 组件 rect
+    const rootComponentDom = document.getElementById(this.rootDomId);
+    if (!rootComponentDom) {
+      return;
+    }
+    // root 组件 rect
+    const rootComponentRect = rootComponentDom.getBoundingClientRect();
+    // 获取当前组件 rect
+    const componentDom = document.getElementById(this.targetDomId);
+    if (!componentDom) {
+      return;
+    }
+    // 当前组件 rect
+    const componentRect = componentDom.getBoundingClientRect();
+
+    // 判断当前组件是否在 root 组件可视范围内
+    // 长度之和
+    const sumOfWidth =
+      Math.abs(rootComponentRect.left - rootComponentRect.right) + Math.abs(componentRect.left - componentRect.right);
+    // 宽度之和
+    const sumOfHeight =
+      Math.abs(rootComponentRect.bottom - rootComponentRect.top) + Math.abs(componentRect.bottom - componentRect.top);
+
+    // 长度之和 + 两倍间距（交叉则间距为负）
+    const sumOfWidthWithGap = Math.abs(
+      rootComponentRect.left + rootComponentRect.right - componentRect.left - componentRect.right,
+    );
+    // 宽度之和 + 两倍间距（交叉则间距为负）
+    const sumOfHeightWithGap = Math.abs(
+      rootComponentRect.bottom + rootComponentRect.top - componentRect.bottom - componentRect.top,
+    );
+    if (sumOfWidthWithGap <= sumOfWidth && sumOfHeightWithGap <= sumOfHeight) {
+      // 在内部
+      this.onActiveChange(true);
+    } else {
+      // 在外部
+      this.onActiveChange(false);
+    }
+  }
+
+  observe() {
+    // 监听时就判断一次元素是否可见
+    this.judgeActive();
+
+    this.interval = setInterval(this.judgeActive, this.checkInterval);
+  }
+
+  unobserve() {
+    clearInterval(this.interval);
+  }
+}
+```
+
+根据容器 `rootDomId` 与组件 `targetDomId`，我们可以拿到其对应 DOM 实例，并调用 `getBoundingClientRect` 拿到其对应矩形的位置与宽高。
+
+算法思路如下：
+
+设容器为 root，组件为 component。
+
+1. 计算 root 与 component 长度之和 `sumOfWidth` 与宽度之和 `sumOfHeight`。
+2. 计算 root 与 component 长度之和 + 两倍间距 `sumOfWidthWithGap` 与 宽度之和 + 两倍间距 `sumOfHeightWithGap`。
+3. `sumOfWidthWithGap - sumOfWidth` 的差值就是横向 gap 距离，`sumOfHeightWithGap - sumOfHeight` 的差值就是横向 gap 距离，两个值都为负数表示在内部。
+
+其中的关键是，从横向角度来看，下面的公式可以理解为宽度之和 + 两倍的宽度间距：
+
+```jsx
+// 长度之和 + 两倍间距（交叉则间距为负）
+const sumOfWidthWithGap = Math.abs(
+  rootComponentRect.left +
+    rootComponentRect.right -
+    componentRect.left -
+    componentRect.right
+);
+```
+
+而 `sumOfWidth` 是宽度之和，这之间的差值就是两倍间距值，正数表示横向没有交集。当横纵两个交集都是负数时，代表存在交叉或者包含在内部。
+
+### 监听组件是否可见 - 原生版本
+
+如果浏览器支持 `IntersectionObserver` 这个 API 就好办多了，以下是完整代码：
+
+```jsx
+class IntersectionVisibleObserve extends AVisibleObserve {
+  /**
+   * IntersectionObserver 实例
+   */
+  private intersectionObserver: IntersectionObserver;
+
+  constructor(targetDomId: string, rootDomId: string, onActiveChange: (active?: boolean) => void) {
+    super(targetDomId, rootDomId, onActiveChange);
+
+    this.intersectionObserver = new IntersectionObserver(
+      changes => {
+        if (changes[0].intersectionRatio > 0) {
+          onActiveChange(true);
+        } else {
+          onActiveChange(false);
+
+          // 因为虚拟 dom 更新导致实际 dom 更新，也会在此触发，判断 dom 丢失则重新监听
+          if (!document.body.contains(changes[0].target)) {
+            this.intersectionObserver.unobserve(changes[0].target);
+            this.intersectionObserver.observe(document.getElementById(this.targetDomId));
+          }
+        }
+      },
+      {
+        root: document.getElementById(rootDomId),
+      },
+    );
+  }
+
+  observe() {
+    if (document.getElementById(this.targetDomId)) {
+      this.intersectionObserver.observe(document.getElementById(this.targetDomId));
+    }
+  }
+
+  unobserve() {
+    this.intersectionObserver.disconnect();
+  }
+}
+```
+
+通过 `intersectionRatio > 0` 就可以判断元素是否出现在父级容器中，如果 `intersectionRatio === 1` 则表示组件完整出现在容器内，此处我们的要求是任意部分出现就 active。
+
+有一点要注意的是，这个判断与 SetInterval 不同，由于 React 虚拟 DOM 可能会更新 DOM 实例，导致 `IntersectionObserver.observe` 监听的 DOM 元素被销毁后，导致后续监听失效，因此需要在元素隐藏时加入下面的代码：
+
+```jsx
+// 因为虚拟 dom 更新导致实际 dom 更新，也会在此触发，判断 dom 丢失则重新监听
+if (!document.body.contains(changes[0].target)) {
+  this.intersectionObserver.unobserve(changes[0].target);
+  this.intersectionObserver.observe(document.getElementById(this.targetDomId));
+}
+```
+
+1. 当元素判断不在可视区域时，也包含了元素被销毁。
+2. 因此通过 `body.contains` 判断元素是否被销毁，如果被销毁则重新监听新的 DOM 实例。
+
+## 3 总结
+
+总结一下，按需渲染的逻辑的适用面不仅仅在渲染引擎，但对于 ProCode 场景直接编写的代码中，要加入这段逻辑就显得侵入性较强。
+
+或许可视区域内按需渲染可以做到前端开发框架内部，虽然不属于标准框架功能，但也不完全属于业务功能。
+
+这次留下一个思考题，如果让手写的 React 代码具备按需渲染功能，怎么设计更好呢？
+
+> 讨论地址是：[精读《用 React 做按需渲染》· Issue #254 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/254)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
@@ -0,0 +1,152 @@
+## 1 引言
+
+使用 React Hooks 的时候，经常出现执行次数过多甚至死循环的情况，我们可以利用 [use-what-changed](https://github.com/simbathesailor/use-what-changed) 进行依赖分析，找到哪个变量引用一直在变化。
+
+据一个例子，比如你尝试在 Class 组件内部渲染 Function 组件，Class 组件是这么写的：
+
+```jsx
+class Parent extends React.PureComponent {
+  render() {
+    return <Child style={{ color: "red" }} />;
+  }
+}
+```
+
+子组件是这么写的：
+
+```jsx
+const Child = ({ style }) => {
+  const [localStyle, setLocalStyle] = useState();
+
+  useEffect(() => {
+    setLocalStyle(style);
+  }, [style]);
+
+  return null;
+};
+```
+
+那么恭喜你，写出了一个最简单的死循环。这个场景里，我们本意是利用 `useEffect` 将 `props.style` 同步到本地状态 `localStyle` 中，但执行 `setLocalStyle` 会导致当前组件重渲染，由于父级 `style={{ color: "red" }}` 的写法，每次重渲染拿到的 `props.style` 引用都会变化，因此再次触发了 `useEffect` 回调执行，进而再次执行到 `setLocalStyle` 触发死循环。
+
+仅仅打印出值是看不出变化的，引用的改变很隐蔽，为了判断是否变化还得存储上一次的值做比较，非常麻烦，use-what-changed 就是为了解决这个麻烦的。
+
+## 2 精读
+
+use-what-changed 使用方式如下：
+
+```jsx
+function App() {
+  useWhatChanged([a, b, c, d]); // debugs the below useEffect
+
+  React.useEffect(() => {
+    // console.log("some thing changed , need to figure out")
+  }, [a, b, c, d]);
+}
+```
+
+将参数像依赖数组一样传入，刷新页面就可以在控制台看到引用或值是否变化，如果变化，对应行会展示 ✅ 并打印出上次的值与当前值：
+
+<img width=300 src="https://img.alicdn.com/tfs/TB1SN7JKbj1gK0jSZFOXXc7GpXa-908-460.png">
+
+第一步是存储上一次依赖项的值，利用 `useRef` 实现：
+
+```jsx
+function useWhatChanged(dependency?: any[]) {
+  const dependencyRef = React.useRef(dependency);
+}
+```
+
+然后利用 `useEffect`，对比 `dependency` 与 `dependencyRef` 的引用即可找到变化项：
+
+```jsx
+React.useEffect(() => {
+  let changed = false;
+  const whatChanged = dependency
+    ? dependency.reduce((acc, dep, index) => {
+        if (dependencyRef.current && dep !== dependencyRef.current[index]) {
+          changed = true;
+
+          const oldValue = dependencyRef.current[index];
+          dependencyRef.current[index] = dep;
+          acc[`"✅" ${index}`] = {
+            "Old Value": getPrintableInfo(oldValue),
+            "New Value": getPrintableInfo(dep),
+          };
+
+          return acc;
+        }
+
+        acc[`"⏺" ${index}`] = {
+          "Old Value": getPrintableInfo(dep),
+          "New Value": getPrintableInfo(dep),
+        };
+
+        return acc;
+      }, {})
+    : {};
+
+  if (isDevelopment) {
+    console.table(whatChanged);
+  }
+}, [dependency]);
+```
+
+1. 直接对比 deps 引用，不想等则将 `changed` 设为 true。
+2. 调试模式下，利用 console.table 打印出表格。
+3. 依赖项是 dependency，当依赖项变化时才打印 whatChanged。
+
+以上就是其源码的核心逻辑，当然我们还可以简化输出，仅当有引用变化时才打印表格，否则只输出简单的 Log 信息：
+
+```jsx
+if (isDevelopment) {
+  if (changed) {
+    console.table(whatChanged);
+  } else {
+    console.log(whatChanged);
+  }
+}
+```
+
+### babel 插件
+
+最后 use-what-changed 还提供了 babel 插件，只通过注释就能打印 `useMemo`、`useEffect` 等依赖变化信息。babel 配置如下：
+
+```js
+{
+  "plugins": [
+    [
+      "@simbathesailor/babel-plugin-use-what-changed",
+      {
+        "active": process.env.NODE_ENV === "development" // boolean
+      }
+    ]
+  ]
+}
+```
+
+使用方式简化为：
+
+```jsx
+// uwc-debug
+React.useEffect(() => {
+  // console.log("some thing changed , need to figure out")
+}, [a, b, c, d]);
+```
+
+将 Hooks 的 deps 数组直接转化为 use-what-changed 的入参。
+
+## 3 总结
+
+[use-what-changed](https://github.com/simbathesailor/use-what-changed) 补充了 Hooks 依赖变化的调试方法，对于 React 组件重渲染分析可以利用 React Dev Tool，可以参考 [精读《React 性能调试》](https://github.com/dt-fe/weekly/blob/v2/149.%20%E7%B2%BE%E8%AF%BB%E3%80%8AReact%20%E6%80%A7%E8%83%BD%E8%B0%83%E8%AF%95%E3%80%8B.md)。
+
+还有哪些实用的 Hooks 调试工具呢？欢迎分享。
+
+> 讨论地址是：[精读《use-what-changed 源码》· Issue #256 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/256)
+
+**如果你想参与讨论，请 [点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。**
+
+> 关注 **前端精读微信公众号**
+
+<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
+
+> 版权声明：自由转载-非商用-非衍生-保持署名（[创意共享 3.0 许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）
Author	SHA1	Message	Date
ascoders	53d5ee1960	155	2020-06-15 09:42:30 +08:00
ascoders	92a8dfc55c	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2020-06-08 09:53:32 +08:00
ascoders	c59f46cc1d	154	2020-06-08 09:53:17 +08:00
黄子毅	ef3904a2f6	Merge pull request #253 from justjavac/patch-1 fix: snowpack issue 链接	2020-06-01 23:05:43 +08:00
迷渡	994c5844d9	fix: snowpack issue 链接	2020-06-01 21:02:00 +08:00
ascoders	3881e51b08	153	2020-06-01 09:49:07 +08:00
ascoders	815ae1367a	fix typo	2020-05-25 18:20:56 +08:00
ascoders	84ed47dbdf	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2020-05-25 09:29:02 +08:00
ascoders	252980724a	152	2020-05-25 09:28:53 +08:00
黄子毅	225aab476d	Merge pull request #250 from spiritree/patch-1 Update 148. 精读《React Error Boundaries》.md	2020-05-22 18:29:16 +08:00
深樹	f065539266	Update 148. 精读《React Error Boundaries》.md FQA -> FAQ	2020-05-22 16:55:03 +08:00
ascoders	f8d81fc3f5	151	2020-05-18 08:40:17 +08:00
ascoders	43e264cc07	update	2020-05-11 13:48:07 +08:00
ascoders	957737959f	150	2020-05-11 09:39:14 +08:00
ascoders	000e6511e6	149	2020-04-27 13:01:48 +08:00
ascoders	a652284bbc	148	2020-04-20 09:31:08 +08:00
ascoders	1b88e5ac06	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2020-04-13 09:35:39 +08:00
ascoders	79ba9ec6a1	147	2020-04-13 09:35:36 +08:00
黄子毅	a4acf09d8b	Merge pull request #244 from lz-lee/patch-1 Update 145.精读《React Router v6》.md	2020-04-10 14:57:48 +08:00
lz-lee	872ef2e346	Update 145.精读《React Router v6》.md	2020-04-09 10:44:37 +08:00
黄子毅	8795ae0aaa	Merge pull request #243 from Kerminate/v2 fix: 修复引用传参	2020-04-07 11:22:51 +08:00
Kerminate	23c4190d7e	fix: 修复引用传参	2020-04-07 10:25:59 +08:00
Kerminate	75d0109102	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2020-04-07 10:23:27 +08:00
Kerminate	893bb2d97a	Merge branch 'master' of https://github.com/dt-fe/weekly into v2	2020-04-07 10:22:44 +08:00
ascoders	0c2c8c6c03	146	2020-04-07 09:32:13 +08:00
ascoders	97a313ca1e	145	2020-03-30 09:30:17 +08:00
黄子毅	3fd57e26b8	Merge pull request #240 from LiuL0703/patch-6 fix:typo	2020-03-24 11:08:49 +08:00
Linear-Enter	aee6f6d6bb	fix:typo	2020-03-23 10:03:02 +08:00
ascoders	00fd6e541a	144	2020-03-23 09:37:11 +08:00
ascoders	6cc1af4ca9	143	2020-03-23 09:36:17 +08:00
ascoders	ed27df0fe2	update	2020-03-16 09:02:46 +08:00
ascoders	14ebdf19ca	142	2020-03-09 09:13:28 +08:00
ascoders	e89a1b0c7e	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2020-03-02 09:16:52 +08:00
ascoders	a1bd0ec7a5	141	2020-03-02 09:16:38 +08:00
黄子毅	82d3665606	Merge pull request #235 from changyuqing/patch-1 Update 140.精读《结合 React 使用原生 Drag Drop API》.md	2020-02-26 18:36:51 +08:00
changyuqing	67a289e750	Update 140.精读《结合 React 使用原生 Drag Drop API》.md	2020-02-26 15:16:28 +08:00
ascoders	1b0a7ed8ea	finish 140	2020-02-24 09:08:57 +08:00
ascoders	21ba3e0640	Merge branch 'v2' of https://github.com/dt-fe/weekly into v2	2020-02-17 09:22:38 +08:00
ascoders	d5159b914e	139	2020-02-17 09:20:48 +08:00
黄子毅	c45a3d09d5	Merge pull request #232 from vivaxy/patch-1 Update link to 《mysql 上下文无关文法集合》	2020-02-12 12:12:36 +08:00
vivaxy	c3ea6f2b17	Update link to 《mysql 上下文无关文法集合》	2020-02-12 10:02:35 +08:00
ascoders	fb98d1febc	fix typo	2020-02-11 13:07:25 +08:00
黄子毅	d8f2e0977d	Merge pull request #163 from vivaxy/patch-1 Update 64.精读《手写 SQL 编译器 - 词法分析》.md	2019-06-07 22:05:26 +08:00
vivaxy	f4e75f5e21	Update 64.精读《手写 SQL 编译器 - 词法分析》.md Fix syntax error	2019-06-07 14:30:27 +08:00