Merge branch 'v2' of https://github.com/dt-fe/weekly into v2

fix: snowpack issue 链接

152. 精读《recoil》.md

@@ -69,7 +69,7 @@ function App() {
 import { useRecoilState } from "recoil";
 
 function App() {
-  const [text, setText] = useRecoilValue(useRecoilState);
+  const [text, setText] = useRecoilState(useRecoilState);
 }
 ```
 
@@ -83,7 +83,7 @@ function App() {
 import { useSetRecoilState } from "recoil";
 
 function App() {
-  const setText = useSetRecoilValue(useRecoilState);
+  const setText = useSetRecoilState(useRecoilState);
 }
 ```
 

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