162

fix: snowpack issue 链接

148. 精读《React Error Boundaries》.md

@@ -112,7 +112,7 @@ const Child = (props) => {
 
 > componentDidCatch and getDerivedStateFromError: There are no Hook equivalents for these methods yet, but they will be added soon.
 
-所以这里的理解要注意一下，另外 React 官方文档 [Hooks FQA](https://reactjs.org/docs/hooks-faq.html#how-do-lifecycle-methods-correspond-to-hooks) 有很多宝藏，建议抽时间逐条阅读。
+所以这里的理解要注意一下，另外 React 官方文档 [Hooks FAQ](https://reactjs.org/docs/hooks-faq.html#how-do-lifecycle-methods-correspond-to-hooks) 有很多宝藏，建议抽时间逐条阅读。
 
 ## 4 总结
 

149. 精读《React 性能调试》.md

@@ -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)）

150. 精读《Deno 1.0 你需要了解的》.md

@@ -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)）

151. 精读《@umijs use-request》源码.md

@@ -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)）

152. 精读《recoil》.md

@@ -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)）

153. 精读《snowpack》.md

@@ -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)）

154. 精读《用 React 做按需渲染》.md

@@ -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)）

155. 精读《use-what-changed 源码》.md

@@ -0,0 +1,154 @@
+## 1 引言
+
+使用 React Hooks 的时候，经常出现执行次数过多甚至死循环的情况，我们可以利用 [use-what-changed](https://github.com/simbathesailor/use-what-changed) 进行依赖分析，找到哪个变量引用一直在变化。
+
+据一个例子，比如你尝试在 Class 组件内部渲染 Function 组件，Class 组件是这么写的：
+
+```jsx
+class Parent extends React.PureComponent {
+  state = {
+    text: "text",
+  };
+
+  render() {
+    return <Child setText={(text) => this.setState({ text })} />;
+  }
+}
+```
+
+子组件是这么写的：
+
+```jsx
+const Child = ({ setText }) => {
+  useEffect(() => {
+    setText("ok");
+  }, [setText]);
+
+  return null;
+};
+```
+
+那么恭喜你，写出了一个最简单的死循环。这个场景里，我们本意是利用 `useEffect` 调用 `props.setText` 更新父组件的 `text`，但执行 `props.setText` 会导致父组件重渲染，由于父级 `setText={(text) => this.setState({ text })}` 的写法，每次重渲染拿到的 `props.setText` 引用都会变化，因此再次触发了 `useEffect` 回调执行，进而触发死循环。
+
+仅仅打印出值是看不出变化的，引用的改变很隐蔽，为了判断是否变化还得存储上一次的值做比较，非常麻烦，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)）

156. 精读《react-intersection-observer 源码》.md

