> 1. 本篇已收录到掘金专栏[《React 基础与进阶》](https://juejin.cn/column/7142674773930147853)，该系列目前一共 16 篇。 > > 2. 欢迎围观我的[“朋友圈”](https://yayujs.com)、加入[“低调务实优秀中国好青年”](https://www.yuque.com/yayu/nice-people/xou8qr)前端社群，分享技术，带你成长。 ## 二叉树二叉树（Binary tree），每个节点最多只有两个分支的树结构。通常分支被称作“左子树”或“右子树”。二叉树的分支具有左右次序，不能随意颠倒。 ## 完全二叉树在一颗二叉树中，若除最后一层外的其余层都是满的，并且最后一层要么是满的，要么在右边缺少连续若干节点，则此二叉树为完全二叉树（Complete Binary Tree）以下都是完全二叉树： ![截屏2022-11-19 下午6.08.45.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80f84d9e6d8e45a4b6be7fe3ab9a440d~tplv-k3u1fbpfcp-zoom-1.image#?w=1638\&h=506\&s=76749\&e=png\&b=1d1e20) ## 二叉堆二叉堆（binary heap）是一种特殊的堆，二叉堆是完全二叉树或者是近似完全二叉树。二叉堆满足堆特性：父节点的键值总是保持固定的序关系于任何一个子节点的键值，且每个节点的左子树和右子树都是一个二叉堆。当父节点的键值总是大于或等于任何一个子节点的键值时为“最大堆”（max heap）。当父节点的键值总是小于或等于任何一个子节点的键值时为“最小堆”（min heap）。 ![截屏2022-11-19 下午6.27.53.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de9b9f79b62b4e37bfb90e0691bd195f~tplv-k3u1fbpfcp-zoom-1.image#?w=1328\&h=602\&s=65645\&e=png\&b=1d1e20) ## 最小堆今天我们只讲最小堆（min heap）。因为 React 的任务列表（taskQueue）用的就是最小堆。 React 用的是数组结构表示的最小堆，一张图带你明白最小堆如何映射为数组： ![截屏2022-11-19 下午6.41.13.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7f77f61ced94053aa0a1851459c9375~tplv-k3u1fbpfcp-zoom-1.image#?w=1286\&h=508\&s=64198\&e=png\&b=1d1e20) ## React 采用原因 React 为什么采用最小堆结构呢？这是因为在最小堆结构中，最小值就在第一个，React 可以快速的取出最小值。 React 为什么要取出最小值而不是最大值呢？我们可以这样设想，React 将更新任务拆成多个小任务，每个小任务的数据结构是一个带着 expirationTime 的对象，expirationTime 表示这个任务的过期时间，expirationTime 越小就表示过期时间越近，该任务的优先级就越高，取出最小值就相当于取出优先级最高的任务。 ## React 函数实现 React 的最小堆涉及 5 个函数： 1. push，往最小堆插入新节点 2. pop，删除根节点，就是那个最小的值 3. siftUp，上浮，不停地交换节点和父节点 4. shiftDown，下沉，不停地交换节点和子节点 5. peek，获取根节点，也就是数组的第一个元素，也就是优先级最高的那个任务接下来我们进行详细的讲解。 ## 插入过程（push）我们先讲二叉堆的插入过程：当插入一个新节点的时候，我们会在二叉堆的最后添加，然后将其“上浮”到正确位置。举个例子：我们尝试在下面这个二叉堆中，插入新节点，它的值为 1，我们会将这个值与父节点的值进行对比，如果小于父节点，就交换两个节点，就这样不断比较上浮，直到父节点比它小 ![截屏2022-11-19 下午7.14.09.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7791e0fab58e46fba8b310b3488bcc7e~tplv-k3u1fbpfcp-zoom-1.image#?w=1984\&h=520\&s=103921\&e=png\&b=1d1e20) React 的实现代码如下： ```javascript // 源码地址：https://github.com/facebook/react/blob/main/packages/scheduler/src/SchedulerMinHeap.js function push(heap, node) { const index = heap.length; heap.push(node); siftUp(heap, node, index); } function siftUp(heap, node, i) { let index = i; while (index > 0) { // 获取父节点的索引位置 const parentIndex = (index - 1) >>> 1; const parent = heap[parentIndex]; if (compare(parent, node) > 0) { // 如果父节点更大，就交换位置 heap[parentIndex] = node; heap[index] = parent; index = parentIndex; } else { // 直到父节点更小，就退出 return; } } } function compare(a, b) { // 首先比较 sortIndex，其次是 id const diff = a.sortIndex - b.sortIndex; return diff !== 0 ? diff : a.id - b.id; } // 测试代码 let taskQueue = [{sortIndex: 2}, {sortIndex: 7}, {sortIndex: 5}, {sortIndex: 12}, {sortIndex: 22}, {sortIndex: 17}]; push(taskQueue, {sortIndex: 1}) console.log(JSON.stringify(taskQueue)) ``` ## >>> 1 这个实现过程中，可能不熟悉的是这句： ```javascript const parentIndex = (index - 1) >>> 1; ``` 这是用来获取父节点的索引值的。我们先看下 `>>>` 这个运算符，引用 [MDN 的介绍](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift)： > 无符号右移运算符（>>>）（零填充右移）将左操作数计算为无符号数，并将该数字的二进制表示形式移位为右操作数指定的位数，取模 32。向右移动的多余位将被丢弃，零位从左移入。其符号位变为 0，因此结果始终为非负数。与其他按位运算符不同，零填充右移返回一个无符号 32 位整数。看起来有些复杂？没关系，我们直接讲过程，我们以 `5 >>> 1`为例：首先将 `5` 转为 32 位的二进制数：`00000000000000000000000000000101`。 `>>> 1`表示将该二进制向右移动 1 位，向右移动出去的被丢弃，左边部零，于是变成了`0000000000000000000000000000010`，换算成十进制，就是 `2`，所以 `5 >>> 1`的结果就是 `2`。我们再举一个例子，`4 >>> 1`，4 是 `00000000000000000000000000000101`，向右移动一位变成 `0000000000000000000000000000010`，换算成十进制，就是 `2`，所以 `4 >>> 1`的结果也是 `2`。我们再试几个例子： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4afc1c5d363242a2abd37205fbfb6141~tplv-k3u1fbpfcp-zoom-1.image#?w=348\&h=556\&s=27491\&e=png\&b=202124) 所以你可以简单理解为，`x >>> 1`表示的就是除以 `2` 后取整。我们再看下最小堆和数组的映射图： ![截屏2022-11-19 下午6.41.13.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9739f3b7f084b90a36b539f03eacf27~tplv-k3u1fbpfcp-zoom-1.image#?w=1286\&h=508\&s=64198\&e=png\&b=1d1e20) 你看父节点的索引值是不是就是 `(子节点的索引值 - 1) / 2 后取整`。 ## 删除过程（pop）现在我们来看删除过程，因为我们删除的是根节点，它的具体流程是： 1. 取出最后一个节点，替换掉根节点 2. 将节点“下沉”到正确位置我们举个例子： ![截屏2022-11-19 下午8.05.25.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/884310eeba4f406e868ec62fc57981ec~tplv-k3u1fbpfcp-zoom-1.image#?w=2360\&h=482\&s=122062\&e=png\&b=1d1e20) 现在我们要删除根节点 2 ，我们将最后一个节点 25，替换掉根节点 2，然后将新的根节点 25，与两个子节点进行比较，将节点与更小的那个子节点进行交换，然后这样不断比较下沉，直到子节点都比它大。它的具体实现如下： ```javascript // 源码地址：https://github.com/facebook/react/blob/main/packages/scheduler/src/SchedulerMinHeap.js function pop(heap) { if (heap.length === 0) { return null; } const first = heap[0]; // JavaScript 的 pop 方法删除并返回数组的最后一个元素 const last = heap.pop(); if (last !== first) { heap[0] = last; siftDown(heap, last, 0); } return first; } function siftDown(heap, node, i) { let index = i; const length = heap.length; const halfLength = length >>> 1; while (index < halfLength) { const leftIndex = (index + 1) * 2 - 1; const left = heap[leftIndex]; const rightIndex = leftIndex + 1; const right = heap[rightIndex]; // 如果 left 比 node 小 if (compare(left, node) < 0) { // 如果 right 比 left 还小，说明 right 最小，right 与 node 交换 if (rightIndex < length && compare(right, left) < 0) { heap[index] = right; heap[rightIndex] = node; index = rightIndex; } // 说明 left 最小，left 与 node 交换 else { heap[index] = left; heap[leftIndex] = node; index = leftIndex; } } // 如果 left node 大，但 right 比 node 小，right 与 node 交换 else if (rightIndex < length && compare(right, node) < 0) { heap[index] = right; heap[rightIndex] = node; index = rightIndex; } else { // 子元素都比 node 大 return; } } } // 示例代码 let taskQueue = [{sortIndex: 2}, {sortIndex: 5}, {sortIndex: 7}, {sortIndex: 12}, {sortIndex: 22}, {sortIndex: 17}, {sortIndex: 25}]; pop(taskQueue) // [{"sortIndex":5},{"sortIndex":12},{"sortIndex":7},{"sortIndex":25},{"sortIndex":22},{"sortIndex":17}] console.log(JSON.stringify(taskQueue)) ``` ## halfLength siftDown 的实现中，我认为最有意思是在 `halfLength` 这里： ```javascript const length = heap.length; const halfLength = length >>> 1; while (index < halfLength) {//...} ``` 实际上 React 这里之前直接用的 `index < length` 而非 `index < halfLength`，我们可以查看当时的[提交记录](https://github.com/facebook/react/commit/316aa368654427270a53543cd3f4952746374596)： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c774c0b548f44b33b7d014c0400c9594~tplv-k3u1fbpfcp-zoom-1.image#?w=628\&h=252\&s=45905\&e=png\&b=121b1d) 那为什么只用比较一半就可以了呢？如果我们尝试自己去画几个最小堆，发现也确实如此，完全不用全部比较一遍。如果非要从算术的角度来看的话，我们可以这样想：假设父节点的 index 为 x，那么左子节点的 index 为 2x + 1，右子节点的 index 为 2x + 2，每一次 shiftDown，index 的最大变化就是 2x + 2，而 2x + 2 最大只能等于 length - 1，那么： ```javascript 因为 2x + 2 <= length - 1 所以 x <= length/2 - 1.5 我们知道 y >>> 1 ，在 y 为正数的情况下，计算的结果为 y/2 - 0.5 或者 y/2 如果 x <= length/2 - 1.5 那么肯定 x < length/2 - 0.5 以及 x < length/2 所以肯定 x < length >>> 1 ``` ## peek 除此之外，还有一个 peek 方法，获取数组的第一个元素： ```javascript function peek(heap) { return heap.length === 0 ? null : heap[0]; } ``` 好了，React 的 [SchedulerMinHeap.js](https://github.com/facebook/react/blob/main/packages/scheduler/src/SchedulerMinHeap.js) 这个文件的所有代码就正式讲完了，它是一个几乎完全独立的实现，当然 Scheduler 也是独立的，下篇我们接着讲 Scheduler。 ## React 系列该系列带大家从源码的角度深入理解 React 的各个 API 和执行过程。本篇已收录到掘金专栏[《React 基础与进阶》](https://juejin.cn/column/7142674773930147853)。该系列目前一共 16 篇。此外我还写过 [JavaScript 系列](https://juejin.cn/column/7035531575974592520)、[TypeScript 系列](https://juejin.cn/column/7029490086710345742)、[React 系列](https://juejin.cn/column/7142674773930147853)、[Next.js 系列](https://juejin.cn/column/7343569488744611849)、[冴羽答读者问](https://juejin.cn/column/7039526067891077151)等 14 个系列文章，全系列文章目录：通过文字建立交流本身就是一种缘分，欢迎围观我的[“朋友圈”](https://yayujs.com)、加入[“低调务实优秀中国好青年”](https://www.yuque.com/yayu/nice-people/xou8qr)前端社群，分享技术，带你成长。