React 15栈调算法与历史学习价值.pdfVIP

本文由简悦SimpRead转码，原文地址

时下React16乃至React17都是业界公认的“当红炸子鸡”，相比之下React15经是一副黯淡

无光垂垂老矣的囧相了。

在这样的时代背景下，愿意自动自发地了解React15的人越来越少，这是一个令人心碎的现象。毕竟

有位曾经，“以史为镜，可以知兴替”；还有另一位曾经，“学习知识需要建立必要且完

整的上下文”——如果我们不清楚React15的运作机制，就无从把握它的局限性；如果我们不能确切地

把握React15的局限性，就无法从根本上理解React16大背后的设计动机。因此在追逐时代潮流

之前，必须学好。

在本讲，我们就要迈出“学习”的第一步，也是最重要的一步——理解React15的“栈调和”算法。

调和（Reconciliation）过程与Diff算法

迫于钻名词牛角尖的人实在太多，开篇我先来带你做一个概念辨析，显式一下专栏中所提及的

“调和”和“Diff”两个东西的确切指向。

“调和”又译为“协调”，协调过程的定义，藏在React对虚拟DOM这一概念的解释中，原文如

下：

VirtualDOM是一种编程概念。在这个概念里，UI以一种理想化的，或者说“虚拟的”表现形式被

保存于内存中，并通过如ReactDOM等类库使之与“的”DOM同步。这一过程叫作协调（调

和）。

我来划一下这段话里的重点：通过如ReactDOM等类库使虚拟DOM与“的”DOM同步，这一过

程叫作协调（调和）。

说人话：调和指的是将虚拟DOM映射到DOM的过程。因此严格来说，调和过程并不能和Diff画

等号。调和是“使一致”的过程，而Diff是“找不同”的过程，它只是“使一致”过程中的一个环节。

React的源码结构佐证了这一点：React从大的板块上将源码划分为了Core、Renderer和Reconciler

三部分。其中Reconciler（调和器）的源码位于src/renderers/shared/stack/reconciler这个路径，调

和器所做的工作是一系列的，包括组件的挂载、卸载、更新等过程，其中更新过程涉及对Diff算法的调

用。

所以说调和!Diff这个结论，是站得住脚的，如果你持有这个观点，说明你很专业，为你点赞！

但是！在如今大众的认知里，当我们讨论调和的时候，其实就是在讨论Diff。

这样的认知也有其合理性，因为Diff确实是调和过程中最具代表性的一环：根据Diff实现形式的不

同，调和过程被划分为了以React15为代表的“栈调和”以及React16以来的“Fiber调和”。在实际的

面试过程中，当面试官抛出Reconciliation相关问题时，也多半是为了了解候选人对Diff的掌握程度。因

此在本讲中，“栈调和”指的就是React15的Diff算法。

Diff策略的设计思想

在展开讲解Diff算法的具体逻辑之前，我们首先从整体上把握一下Diff的设计思想。

前面我们已经提到，Diff算法其实就是“找不同”的过程。在计算机科学领域，要想找出两个树结构之间

的不同,传统的计算方法是通过循环递归进行树节点的一一对比,这个过程的算法复杂度是O(n3)。尽

管这个算法本身已经是几代程序员持续优化的结果，但对计算能力有限的浏览器来说，O(n3)仍然意味

着一场性能。

具体来说，若一张页面中有100个节点（这样的情况在实际开发中并不少见），1003算下来就有十万次

操作了，这还只是一次Diff的开销；若应用规模更大一点，1000个节点，那么操作次数将会直接