@@ -0,0 +1,272 @@
+## 1 引言
+
+[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 可以轻松判断元素是否可见，在之前的 [精读《用 React 做按需渲染》](https://github.com/dt-fe/weekly/blob/v2/154.%20%E7%B2%BE%E8%AF%BB%E3%80%8A%E7%94%A8%20React%20%E5%81%9A%E6%8C%89%E9%9C%80%E6%B8%B2%E6%9F%93%E3%80%8B.md) 中介绍了原生 API 的方法，这次刚好看到其 React 封装版本 [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer)，让我们看一看 React 封装思路。
+
+## 2 简介
+
+[react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) 提供了 Hook `useInView` 判断元素是否在可视区域内，API 如下：
+
+```jsx
+import React from "react";
+import { useInView } from "react-intersection-observer";
+
+const Component = () => {
+  const [ref, inView] = useInView();
+
+  return (
+    <div ref={ref}>
+      <h2>{`Header inside viewport ${inView}.`}</h2>
+    </div>
+  );
+};
+```
+
+由于判断元素是否可见是基于 dom 的，所以必须将 `ref` 回调函数传递给 **代表元素轮廓的 DOM 元素**，上面的例子中，我们将 `ref` 传递给了最外层 DIV。
+
+`useInView` 还支持下列参数：
+
+- `root`：检测是否可见基于的视窗元素，默认是整个浏览器 viewport。
+- `rootMargin`：root 边距，可以在检测时提前或者推迟固定像素判断。
+- `threshold`：是否可见的阈值，范围 0 ～ 1，0 表示任意可见即为可见，1 表示完全可见即为可见。
+- `triggerOnce`：是否仅触发一次。
+
+## 3 精读
+
+首先从入口函数 `useInView` 开始解读，这是一个 Hook，利用 `ref` 存储上一次 DOM 实例，`state` 则存储 `inView` 元素是否可见的 boolean 值：
+
+```jsx
+export function useInView(
+  options: IntersectionOptions = {},
+): InViewHookResponse {
+  const ref = React.useRef<Element>()
+  const [state, setState] = React.useState<State>(initialState)
+
+  // 中间部分..
+
+  return [setRef, state.inView, state.entry]
+}
+```
+
+当组件 ref 被赋值时会调用 `setRef`，回调 `node` 是新的 DOM 节点，因此先 `unobserve(ref.current)` 取消旧节点的监听，再 `observe(node)` 对新节点进行监听，最后 `ref.current = node` 更新旧节点：
+
+```jsx
+// 中间部分 1
+const setRef = React.useCallback(
+  (node) => {
+    if (ref.current) {
+      unobserve(ref.current);
+    }
+
+    if (node) {
+      observe(
+        node,
+        (inView, intersection) => {
+          setState({ inView, entry: intersection });
+
+          if (inView && options.triggerOnce) {
+            // If it should only trigger once, unobserve the element after it's inView
+            unobserve(node);
+          }
+        },
+        options
+      );
+    }
+
+    // Store a reference to the node, so we can unobserve it later
+    ref.current = node;
+  },
+  [options.threshold, options.root, options.rootMargin, options.triggerOnce]
+);
+```
+
+另一段是，当 `ref` 不存在时会清空 `inView` 状态，毕竟当不存在监听对象时，inView 值只有重设为默认 false 才合理：
+
+```jsx
+// 中间部分 2
+useEffect(() => {
+  if (!ref.current && state !== initialState && !options.triggerOnce) {
+    // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce`)
+    // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView
+    setState(initialState);
+  }
+});
+```
+
+这就是入口文件的逻辑，我们可以看到还有两个重要的函数 `observe` 与 `unobserve`，这两个函数的实现在 [intersection.ts](https://github.com/thebuilder/react-intersection-observer/blob/master/src/intersection.ts) 文件中，这个文件有三个核心函数：`observe`、`unobserve`、`onChange`。
+
+- `observe`：监听 element 是否在可视区域。
+- `unobserve`：取消监听。
+- `onChange`：处理 `observe` 变化的回调。
+
+先看 `observe`，对于同一个 root 下的监听会做合并操作，因此需要生成 `observerId` 作为唯一标识，这个标识由 `getRootId`、`rootMargin`、`threshold` 共同决定。
+
+对于同一个 root 的监听下，拿到 `new IntersectionObserver()` 创建的 `observerInstance` 实例，调用 `observerInstance.observe` 进行监听。这里存储了两个 Map - `OBSERVER_MAP` 与 `INSTANCE_MAP`，前者是保证同一 root 下 `IntersectionObserver` 实例唯一，后者存储了组件 `inView` 以及回调等信息，在 `onChange` 函数使用：
+
+```jsx
+export function observe(
+  element: Element,
+  callback: ObserverInstanceCallback,
+  options: IntersectionObserverInit = {}
+) {
+  // IntersectionObserver needs a threshold to trigger, so set it to 0 if it's not defined.
+  // Modify the options object, since it's used in the onChange handler.
+  if (!options.threshold) options.threshold = 0;
+  const { root, rootMargin, threshold } = options;
+  // Validate that the element is not being used in another <Observer />
+  invariant(
+    !INSTANCE_MAP.has(element),
+    "react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\nMake sure the `ref` is only used by a single <Observer /> instance.\n\n%s"
+  );
+  /* istanbul ignore if */
+  if (!element) return;
+  // Create a unique ID for this observer instance, based on the root, root margin and threshold.
+  // An observer with the same options can be reused, so lets use this fact
+  let observerId: string =
+    getRootId(root) +
+    (rootMargin
+      ? `${threshold.toString()}_${rootMargin}`
+      : threshold.toString());
+
+  let observerInstance = OBSERVER_MAP.get(observerId);
+  if (!observerInstance) {
+    observerInstance = new IntersectionObserver(onChange, options);
+    /* istanbul ignore else  */
+    if (observerId) OBSERVER_MAP.set(observerId, observerInstance);
+  }
+
+  const instance: ObserverInstance = {
+    callback,
+    element,
+    inView: false,
+    observerId,
+    observer: observerInstance,
+    // Make sure we have the thresholds value. It's undefined on a browser like Chrome 51.
+    thresholds:
+      observerInstance.thresholds ||
+      (Array.isArray(threshold) ? threshold : [threshold]),
+  };
+
+  INSTANCE_MAP.set(element, instance);
+  observerInstance.observe(element);
+
+  return instance;
+}
+```
+
+对于 `onChange` 函数，因为采用了多元素监听，所以需要遍历 `changes` 数组，并判断 `intersectionRatio` 超过阈值判定为 `inView` 状态，通过 `INSTANCE_MAP` 拿到对应实例，修改其 `inView` 状态并执行 `callback`。
+
+这个 `callback` 就对应了 `useInView` Hook 中 `observe` 的第二个参数回调：
+
+```jsx
+function onChange(changes: IntersectionObserverEntry[]) {
+  changes.forEach((intersection) => {
+    const { isIntersecting, intersectionRatio, target } = intersection;
+    const instance = INSTANCE_MAP.get(target);
+
+    // Firefox can report a negative intersectionRatio when scrolling.
+    /* istanbul ignore else */
+    if (instance && intersectionRatio >= 0) {
+      // If threshold is an array, check if any of them intersects. This just triggers the onChange event multiple times.
+      let inView = instance.thresholds.some((threshold) => {
+        return instance.inView
+          ? intersectionRatio > threshold
+          : intersectionRatio >= threshold;
+      });
+
+      if (isIntersecting !== undefined) {
+        // If isIntersecting is defined, ensure that the element is actually intersecting.
+        // Otherwise it reports a threshold of 0
+        inView = inView && isIntersecting;
+      }
+
+      instance.inView = inView;
+      instance.callback(inView, intersection);
+    }
+  });
+}
+```
+
+最后是 `unobserve` 取消监听的实现，在 `useInView` `setRef` 灌入新 Node 节点时，会调用 `unobserve` 对旧节点取消监听。
+
+首先利用 `INSTANCE_MAP` 找到实例，调用 `observer.unobserve(element)` 销毁监听。最后销毁不必要的 `INSTANCE_MAP` 与 `ROOT_IDS` 存储。
+
+```jsx
+export function unobserve(element: Element | null) {
+  if (!element) return;
+  const instance = INSTANCE_MAP.get(element);
+
+  if (instance) {
+    const { observerId, observer } = instance;
+    const { root } = observer;
+
+    observer.unobserve(element);
+
+    // Check if we are still observing any elements with the same threshold.
+    let itemsLeft = false;
+    // Check if we still have observers configured with the same root.
+    let rootObserved = false;
+    /* istanbul ignore else  */
+    if (observerId) {
+      INSTANCE_MAP.forEach((item, key) => {
+        if (key !== element) {
+          if (item.observerId === observerId) {
+            itemsLeft = true;
+            rootObserved = true;
+          }
+          if (item.observer.root === root) {
+            rootObserved = true;
+          }
+        }
+      });
+    }
+    if (!rootObserved && root) ROOT_IDS.delete(root);
+    if (observer && !itemsLeft) {
+      // No more elements to observe for threshold, disconnect observer
+      observer.disconnect();
+    }
+
+    // Remove reference to element
+    INSTANCE_MAP.delete(element);
+  }
+}
+```
+
+从其实现角度来看，为了保证正确识别到子元素存在，一定要保证 `ref` 能持续传递给组件最外层 DOM，如果出现传递断裂，就会判定当前组件不在视图内，比如：
+
+```jsx
+const Component = () => {
+  const [ref, inView] = useInView();
+
+  return <Child ref={ref} />;
+};
+
+const Child = ({ loading, ref }) => {
+  if (loading) {
+    // 这一步会判定为 inView：false
+    return <Spin />;
+  }
+
+  return <div ref={ref}>Child</div>;
+};
+```
+
+如果你的代码基于 `inView` 做了阻止渲染的判定，那么这个组件进入 loading 后就无法改变状态了。为了避免这种情况，要么不要让 `ref` 的传递断掉，要么当没有拿到 `ref` 对象时判定 `inView` 为 true。
+
+## 4 总结
+
+分析了这么多 React- 类的库，其核心思想有两个：
+
+1. 将原生 API 转换为框架特有 API，比如 React 系列的 Hooks 与 ref。
+2. 处理生命周期导致的边界情况，比如 dom 被更新时先 `unobserve` 再重新 `observe`。
+
+看过 [react-intersection-observer](https://github.com/thebuilder/react-intersection-observer) 的源码后，你觉得还有可优化的地方吗？欢迎讨论。
+
+> 讨论地址是：[react-intersection-observer 源码》· Issue #257 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/257)
+
+**如果你想参与讨论，请 [点击这里](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)）

157. 精读《如何比较 Object 对象》.md

@@ -0,0 +1,233 @@
+## 1 引言
+
+Object 类型的比较是非常重要的基础知识，通过 [How to Compare Objects in JavaScript](https://dmitripavlutin.com/how-to-compare-objects-in-javascript/) 这篇文章，我们可以学到四种对比方法：引用对比、手动对比、浅对比、深对比。
+
+## 2 简介
+
+### 引用对比
+
+下面三种对比方式用于 Object，皆在引用相同是才返回 `true`：
+
+- `===`
+- `==`
+- `Object.is()`
+
+```js
+const hero1 = {
+  name: "Batman",
+};
+const hero2 = {
+  name: "Batman",
+};
+
+hero1 === hero1; // => true
+hero1 === hero2; // => false
+
+hero1 == hero1; // => true
+hero1 == hero2; // => false
+
+Object.is(hero1, hero1); // => true
+Object.is(hero1, hero2); // => false
+```
+
+### 手动对比
+
+写一个自定义函数，按照对象内容做自定义对比也是一种方案：
+
+```js
+function isHeroEqual(object1, object2) {
+  return object1.name === object2.name;
+}
+
+const hero1 = {
+  name: "Batman",
+};
+const hero2 = {
+  name: "Batman",
+};
+const hero3 = {
+  name: "Joker",
+};
+
+isHeroEqual(hero1, hero2); // => true
+isHeroEqual(hero1, hero3); // => false
+```
+
+如果要对比的对象 key 不多，或者在特殊业务场景需要时，这种手动对比方法其实还是蛮实用的。
+
+但这种方案不够自动化，所以才有了浅对比。
+
+### 浅对比
+
+浅对比函数写法有很多，不过其效果都是标准的，下面给出了一种写法：
+
+```js
+function shallowEqual(object1, object2) {
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (let key of keys1) {
+    if (object1[key] !== object2[key]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+```
+
+可以看到，浅对比就是将对象每个属性进行引用对比，算是一种性能上的平衡，尤其在 redux 下有特殊的意义。
+
+下面给出了使用例子：
+
+```js
+const hero1 = {
+  name: "Batman",
+  realName: "Bruce Wayne",
+};
+const hero2 = {
+  name: "Batman",
+  realName: "Bruce Wayne",
+};
+const hero3 = {
+  name: "Joker",
+};
+
+shallowEqual(hero1, hero2); // => true
+shallowEqual(hero1, hero3); // => false
+```
+
+如果对象层级再多一层，浅对比就无效了，此时需要使用深对比。
+
+### 深对比
+
+深对比就是递归对比对象所有简单对象值，遇到复杂对象就逐个 key 进行对比，以此类推。
+
+下面是一种实现方式：
+
+```js
+function deepEqual(object1, object2) {
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    const val1 = object1[key];
+    const val2 = object2[key];
+    const areObjects = isObject(val1) && isObject(val2);
+    if (
+      (areObjects && !deepEqual(val1, val2)) ||
+      (!areObjects && val1 !== val2)
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function isObject(object) {
+  return object != null && typeof object === "object";
+}
+```
+
+可以看到，只要遇到 Object 类型的 key，就会递归调用一次 `deepEqual` 进行比较，否则对于简单类型直接使用 `!==` 引用对比。
+
+值得注意的是，数组类型也满足 `typeof object === "object"` 的条件，且 `Object.keys` 可以作用于数组，且 `object[key]` 也可作用于数组，因此数组和对象都可以采用相同方式处理。
+
+有了深对比，再也不用担心复杂对象的比较了：
+
+```js
+const hero1 = {
+  name: "Batman",
+  address: {
+    city: "Gotham",
+  },
+};
+const hero2 = {
+  name: "Batman",
+  address: {
+    city: "Gotham",
+  },
+};
+
+deepEqual(hero1, hero2); // => true
+```
+
+但深对比会造成性能损耗，不要小看递归的作用，在对象树复杂时，深对比甚至会导致严重的性能问题。
+
+## 3 精读
+
+### 常见的引用对比
+
+引用对比是最常用的，一般在做 props 比较时，只允许使用引用对比：
+
+```js
+this.props.style !== nextProps.style;
+```
+
+如果看到有深对比的地方，一般就要有所警觉，这里是真的需要深对比吗？是不是其他地方写法有问题导致的。
+
+比如在某处看到这样的代码：
+
+```js
+deepEqual(this.props.style, nextProps.style);
+```
+
+可能是父组件一处随意拼写导致的：
+
+```jsx
+const Parent = () => {
+  return <Child style={{ color: "red" }} />;
+};
+```
+
+一个只解决局部问题的同学可能会采用 `deepEqual`，OK 这样也能解决问题，但一个有全局感的同学会这样解决问题：
+
+```js
+this.props.style === nextProps.style;
+```
+
+```jsx
+const Parent = () => {
+  const style = useMemo(() => ({ color: "red" }), []);
+  return <Child style={style} />;
+};
+```
+
+从性能上来看，`Parent` 定义的 `style` 只会执行一次且下次渲染几乎没有对比损耗（依赖为空数组），子组件引用对比性能最佳，这样的组合一定优于 `deepEqual` 的例子。
+
+### 常见的浅对比
+
+浅对比也在判断组件是否重渲染时很常用：
+
+```jsx
+shouldComponentUpdate(nextProps) {
+  return !shallowEqual(this.props, nextProps)
+}
+```
+
+原因是 `this.props` 这个对象引用的变化在逻辑上是无需关心的，因为应用只会使用到 `this.props[key]` 这一层级，再考虑到 React 组件生态下，Immutable 的上下文保证了任何对象子属性变化一定导致对象整体引用变化，可以放心的进行浅对比。
+
+最少见的就是手动对比和深对比，如果你看到一段代码中使用了深对比，大概率这段代码可以被优化为浅对比。
+
+## 4 总结
+
+虽然今天总结了 4 种比较 Object 对象的方式，但在实际项目中，应该尽可能使用引用对比，其次是浅对比和手动对比，最坏的情况是使用深对比。
+
+> 讨论地址是：[精读《如何比较 Object 对象》· Issue #258 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/258)
+
+**如果你想参与讨论，请 [点击这里](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)）

158. 精读《Typescript 4》.md

@@ -0,0 +1,481 @@
+## 1 引言
+
+随着 [Typescript 4 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-0-beta/) 的发布，又带来了许多新功能，其中 Variadic Tuple Types 解决了大量重载模版代码的顽疾，使得这次更新非常有意义。
+
+## 2 简介
+
+### 可变元组类型
+
+考虑 `concat` 场景，接收两个数组或者元组类型，组成一个新数组：
+
+```typescript
+function concat(arr1, arr2) {
+  return [...arr1, ...arr2];
+}
+```
+
+如果要定义 `concat` 的类型，以往我们会通过枚举的方式，先枚举第一个参数数组中的每一项：
+
+```typescript
+function concat<>(arr1: [], arr2: []): [A];
+function concat<A>(arr1: [A], arr2: []): [A];
+function concat<A, B>(arr1: [A, B], arr2: []): [A, B];
+function concat<A, B, C>(arr1: [A, B, C], arr2: []): [A, B, C];
+function concat<A, B, C, D>(arr1: [A, B, C, D], arr2: []): [A, B, C, D];
+function concat<A, B, C, D, E>(arr1: [A, B, C, D, E], arr2: []): [A, B, C, D, E];
+function concat<A, B, C, D, E, F>(arr1: [A, B, C, D, E, F], arr2: []): [A, B, C, D, E, F];)
+```
+
+再枚举第二个参数中每一项，如果要完成所有枚举，仅考虑数组长度为 6 的情况，就要定义 36 次重载，代码几乎不可维护：
+
+```typescript
+function concat<A2>(arr1: [], arr2: [A2]): [A2];
+function concat<A1, A2>(arr1: [A1], arr2: [A2]): [A1, A2];
+function concat<A1, B1, A2>(arr1: [A1, B1], arr2: [A2]): [A1, B1, A2];
+function concat<A1, B1, C1, A2>(
+  arr1: [A1, B1, C1],
+  arr2: [A2]
+): [A1, B1, C1, A2];
+function concat<A1, B1, C1, D1, A2>(
+  arr1: [A1, B1, C1, D1],
+  arr2: [A2]
+): [A1, B1, C1, D1, A2];
+function concat<A1, B1, C1, D1, E1, A2>(
+  arr1: [A1, B1, C1, D1, E1],
+  arr2: [A2]
+): [A1, B1, C1, D1, E1, A2];
+function concat<A1, B1, C1, D1, E1, F1, A2>(
+  arr1: [A1, B1, C1, D1, E1, F1],
+  arr2: [A2]
+): [A1, B1, C1, D1, E1, F1, A2];
+```
+
+如果我们采用批量定义的方式，问题也不会得到解决，因为参数类型的顺序得不到保证：
+
+```typescript
+function concat<T, U>(arr1: T[], arr2, U[]): Array<T | U>;
+```
+
+在 Typescript 4，可以在定义中对数组进行解构，通过几行代码优雅的解决可能要重载几百次的场景：
+
+```typescript
+type Arr = readonly any[];
+
+function concat<T extends Arr, U extends Arr>(arr1: T, arr2: U): [...T, ...U] {
+  return [...arr1, ...arr2];
+}
+```
+
+上面例子中，`Arr` 类型告诉 TS `T` 与 `U` 是数组类型，再通过 `[...T, ...U]` 按照逻辑顺序依次拼接类型。
+
+再比如 `tail`，返回除第一项外剩下元素：
+
+```typescript
+function tail(arg) {
+  const [_, ...result] = arg;
+  return result;
+}
+```
+
+同样告诉 TS `T` 是数组类型，且 `arr: readonly [any, ...T]` 申明了 `T` 类型表示除第一项其余项的类型，TS 可自动将 `T` 类型关联到对象 `rest`：
+
+```typescript
+function tail<T extends any[]>(arr: readonly [any, ...T]) {
+  const [_ignored, ...rest] = arr;
+  return rest;
+}
+
+const myTuple = [1, 2, 3, 4] as const;
+const myArray = ["hello", "world"];
+
+// type [2, 3, 4]
+const r1 = tail(myTuple);
+
+// type [2, 3, ...string[]]
+const r2 = tail([...myTuple, ...myArray] as const);
+```
+
+另外之前版本的 TS 只能将类型解构放在最后一个位置：
+
+```typescript
+type Strings = [string, string];
+type Numbers = [number, number];
+
+// [string, string, number, number]
+type StrStrNumNum = [...Strings, ...Numbers];
+```
+
+如果你尝试将 `[...Strings, ...Numbers]` 这种写法，将会得到一个错误提示：
+
+```text
+A rest element must be last in a tuple type.
+```
+
+但在 Typescript 4 版本支持了这种语法：
+
+```typescript
+type Strings = [string, string];
+type Numbers = number[];
+
+// [string, string, ...Array<number | boolean>]
+type Unbounded = [...Strings, ...Numbers, boolean];
+```
+
+对于再复杂一些的场景，例如高阶函数 `partialCall`，支持一定程度的柯里化：
+
+```typescript
+function partialCall(f, ...headArgs) {
+  return (...tailArgs) => f(...headArgs, ...tailArgs);
+}
+```
+
+我们可以通过上面的特性对其进行类型定义，将函数 `f` 第一个参数类型定义为有顺序的 `[...T, ...U]`：
+
+```typescript
+type Arr = readonly unknown[];
+
+function partialCall<T extends Arr, U extends Arr, R>(
+  f: (...args: [...T, ...U]) => R,
+  ...headArgs: T
+) {
+  return (...b: U) => f(...headArgs, ...b);
+}
+```
+
+测试效果如下：
+
+```typescript
+const foo = (x: string, y: number, z: boolean) => {};
+
+// This doesn't work because we're feeding in the wrong type for 'x'.
+const f1 = partialCall(foo, 100);
+//                          ~~~
+// error! Argument of type 'number' is not assignable to parameter of type 'string'.
+
+// This doesn't work because we're passing in too many arguments.
+const f2 = partialCall(foo, "hello", 100, true, "oops");
+//                                              ~~~~~~
+// error! Expected 4 arguments, but got 5.
+
+// This works! It has the type '(y: number, z: boolean) => void'
+const f3 = partialCall(foo, "hello");
+
+// What can we do with f3 now?
+
+f3(123, true); // works!
+
+f3();
+// error! Expected 2 arguments, but got 0.
+
+f3(123, "hello");
+//      ~~~~~~~
+// error! Argument of type '"hello"' is not assignable to parameter of type 'boolean'
+```
+
+值得注意的是，`const f3 = partialCall(foo, "hello");` 这段代码由于还没有执行到 `foo`，因此只匹配了第一个 `x:string` 类型，虽然后面 `y: number, z: boolean` 也是必选，但因为 `foo` 函数还未执行，此时只是参数收集阶段，因此不会报错，等到 `f3(123, true)` 执行时就会校验必选参数了，因此 `f3()` 时才会提示参数数量不正确。
+
+### 元组标记
+
+下面两个函数定义在功能上是一样的：
+
+```typescript
+function foo(...args: [string, number]): void {
+  // ...
+}
+
+function foo(arg0: string, arg1: number): void {
+  // ...
+}
+```
+
+但还是有微妙的区别，下面的函数对每个参数都有名称标记，但上面通过解构定义的类型则没有，针对这种情况，Typescript 4 支持了元组标记：
+
+```typescript
+type Range = [start: number, end: number];
+```
+
+同时也支持与解构一起使用：
+
+```typescript
+type Foo = [first: number, second?: string, ...rest: any[]];
+```
+
+### Class 从构造函数推断成员变量类型
+
+构造函数在类实例化时负责一些初始化工作，比如为成员变量赋值，在 Typescript 4，在构造函数里对成员变量的赋值可以直接为成员变量推导类型：
+
+```typescript
+class Square {
+  // Previously: implicit any!
+  // Now: inferred to `number`!
+  area;
+  sideLength;
+
+  constructor(sideLength: number) {
+    this.sideLength = sideLength;
+    this.area = sideLength ** 2;
+  }
+}
+```
+
+如果对成员变量赋值包含在条件语句中，还能识别出存在 `undefined` 的风险：
+
+```typescript
+class Square {
+  sideLength;
+
+  constructor(sideLength: number) {
+    if (Math.random()) {
+      this.sideLength = sideLength;
+    }
+  }
+
+  get area() {
+    return this.sideLength ** 2;
+    //     ~~~~~~~~~~~~~~~
+    // error! Object is possibly 'undefined'.
+  }
+}
+```
+
+如果在其他函数中初始化，则 TS 不能自动识别，需要用 `!:` 显式申明类型：
+
+```typescript
+class Square {
+  // definite assignment assertion
+  //        v
+  sideLength!: number;
+  //         ^^^^^^^^
+  // type annotation
+
+  constructor(sideLength: number) {
+    this.initialize(sideLength);
+  }
+
+  initialize(sideLength: number) {
+    this.sideLength = sideLength;
+  }
+
+  get area() {
+    return this.sideLength ** 2;
+  }
+}
+```
+
+### 短路赋值语法
+
+针对以下三种短路语法提供了快捷赋值语法：
+
+```typescript
+a &&= b; // a = a && b
+a ||= b; // a = a || b
+a ??= b; // a = a ?? b
+```
+
+### catch error unknown 类型
+
+Typescript 4.0 之后，我们可以将 catch error 定义为 `unknown` 类型，以保证后面的代码以健壮的类型判断方式书写：
+
+```typescript
+try {
+  // ...
+} catch (e) {
+  // error!
+  // Property 'toUpperCase' does not exist on type 'unknown'.
+  console.log(e.toUpperCase());
+
+  if (typeof e === "string") {
+    // works!
+    // We've narrowed 'e' down to the type 'string'.
+    console.log(e.toUpperCase());
+  }
+}
+```
+
+PS：在之前的版本，`catch (e: unknown)` 会报错，提示无法为 `error` 定义 `unknown` 类型。
+
+### 自定义 JSX 工厂
+
+TS 4 支持了 `jsxFragmentFactory` 参数定义 Fragment 工厂函数：
+
+```json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  }
+}
+```
+
+还可以通过注释方式覆盖单文件的配置：
+
+```typescript
+// Note: these pragma comments need to be written
+// with a JSDoc-style multiline syntax to take effect.
+/** @jsx h */
+/** @jsxFrag Fragment */
+
+import { h, Fragment } from "preact";
+
+let stuff = (
+  <>
+    <div>Hello</div>
+  </>
+);
+```
+
+以上代码编译后解析结果如下：
+
+```typescript
+// Note: these pragma comments need to be written
+// with a JSDoc-style multiline syntax to take effect.
+/** @jsx h */
+/** @jsxFrag Fragment */
+import { h, Fragment } from "preact";
+let stuff = h(Fragment, null, h("div", null, "Hello"));
+```
+
+### 其他升级
+
+其他的升级快速介绍：
+
+**构建速度提升**，提升了 `--incremental` + `--noEmitOnError` 场景的构建速度。
+
+**支持 `--incremental` + `--noEmit` 参数同时生效。**
+
+**支持 `@deprecated` 注释，** 使用此注释时，代码中会使用 ~~删除线~~ 警告调用者。
+
+**局部 TS Server 快速启动功能，** 打开大型项目时，TS Server 要准备很久，Typescript 4 在 VSCode 编译器下做了优化，可以提前对当前打开的单文件进行部分语法响应。
+
+**优化自动导入，** 现在 `package.json` `dependencies` 字段定义的依赖将优先作为自动导入的依据，而不再是遍历 `node_modules` 导入一些非预期的包。
+
+除此之外，还有几个 Break Change：
+
+`lib.d.ts` 类型升级，主要是移除了 `document.origin` 定义。
+
+覆盖父 Class 属性的 getter 或 setter 现在都会提示错误。
+
+通过 `delete` 删除的属性必须是可选的，如果试图用 `delete` 删除一个必选的 key，则会提示错误。
+
+## 3 精读
+
+Typescript 4 最大亮点就是可变元组类型了，但可变元组类型也不能解决所有问题。
+
+拿笔者的场景来说，函数 `useDesigner` 作为自定义 React Hook 与 `useSelector` 结合支持 connect redux 数据流的值，其调用方式是这样的：
+
+```typescript
+const nameSelector = (state: any) => ({
+  name: state.name as string,
+});
+
+const ageSelector = (state: any) => ({
+  age: state.age as number,
+});
+
+const App = () => {
+  const { name, age } = useDesigner(nameSelector, ageSelector);
+};
+```
+
+`name` 与 `age` 是 Selector 注册的，内部实现方式必然是 `useSelector` + reduce，但类型定义就麻烦了，通过重载可以这么做：
+
+```typescript
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+
+type Function = (...args: any) => any;
+
+export function useDesigner();
+export function useDesigner<T1 extends Function>(
+  t1: T1
+): ReturnType<T1> ;
+export function useDesigner<T1 extends Function, T2 extends Function>(
+  t1: T1,
+  t2: T2
+): ReturnType<T1> & ReturnType<T2> ;
+export function useDesigner<
+  T1 extends Function,
+  T2 extends Function,
+  T3 extends Function
+>(
+  t1: T1,
+  t2: T2,
+  t3: T3,
+  t4: T4,
+): ReturnType<T1> &
+  ReturnType<T2> &
+  ReturnType<T3> &
+  ReturnType<T4> &
+;
+export function useDesigner<
+  T1 extends Function,
+  T2 extends Function,
+  T3 extends Function,
+  T4 extends Function
+>(
+  t1: T1,
+  t2: T2,
+  t3: T3,
+  t4: T4
+): ReturnType<T1> &
+  ReturnType<T2> &
+  ReturnType<T3> &
+  ReturnType<T4> &
+;
+export function useDesigner(...selectors: any[]) {
+  return useSelector((state) =>
+    selectors.reduce((selected, selector) => {
+      return {
+        ...selected,
+        ...selector(state),
+      };
+    }, {})
+  ) as any;
+}
+```
+
+可以看到，笔者需要将 `useDesigner` 传入的参数通过函数重载方式一一传入，上面的例子只支持到了三个参数，如果传入了第四个参数则函数定义会失效，因此业界做法一般是定义十几个重载，这样会导致函数定义非常冗长。
+
+但参考 TS4 的例子，我们可以避免类型重载，而通过枚举的方式支持：
+
+```typescript
+type Func = (state?: any) => any;
+type Arr = readonly Func[];
+
+const useDesigner = <T extends Arr>(
+  ...selectors: T
+): ReturnType<T[0]> &
+  ReturnType<T[1]> &
+  ReturnType<T[2]> &
+  ReturnType<T[3]> => {
+  return useSelector((state) =>
+    selectors.reduce((selected, selector) => {
+      return {
+        ...selected,
+        ...selector(state),
+      };
+    }, {})
+  ) as any;
+};
+```
+
+可以看到，最大的变化是不需要写四遍重载了，但由于场景和 `concat` 不同，这个例子返回值不是简单的 `[...T, ...U]`，而是 `reduce` 的结果，所以目前还只能通过枚举的方式支持。
+
+当然可能存在不用枚举就可以支持无限长度的入参类型解析的方案，因笔者水平有限，暂未想到更好的解法，如果你有更好的解法，欢迎告知笔者。
+
+## 4 总结
+
+Typescript 4 带来了更强类型语法，更智能的类型推导，更快的构建速度以及更合理的开发者工具优化，唯一的几个 Break Change 不会对项目带来实质影响，期待正式版的发布。
+
+> 讨论地址是：[精读《Typescript 4》· Issue #259 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/259)
+
+**如果你想参与讨论，请 [点击这里](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)）

159. 精读《对低代码搭建的理解》.md

@@ -0,0 +1,115 @@
+## 1 引言
+
+在说低代码搭建之前，首先要理解什么是搭建（本文搭建指通过 Web 交互搭建一个自定义的新页面）。
+
+**我认为搭建的本质是提效** ，而提效又分为对研发人员的提效，以及对客户的提效：
+
+- 对研发人员的提效：相对于 Pro Code 模式，搭建的抽象程度更高，通过牺牲部分定制性换来更高效的开发方式。
+- 对客户的提效：如果用户有任何搭建 Web 应用的诉求，本质上从阿里云购买服务器自建是最普适的方案，但由于专业性要求高，用户群会很窄，因此需要针对不同用户的诉求开发定制方案，本质上是通过降低通用性换取更低的上手成本，或者针对某个领域降低上手成本，比如 BI 搭建。
+
+提效虽然被说烂了，但软件工程发展中，几乎大部分工作都能归结到在提效。比如 Vscode、Typescript 提升编码效率；React、Vue 框架提升程序研发效率；工作台、可持续集成提升协同开发效率，等等，连微软都称自己的使命是赋能全球每一人、每个组织成就不凡，很大程度上就是在说提升整个社会的生产效能。
+
+低代码开发平台（Low-Code Development Platform）则更进一步，允许通过零代码或少量代码就可以快速创建应用。
+
+从实践结果来看，完全零代码想要覆盖所有领域是不可能的，而 100% 全代码是可以覆盖所有领域，但研发成本太高，所以介于两者之间的低代码模式是值得尝试的，因为许多定制场景往往不需要太多高深的代码就能搞定，很多复杂逻辑可能几个简单的赋值语句、或者条件语句就可以搞定，但如果不允许写代码，其使用成本甚至比写少量代码还要高。
+
+所以搭建本质解决的是提效问题，考虑提效就要看性价比，是使用者学习几行简单代码后，利用低代码平台效率更高，还是使用者坚持不写代码，使用繁琐的搭建交互成本更高？有人说代码学不会，但简单代码本质和搭建无异，都是对电脑指令的输入。
+
+还有一些场景将背后复杂度转移到了其他链路，比如数据搭建场景，虽然搭建器没有低代码能力，但却能实现复杂业务逻辑，原因是这个复杂度被 SQL 层吃掉了，既然复杂度无法消除，那么哪一层实现的效率更高，就由哪一层去做才是合理的。
+
+## 2 精读
+
+低代码不仅仅包括 “能写代码”，主要具备如下四个特性：物料接入、编排能力、渲染能力、出码能力。
+
+### 物料接入
+
+通用搭建引擎要能够接入通用物料，即组件自身不关心搭建环境，就可以被搭建平台所使用。
+
+这需要搭建平台本身不对组件代码实现有入侵，可以对组件暴露的 props 做完全控制，要做到自动识别组件有哪些 props 变量，并根据类型自动推荐编辑表单类型。
+
+除了简单的文本、数字、下拉框等编辑器 Setter 之外，还有如下几种复杂编辑器：
+
+- 回调函数编辑器。
+- Node 节点编辑器。
+- 文本国际化编辑器。
+- 表达式编辑器。
+
+回调函数编辑器与表达式编辑器都是低代码能力的体现，本质上就是利用代码描述某个变量值或者回调。
+
+Node 节点编辑器专门处理节点类型 props 参数，比如 `props.header`、`propder.footer`，在代码模式描述为组件，在可视化模式需转化为画布下钻模式进行编辑。
+
+### 编排能力
+
+编排能力包含页面编排与逻辑编排，是低代码搭建的核心能力。
+
+#### 页面编排
+
+页面编排包含很多交互行为，比如拖拽组件、布局，其中布局大有可为，比如云凤蝶的编辑模式，通过自由拖拽布局，降低了使用者对 DOM 流式布局的理解成本，但通过自适应四周边距模拟出了流式布局自动撑开容器，容器间碰撞挤压的效果。
+
+组件与组件形成的组合可以形成一个新的物料，一般称为模版，比如一个页面整体也可以称为模版，这个模版组件的 id 就是页面根节点的容器组件。但模版也有不能满足的场景，比如期望组件形成的组合拥有一套全新配置，此时就延伸出低代码业务组件的概念，可以认为将模版当作一个整体编辑，可以为模版设置任意的编辑表单，这个编辑表单的值可以透传到里面每个组件中读取。
+
+#### 逻辑编排
+
+逻辑编排是低代码能力的核心，在低代码引擎中，所有组件参数都可以用低代码描述，比如一个 `props.color` 可以通过颜色选择器选一个固定值，也可以转换为表达式模式写一段代码。
+
+这段代码除了拥有普通 JS 能力外，还拥有基本状态管理的能力，即可以访问当前作用域下的状态 `this.state`，而状态作用域又被容器所分割，容器分为持有状态的容器与不持有状态的，一个持有状态容器内的子组件状态是互通的。
+
+除了基本状态管理能力外，还拥有访问上下文能力，即调用引擎一些 API 对画布进行操作，一般都用于组件回调，在回调里调用 `this.setState` 设置状态也属于操作上下文的行为。除了上下文外，还有风格化、国际化、取数等能力可以通过 `this` 访问到，其中取数能力专门抽到引擎层做，就是为了让所有组件与取数逻辑解耦，组件只要拿到数据、isFetching，而不需要真正发送取数请求。
+
+逻辑编排的另一个维度就是可视化，将上述低代码能力通过可视化方式表达为逻辑节点与线条，在描述与维护复杂逻辑时有一定优势。
+
+### 渲染能力
+
+搭建特殊之处在于，搭建过程几乎只能在 PC 端完成，但发布后的应用往往有多端渲染的诉求，比如越来越多的公司使用手机查看 BI 报表，甚至报表需要嵌入到微信、支付宝小程序中；PC 搭建的表单往往也有大量手机端填报的诉求。
+
+所以编辑和渲染端应该是分离的，但为了保证逻辑一致性，核心代码需要复用，所以搭建引擎最好采用 UI 无关的内核 + 业务层拓展 UI 实现方式来做，UI 无关的内核只负责存储、操作画布数据，排除设计器附加的一堆 Panel 后，渲染时可以复用逻辑内核往往就足够了。
+
+组件的跨端复用也是必须的，现在跨端渲染的技术方案也有不少。
+
+### 出码能力
+
+LowCode 与 ProCode 互转也是一大难题，首先互转的好处不必多说，可以自由的在提效与定制间切换，一定是最理想的开发模式，但实现起来有不少阻碍。
+
+首先是 LowCode 转 ProCode，这个比较简单，原因是 LowCode 本身用 JSON 定义，代码是 JSON 的超集，从子集转换到超集本身没有技术障碍。
+
+从 ProCode 转换到 LowCode 就麻烦了，一种方式是限定 ProCode 的能力，甚至用一种新的语法替代原生 JS，本质上都是通过将 ProCode 的能力范围限制住，使得 LowCode 可以接住。另一种方式是不对称转换，即从 ProCode 转换为 LowCode 后会存在功能缺失，或者即便功能不缺失，但 LowCode 无法对应的功能无法在搭建平台编辑。
+
+### 运行时能力
+
+只拥有上述低代码能力的搭建平台还是太通用了，虽然功能很强大，但在具体的业务场景不一定有多大的提效，具体的业务场景要有具体的解决方案，搭建本质是提效的，如果原子化、低代码的内容太多，就本末倒置，只是用另一种方式写代码罢了，并没有真正做到利用搭建提升开发效率。
+
+通用的业务定制方式有如下三种：
+
+- 定制业务组件：比如将某个复杂业务系统 80% 场景都要用到的组件固化为一个业务定制组件，省去了大部分配置时间，让使用者感受到提效。
+- 定制业务模版和低代码业务组件：更进一步，将业务模版固化下来，本质上类似代码模版，或者利用低代码业务组件，在不开发新组件的前提下，制作一个针对某个业务场景的混合组件。
+- 定制业务配置项：有些业务场景专业度很高，一方面是用户群不一样，一方面是搭建效率考虑，都应该提供一种基于业务角度出发的配置项，既符合业务思考逻辑，又节省配置步骤。
+
+以上通用方式都是通过引擎已有的开放能力可以做到的，但对数据场景来说，有一些依赖引擎运行时能力场景，需要将引擎运行时能力抽象出来，配合低代码实现。
+
+比如让当前页面所有配置相同数据集的组件自动建立筛选联动关联，虽然筛选联动关联可以通过低代码方式配置，但当画布组件数量变化时，或者有组件动态调用 API 新增组件时，静态的配置很难满足动态关联场景，此时我们可以拓展出一些全局运行时能力，让组件实现这些运行时能力时可以拿到画布信息，在引擎实际调用时再动态运行，而不是编辑生成一份静态 JSON 与渲染完全割裂。
+
+运行时能力在不同平台针对不同垂直场景时会存在差异，如果希望打通底层引擎，可以提供拓展插槽，提供动态注册引擎运行时能力的机制。
+
+## 3 总结
+
+一个低代码搭建平台通吃一切场景是不可能的，只要有人愿意为垂直业务场景做 “量身定制”，用户就会立刻觉得搭建效率得到了提升，我们应当站在用户的角度，以用户利益最大化的方式做平台。
+
+但搭建平台维护成本很高，每个业务场景都单独维护一套肯定不是长久之计，我们需要设计一套有弹性的低代码核心引擎，各个业务都可以基于他为自己的用户群 “量身定制” 一套专属设计器，共享搭建引擎通用的能力与协议，并自由拓展定制能力。
+
+所以不仅渲染态是多态的，设计器也应该是多态的，其中可以被固化为标准的部分需要沉淀下来，比如物料接入规范、编排能力、出码能力、运行时能力，让各个搭建平台做到合而不同。
+
+国内外都有非常多做的相当不错的搭建系统，但要不就太通用，具体场景提效不明显，要不就太垂直，换一个业务场景做不了。现在阿里中后台低代码搭建组织就在制定规范，将引擎通用能力固化为标准协议，让不同搭建平台可以对齐规范与功能，未来还会不断收敛核心引擎实现，基于它可以打造出千千万万个垂直领域的搭建平台，贴着业务做搭建提效，同时引擎内核与规范还能保持互通。
+
+笔者所在阿里数据中台体验技术团队就是中后台低代码搭建组织的一员，将数据搭建领域做到极致。在技术上，我们在打通中后台搭建与数据搭建的技术方案，在产品上，我们正在逐渐统一阿里集团数据搭建平台，对外也携 QuickBI 成为国内唯一一家进入 Gartner 象限的 BI 产品，未来可期。
+
+阿里数据中台体验技术团队正在火热招人中，如果感兴趣可以联系 ziyi.hzy@alibaba-inc.com 。
+
+> 讨论地址是：[精读《对低代码搭建的理解》· Issue #260 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/260)
+
+**如果你想参与讨论，请 [点击这里](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)）

160. 精读《函数缓存》.md

@@ -0,0 +1,308 @@
+## 1 引言
+
+函数缓存是重要概念，本质上就是用空间（缓存存储）换时间（跳过计算过程）。
+
+对于无副作用的纯函数，在合适的场景使用函数缓存是非常必要的，让我们跟着 https://whatthefork.is/memoization 这篇文章深入理解一下函数缓存吧！
+
+## 2 概述
+
+假设又一个获取天气的函数 `getChanceOfRain`，每次调用都要花 100ms 计算：
+
+```jsx
+import { getChanceOfRain } from "magic-weather-calculator";
+function showWeatherReport() {
+  let result = getChanceOfRain(); // Let the magic happen
+  console.log("The chance of rain tomorrow is:", result);
+}
+
+showWeatherReport(); // (!) Triggers the calculation
+showWeatherReport(); // (!) Triggers the calculation
+showWeatherReport(); // (!) Triggers the calculation
+```
+
+很显然这样太浪费计算资源了，当已经计算过一次天气后，就没有必要再算一次了，我们期望的是后续调用可以直接拿上一次结果的缓存，这样可以节省大量计算。因此我们可以做一个 `memoizedGetChanceOfRain` 函数缓存计算结果：
+
+```jsx
+import { getChanceOfRain } from "magic-weather-calculator";
+let isCalculated = false;
+let lastResult;
+// We added this function!
+function memoizedGetChanceOfRain() {
+  if (isCalculated) {
+    // No need to calculate it again.
+    return lastResult;
+  }
+  // Gotta calculate it for the first time.
+  let result = getChanceOfRain();
+  // Remember it for the next time.
+  lastResult = result;
+  isCalculated = true;
+  return result;
+}
+function showWeatherReport() {
+  // Use the memoized function instead of the original function.
+  let result = memoizedGetChanceOfRain();
+  console.log("The chance of rain tomorrow is:", result);
+}
+```
+
+在每次调用时判断优先用缓存，如果没有缓存则调用原始函数并记录缓存。这样当我们多次调用时，除了第一次之外都会立即从缓存中返回结果：
+
+```jsx
+showWeatherReport(); // (!) Triggers the calculation
+showWeatherReport(); // Uses the calculated result
+showWeatherReport(); // Uses the calculated result
+showWeatherReport(); // Uses the calculated result
+```
+
+然而对于有参数的场景就不适用了，因为缓存并没有考虑参数：
+
+```jsx
+function showWeatherReport(city) {
+  let result = getChanceOfRain(city); // Pass the city
+  console.log("The chance of rain tomorrow is:", result);
+}
+
+showWeatherReport("Tokyo"); // (!) Triggers the calculation
+showWeatherReport("London"); // Uses the calculated answer
+```
+
+由于参数可能性很多，所以有三种解决方案：
+
+### 1. 仅缓存最后一次结果
+
+仅缓存最后一次结果是最节省存储空间的，而且不会有计算错误，但带来的问题就是当参数变化时缓存会立即失效：
+
+```jsx
+import { getChanceOfRain } from "magic-weather-calculator";
+let lastCity;
+let lastResult;
+function memoizedGetChanceOfRain(city) {
+  if (city === lastCity) {
+    // Notice this check!
+    // Same parameters, so we can reuse the last result.
+    return lastResult;
+  }
+  // Either we're called for the first time,
+  // or we're called with different parameters.
+  // We have to perform the calculation.
+  let result = getChanceOfRain(city);
+  // Remember both the parameters and the result.
+  lastCity = city;
+  lastResult = result;
+  return result;
+}
+function showWeatherReport(city) {
+  // Pass the parameters to the memoized function.
+  let result = memoizedGetChanceOfRain(city);
+  console.log("The chance of rain tomorrow is:", result);
+}
+
+showWeatherReport("Tokyo"); // (!) Triggers the calculation
+showWeatherReport("Tokyo"); // Uses the calculated result
+showWeatherReport("Tokyo"); // Uses the calculated result
+showWeatherReport("London"); // (!) Triggers the calculation
+showWeatherReport("London"); // Uses the calculated result
+```
+
+在极端情况下等同于没有缓存：
+
+```jsx
+showWeatherReport("Tokyo"); // (!) Triggers the calculation
+showWeatherReport("London"); // (!) Triggers the calculation
+showWeatherReport("Tokyo"); // (!) Triggers the calculation
+showWeatherReport("London"); // (!) Triggers the calculation
+showWeatherReport("Tokyo"); // (!) Triggers the calculation
+```
+
+### 2. 缓存所有结果
+
+第二种方案是缓存所有结果，使用 Map 存储缓存即可：
+
+```jsx
+// Remember the last result *for every city*.
+let resultsPerCity = new Map();
+function memoizedGetChanceOfRain(city) {
+  if (resultsPerCity.has(city)) {
+    // We already have a result for this city.
+    return resultsPerCity.get(city);
+  }
+  // We're called for the first time for this city.
+  let result = getChanceOfRain(city);
+  // Remember the result for this city.
+  resultsPerCity.set(city, result);
+  return result;
+}
+function showWeatherReport(city) {
+  // Pass the parameters to the memoized function.
+  let result = memoizedGetChanceOfRain(city);
+  console.log("The chance of rain tomorrow is:", result);
+}
+
+showWeatherReport("Tokyo"); // (!) Triggers the calculation
+showWeatherReport("London"); // (!) Triggers the calculation
+showWeatherReport("Tokyo"); // Uses the calculated result
+showWeatherReport("London"); // Uses the calculated result
+showWeatherReport("Tokyo"); // Uses the calculated result
+showWeatherReport("Paris"); // (!) Triggers the calculation
+```
+
+这么做带来的弊端就是内存溢出，当可能参数过多时会导致内存无限制的上涨，最坏的情况就是触发浏览器限制或者页面崩溃。
+
+### 3. 其他缓存策略
+
+介于只缓存最后一项与缓存所有项之间还有这其他选择，比如 LRU（least recently used）只保留最小化最近使用的缓存，或者为了方便浏览器回收，使用 WeakMap 替代 Map。
+
+最后提到了函数缓存的一个坑，必须是纯函数。比如下面的 CASE：
+
+```jsx
+// Inside the magical npm package
+function getChanceOfRain() {
+  // Show the input box!
+  let city = prompt("Where do you live?");
+  // ... calculation ...
+}
+// Our code
+function showWeatherReport() {
+  let result = getChanceOfRain();
+  console.log("The chance of rain tomorrow is:", result);
+}
+```
+
+`getChanceOfRain` 每次会由用户输入一些数据返回结果，导致缓存错误，原因是 “函数入参一部分由用户输入” 就是副作用，我们不能对有副作用的函数进行缓存。
+
+这有时候也是拆分函数的意义，将一个有副作用函数的无副作用部分分解出来，这样就能局部做函数缓存了：
+
+```jsx
+// If this function only calculates things,
+// we would call it "pure".
+// It is safe to memoize this function.
+function getChanceOfRain(city) {
+  // ... calculation ...
+}
+// This function is "impure" because
+// it shows a prompt to the user.
+function showWeatherReport() {
+  // The prompt is now here
+  let city = prompt("Where do you live?");
+  let result = getChanceOfRain(city);
+  console.log("The chance of rain tomorrow is:", result);
+}
+```
+
+最后，我们可以将缓存函数抽象为高阶函数：
+
+```jsx
+function memoize(fn) {
+  let isCalculated = false;
+  let lastResult;
+  return function memoizedFn() {
+    // Return the generated function!
+    if (isCalculated) {
+      return lastResult;
+    }
+    let result = fn();
+    lastResult = result;
+    isCalculated = true;
+    return result;
+  };
+}
+```
+
+这样生成新的缓存函数就方便啦：
+
+```jsx
+let memoizedGetChanceOfRain = memoize(getChanceOfRain);
+let memoizedGetNextEarthquake = memoize(getNextEarthquake);
+let memoizedGetCosmicRaysProbability = memoize(getCosmicRaysProbability);
+```
+
+`isCalculated` 与 `lastResult` 都存储在 `memoize` 函数生成的闭包内，外部无法访问。
+
+## 3 精读
+
+### 通用高阶函数实现函数缓存
+
+原文的例子还是比较简单，没有考虑函数多个参数如何处理，下面我们分析一下 Lodash `memoize` 函数源码：
+
+```jsx
+function memoize(func, resolver) {
+  if (
+    typeof func != "function" ||
+    (resolver != null && typeof resolver != "function")
+  ) {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  var memoized = function () {
+    var args = arguments,
+      key = resolver ? resolver.apply(this, args) : args[0],
+      cache = memoized.cache;
+
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    var result = func.apply(this, args);
+    memoized.cache = cache.set(key, result) || cache;
+    return result;
+  };
+  memoized.cache = new (memoize.Cache || MapCache)();
+  return memoized;
+}
+```
+
+原文有提到缓存策略多种多样，而 Lodash 将缓存策略简化为 key 交给用户自己管理，看这段代码：
+
+```jsx
+key = resolver ? resolver.apply(this, args) : args[0];
+```
+
+也就是缓存的 key 默认是执行函数时第一个参数，也可以通过 `resolver` 拿到参数处理成新的缓存 key。
+
+在执行函数时也传入了参数 `func.apply(this, args)`。
+
+最后 `cache` 也不再使用默认的 Map，而是允许用户自定义 `lodash.memoize.Cache` 自行设置，比如设置为 WeakMap：
+
+```jsx
+_.memoize.Cache = WeakMap;
+```
+
+### 什么时候不适合用缓存
+
+以下两种情况不适合用缓存：
+
+1. 不经常执行的函数。
+2. 本身执行速度较快的函数。
+
+对于不经常执行的函数，本身就不需要利用缓存提升执行效率，而缓存反而会长期占用内存。对于本身执行速度较快的函数，其实大部分简单计算速度都很快，使用缓存后对速度没有明显的提升，同时如果计算结果比较大，反而会占用存储资源。
+
+对于引用的变化尤其重要，比如如下例子：
+
+```jsx
+function addName(obj, name){
+  return {
+    ...obj,
+    name:
+  }
+}
+```
+
+为 `obj` 添加一个 key，本身执行速度是非常快的，但添加缓存后会带来两个坏处：
+
+1. 如果 `obj` 非常大，会在闭包存储完整 `obj` 结构，内存占用加倍。
+2. 如果 `obj` 通过 mutable 方式修改了，则普通缓存函数还会返回原先结果（因为对象引用没有变），造成错误。
+
+如果要强行进行对象深对比，虽然会避免出现边界问题，但性能反而会大幅下降。
+
+## 4 总结
+
+函数缓存非常有用，但并不是所有场景都适用，因此千万不要极端的将所有函数都添加缓存，仅限于计算耗时、可能重复利用多次，且是纯函数的。
+
+> 讨论地址是：[精读《函数缓存》· Issue #261 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/261)
+
+**如果你想参与讨论，请 [点击这里](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)）

161.精读《可视化搭建思考 - 富文本搭建》.md

@@ -0,0 +1,109 @@
+## 1 引言
+
+[「可视化搭建系统」——从设计到架构，探索前端的领域和意义](https://juejin.im/post/6854573220532748302) 这篇文章主要分析了现阶段可视化搭建的几种表现形式和实现原理，并重点介绍了基于富文本的可视化搭建思路，让人耳目一新。
+
+基于富文本的可视化搭建看似很新颖，但其实早就被广泛使用了，任何一个富文本编辑器几乎都有插入表格功能，这就是一个典型插入自定义组件的场景。
+
+使用过 [语雀](https://www.yuque.com/) 的同学应该知道，这个产品的富文本编辑器可以插入各种各样自定义区块，是 “最像搭建” 的富文本编辑器。
+
+那么积木式搭建和富文本搭建存在哪些差异，除了富文本更倾向于记录静态内容外，还有哪些差异，两者是否可以结合？本文将围绕这两点进行讨论。
+
+## 2 精读
+
+还是先顺着原文谈谈对可视化搭建的理解：
+
+可视化搭建是通过可视化方式代替开发。**前端代码开发主要围绕的是 html + js + css**，那么无论是 markdown 语法，还是创建另一套模版语言亦或 JSON 构成的 DSL，**都是用一种 dsl + 组件 + css 的方式代替 html + js + css**，可视化搭建则更进一步，用 ui 代替了 dsl + 组件，**即精简为 ui 操作 + css**。
+
+可以看到，这种转换的推演过程存在一定瑕疵，因为每次转换都有部分损耗：
+
+**用 dsl + 组件 代替 html + js。**
+
+如果 dsl 拓展得足够好，理论上可以达到 html 的水平，尤其在垂直业务场景是不需要那么多特殊 html 标签的。
+
+但用组件代替 js 就有点奇怪了，首先并不是所有 js 逻辑都沉淀在组件里，一定有组件间的联动逻辑是无法通过一个组件 js 完成的，另一方面如果将 js 逻辑寄托在组件代码里，本质上是没有提效的，用源码开发项目与开发搭建平台的组件都是 pro code，更极端一点来说，无论是组件间联动还是整个应用都可以用一个组件来写，那搭建平台就无事可做了，这个组件也成了整个应用，game over。
+
+为了弥补这块缺憾，低代码能力的呼声越来越高，而低代码能力的核心在于设计是否合理，比如暴露哪些 API 可以覆盖大部分需求？写多少代码合适，如何以最小 API 透出最大弥补组件间缺失的 js 能力？目前来看，以状态数据驱动的低代码是相对优雅的。
+
+**用 ui 操作 代替 dsl + 组件。**
+
+UI 操作并不是标准的，相比直接操作模版或者 JSON DSL，UI 化后就仁者见仁智者见智了，但 UI 化带来的效率提升是巨大的，因为所见即所得是生产力的源泉，从直观的 UI 布局来看，就比维护代码更轻松。但 UI 化也存在两个问题，一个是可能有人觉得不如 markdown 效率高，另一个是功能有丢失。
+
+对于第一点 UI 操作效率不如 markdown 高，可能很多程序员都崇尚用 markdown 维护文档而不是富文本，原因是觉得程序员维护代码的效率反而比所见即所得高，但那可能是错觉，原因是还没有遇到好用的富文本编辑器，体验过语雀富文本编辑器后，相信大部分程序员都不会再想回头写 markdown。当然语雀富文本战胜 markdown 的原因有很多，我觉得主要两点是吸收并兼容了 markdown 操作习惯，与支持了更多仅 UI 能做到的拓展能力，对 markdown 形成降维打击。
+
+第二点功能丢失很好理解，markdown 有一套标准语法和解析器可以验证，但 UI 操作并没有标准化，也没有独立验证系统，如果无法回退到源码模式，UI 没有实现的功能就做不到。
+
+回到富文本搭建上，其实富文本搭建和普通网页构建并没有本质区别。html 是超文本标记语言，富文本是跨平台文档格式，从逻辑上这两个格式是可以互转的，只要富文本规则作出足够多的拓展，就可以大致覆盖 html 的能力。
+
+但富文本搭建有着显著的特征，就是光标。
+
+### 积木式搭建和富文本搭建的区别
+
+富文本以文本为中心，因此编辑文字的光标会常驻，编辑的核心逻辑是排版文字，并考虑如何在文字周围添加一些自定义区块。
+
+有了光标后，圈选也非常重要，因为大家编辑文字时有一种很自然的想法是，任何文字圈选后复制，可以粘贴到任何地方，那么所有插入到富文本中的自定义组件也要支持被圈选，被复制。
+
+实际上富文本内插入自定义区块也可以转换为积木式搭建方案解决，比如下面的场景：
+
+```text
+文本 A
+图表 B
+文本 C
+```
+
+我们在文本 A 与 文本 C 之间插入图表 B，也可以理解为拖拽了三个组件：文本组件 A + 图表组件 B + 文本组件 C，然后分别编辑这三个组件，微调样式后可以达到与富文本一样的编辑效果，甚至加上自由布局后，在布局能力上会超越富文本。
+
+虽然功能层面上富文本略有输给积木式搭建，但富文本在编辑体验上是胜出的，对于文字较多的场景，我们还是会选择富文本方式编辑而不是积木式搭建拖拽 N 个文本组件。
+
+所以微软 OneNote 也吸取了这个经验，毕竟笔记本主要还是记录文字，因此还是采用富文本的编辑模式，但创造性的加入了一个个独立区块，点击任何区域都会创造一个区块，整个文档可以由一个区块构成，也可以是多个区块组合而成，这样对于连贯性的文字场景可以采用一个富文本区块，对于自定义区块较多，比如大部分是图片和表格的，还可以回到积木式搭建的体验。由于 OneNote 采用绝对定位模拟流式布局的思路，当区块重叠时还可以自动挤压底部区块，因此多区块模式下编辑体验还是相对顺畅的。
+
+可以看出来这是一种结合的尝试，从前端角度来看，富文本本质上是对一个 div 进行 contenteditable 申明，那么一个应用可以整体是 contenteditable 的，也可以局部几个区块是，这种代码层面的自由度体现在搭建上就是积木式搭建可以与富文本搭建自由结合。
+
+### 积木式搭建与富文本搭建如何结合
+
+对于积木式搭建来说，富文本只是其中一个组件，在不考虑有富文本组件时是完全没有富文本能力的。比如一个搭建平台只提供了几个图表和基础控件，你是不可能在其基础上使用富文本能力的，甚至连写静态文本都做不到。
+
+所以富文本只是搭建中一个组件，就像 contenteditable 也只能依附于一个标签，整个网页还是由标签组成的。但对于一个提供了富文本组件的积木式搭建系统来说，文字与控件混排又是一个痛点，毕竟要以一个个区块组件的方式去拖拽文本节点，成本比富文本模式大得多。
+
+所以理想情况是富文本与整个搭建系统使用同一套 DSL 描述结构，富文本只是在布局上有所简化，简化为简单的平铺模式即可，但因为 DSL 描述打通，富文本也可以描述使用搭建提供的任意组件嵌套在内，所以只要用户愿意，可以将富文本组件拉到最大，整个页面都基于富文本模式去搭建，这就变成了富文本搭建，也可以将富文本缩小，将普通控件以积木方式拖拽到画布中，走积木式搭建路线。
+
+用代码方式描述积木式搭建：
+
+```html
+<bar-chart />
+<div>
+  <p>header</p>
+  <line-chart />
+  <p>footer</p>
+</div>
+```
+
+上述模式需要拖拽 `bar-chart`、`div`、`p`、`line-chart`、`p` 共 5 个组件。富文本模式则类似下面的结构：
+
+```html
+<bar-chart />
+<div contenteditable>
+  <p>header</p>
+  <line-chart />
+  <p>footer</p>
+</div>
+```
+
+只要拖拽 `bar-chart`、`div` 两个组件即可，`div` 内部的文字通过光标输入，`line-chart` 通过富文本某个按钮或者键盘快捷键添加。
+
+可以看到虽然操作方式不同，但本质上描述协议并没有本质区别，我们理论上可以将任何容器标签切换为富文本模式。
+
+## 3 总结
+
+富文本是一种重要的交互模式，可以基于富文本模式做搭建，也可以在搭建系统中嵌入富文本组件，甚至还可以追求搭建与富文本的结合。
+
+富文本组件既可以是搭建系统中一个组件，又可以在内部承载搭建系统的所有组件，做到这一步才算是真正发挥出富文本的潜力。
+
+> 讨论地址是：[精读《可视化搭建思考 - 富文本搭建》· Issue #262 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/262)
+
+**如果你想参与讨论，请 [点击这里](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)）

162.精读《Tasks, microtasks, queues and schedules》.md

@@ -0,0 +1,185 @@
+## 1 引言
+
+本周跟着 [Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) 这篇文章一起深入理解这些概念间的区别。
+
+先说结论：
+
+- Tasks 按顺序执行，浏览器可能在 Tasks 之间执行渲染。
+- Microtasks 也按顺序执行，时机是：
+  - 如果没有执行中的 js 堆栈，则在每个回调之后。
+  - 在每个 task 之后。
+
+## 2 概述
+
+### Event Loop
+
+在说这些概念前，先要介绍 Event Loop。
+
+首先浏览器是多线程的，每个 JS 脚本都在单线程中执行，每个线程都有自己的 Event Loop，同源的所有浏览器窗口共享一个 Event Loop 以便通信。
+
+Event Loop 会持续循环的执行所有排队中的任务，浏览器会为这些任务划分优先级，按照优先级来执行，这就会导致 Tasks 与 Microtasks 执行顺序与调用顺序的不同。
+
+### promise 与 setTimeout
+
+看下面代码的输出顺序：
+
+```js
+console.log("script start");
+
+setTimeout(function () {
+  console.log("setTimeout");
+}, 0);
+
+Promise.resolve()
+  .then(function () {
+    console.log("promise1");
+  })
+  .then(function () {
+    console.log("promise2");
+  });
+
+console.log("script end");
+```
+
+正确答案是 `script start`, `script end`, `promise1`, `promise2`, `setTimeout`，在线程中，同步脚本执行优先级最高，然后 promise 任务会存放到 Microtasks，setTimeout 任务会存放到 Tasks，Microtasks 会优先于 Tasks 执行。
+
+Microtasks 中文可以翻译为微任务，只要有 Microtasks 插入，就会不断执行 Microtasks 队列直到结束，在结束前都不会执行到 Tasks。
+
+### 点击冒泡 + 任务
+
+下面给出了更复杂的例子，提前说明后面的例子 Chrome、Firefox、Safari、Edge 浏览器的结果完全不一样，但只有 Chrome 的运行结果是对的！为什么 Chrome 是对的呢，请看下面的分析：
+
+```html
+<div class="outer">
+  <div class="inner"></div>
+</div>
+```
+
+```js
+// Let's get hold of those elements
+var outer = document.querySelector(".outer");
+var inner = document.querySelector(".inner");
+
+// Let's listen for attribute changes on the
+// outer element
+new MutationObserver(function () {
+  console.log("mutate");
+}).observe(outer, {
+  attributes: true,
+});
+
+// Here's a click listener…
+function onClick() {
+  console.log("click");
+
+  setTimeout(function () {
+    console.log("timeout");
+  }, 0);
+
+  Promise.resolve().then(function () {
+    console.log("promise");
+  });
+
+  outer.setAttribute("data-random", Math.random());
+}
+
+// …which we'll attach to both elements
+inner.addEventListener("click", onClick);
+outer.addEventListener("click", onClick);
+```
+
+点击 `inner` 区块后，正确输出顺序应该是：
+
+```text
+click
+promise
+mutate
+click
+promise
+mutate
+timeout
+timeout
+```
+
+逻辑如下：
+
+1. 点击触发 `onClick` 函数入栈。
+2. 立即执行 `console.log('click')` 打印 `click`。
+3. `console.log('timeout')` 入栈 Tasks。
+4. `console.log('promise')` 入栈 microtasks。
+5. `outer.setAttribute('data-random')` 的触发导致监听者 `MutationObserver` 入栈 microtasks。
+6. `onClick` 函数执行完毕，此时线程调用栈为空，开始执行 microtasks 队列。
+7. 打印 `promise`，打印 `mutate`，此时 microtasks 已空。
+8. 执行冒泡机制，outer div 也触发 `onClick` 函数，同理，打印 `promise`，打印 `mutate`。
+9. 都执行完后，执行 Tasks，打印 `timeout`，打印 `timeout`。
+
+### 模拟点击冒泡 + 任务
+
+如果将触发 `onClick` 行为由点击改为：
+
+```js
+inner.click();
+```
+
+结果会不同吗？答案是会（单元测试与用户行为不符合，单测也有无解的时候）。然而四大浏览器的执行结果也是完全不一样，但从逻辑上讲仍然 Chrome 是对的，让我们看下 Chrome 的结果：
+
+```text
+click
+click
+promise
+mutate
+promise
+timeout
+timeout
+```
+
+逻辑如下：
+
+1. `inner.click()` 触发 `onClick` 函数入栈。
+2. 立即执行 `console.log('click')` 打印 `click`。
+3. `console.log('timeout')` 入栈 Tasks。
+4. `console.log('promise')` 入栈 microtasks。
+5. `outer.setAttribute('data-random')` 的触发导致监听者 `MutationObserver` 入栈 microtasks。
+6. 由于冒泡改为 js 调用栈执行，所以此时 js 调用栈未结束，不会执行 microtasks，反而是继续执行冒泡，outer 的 `onClick` 函数入栈。
+7. 立即执行 `console.log('click')` 打印 `click`。
+8. `console.log('timeout')` 入栈 Tasks。
+9. `console.log('promise')` 入栈 microtasks。
+10. `MutationObserver` 由于还没调用，因此这次 `outer.setAttribute('data-random')` 的改动实际上没有作用。
+11. js 调用栈执行完毕，开始执行 microtasks，按照入栈顺序，打印 `promise`，`mutate`，`promise`。
+12. microtasks 执行完毕，开始执行 Tasks，打印 `timeout`，`timeout`。
+
+## 3 精读
+
+基于任务调度这么复杂，且浏览器实现方式很不同，下面两件事是我很不推荐的：
+
+1. 业务逻辑 “巧妙” 依赖了 microtasks 与 Tasks 执行逻辑的微妙差异。
+2. 死记硬背调用顺序。
+
+且不说依赖了调用顺序的业务逻辑本身就很难维护，不同浏览器之间对任务调用顺序还是不同的，这可能源于对 W3C 标准规范理解的偏差，也可能是 BUG，这会导致依赖于此的逻辑非常脆弱。
+
+虽然上面两个例子非常复杂，但我们也不必把这个例子当作经典背诵，只要记住文章开头提到的执行逻辑就可以推导：
+
+- Tasks 按顺序执行，浏览器可能在 Tasks 之间执行渲染。
+- Microtasks 也按顺序执行，时机是：
+  - 如果没有执行中的 js 堆栈，则在每个回调之后。
+  - 在每个 task 之后。
+
+记住 `Promise` 是 `Microtasks`，`setTimeout` 是 `Tasks`，JS 一次 Event Loop 完毕后，即调用栈没有内容时才会执行 `Microtasks` -> `Tasks`，在执行 `Microtasks` 过程中插入的 `Microtasks` 会按顺序继续执行，而执行 `Tasks` 中插入的 `Microtasks` 得等到调用栈执行完后才继续执行。
+
+上面说的内容都是指一次 Event Loop 时立即执行的优先级，不要和执行延迟时间弄混淆了。
+
+把 JS 线程的 Event Loop 当作一个函数，函数内同步逻辑执行优先级是最高的，如果遇到 `Microtasks` 或 `Tasks` 就会立即记录下来，当一次 Event Loop 执行完后立即调用 `Microtasks`，等 `Microtasks` 队列执行完毕后可能进行一些渲染行为，等这些浏览器操作完成后，再考虑执行 `Tasks` 队列。
+
+## 4 总结
+
+最后，还是要强调一句，不要依赖 `Microtasks` 与 `Tasks` 的执行顺序，尤其在申明式编程环境中，我们可以把 `Microtasks` 与 `Tasks` 都当作是异步内容，在渲染时做好状态判断即可，不用关心先后顺序。
+
+> 讨论地址是：[精读《Tasks, microtasks, queues and schedules》· Issue #264 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/264)
+
+**如果你想参与讨论，请 [点击这里](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)）

readme.md

@@ -11,17 +11,3 @@
 ## 关注前端精读微信公众号
 
 <img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">
-
-## Special Sponsors
-
-<table>
-      <tbody>
-        <tr>
-          <td align="center" valign="middle">
-            <a href="https://e.coding.net/?utm_source=weekly" target="_blank">
-              <img width="300" src="https://img.alicdn.com/tfs/TB107D.QbrpK1RjSZTEXXcWAVXa-1000-332.png">
-            </a>
-          </td>
-        </tr>
-      </tbody>
-</table>