最近在研究 Vue 3.6 的新特性时，我发现 Vue 的官方代码仓库里悄悄增加了两个新包：runtime-vapor 和 compiler-vapor。这立刻引起了我的兴趣，毕竟了解 Vue 的内部机制是很多开发者的习惯。

Vue 和 React 都是基于 vdom 的前端框架，组件渲染会返回 vdom，渲染器再把 vdom 通过增删改的 api 同步到 dom。当再次渲染时，会产生新的 vdom，渲染器会对比两棵 vdom 树，对有差异的部分通过增删改的 api 更新到 dom。

凡是依赖虚拟DOM的框架，都需要「比较前后节点变化」的Diff算法。网上有大量讲解Diff算法逻辑的文章。今天，我们换一种一劳永逸的学习方法 —— 实现React的核心Diff算法。

目前前端使用最多的就是 vue 或 react 了，我们在学习这两个框架的过程中，总有一个绕不开的话题：vnode，也就是虚拟 dom。什么是虚拟 DOM，引用一段 vue 官方的解释就是：

那么需要真实的操作DOM100w次,触发了回流100w次。每次DOM的更新都会按照流程进行无差别的真实dom的更新。所以造成了很大的性能浪费。如果循环里面是复杂的操作，频繁触发回流与重绘

所谓虚拟DOM就是用js对象来描述真实DOM，它相对于原生DOM更加轻量，因为真正的DOM对象附带有非常多的属性，另外配合虚拟DOM的diff算法，能以最少的操作来更新DOM，除此之外

Vue 源码中虚拟 DOM 与 Diff 算法的实现借鉴了 snabbdom 这个库，snabbdom 是一个虚拟 DOM 库，它专注于简单，模块化，强大的功能和性能。要彻底明白虚拟 DOM 与 Diff 算法就得分析 snabbdom 这个库到底做了什么？

fiber上的updateQueue经过React的一番计算之后，这个fiber已经有了新的状态，也就是state，对于类组件来说，state是在render函数里被使用的，既然已经得到了新的state

为什么在Vue3.0都已经出来这么久了我还要写这篇文章，因为目前自己还在阅读Vue2.x的源码，感觉有所悟。作为一个刚毕业的新人，对Vue框架的整体设计和架构突然有了一点认知，所以才没头没尾地突然写下了diff算法。

Virtual DOM 是一种编程理念。UI 信息被特定语言描述并保存到内存中，再通过特定的库，例如 ReactDOM 与真实的 DOM 同步信息。这一过程成为 协调 (Reconciliation)。上述只是 协调算法

传统diff计算两颗树形结构差异并进行转换，传统diff算法是这样做的：循环递归每一个节点；传统diff算法复杂度达到O(n^3 )这意味着1000个节点就要进行数10亿次的比较，这是非常消耗性能的

关于react的虚拟dom以及每次渲染更新的dom diff，网上文章很多。但是我一直信奉一个原则，即：但凡复杂的知识，理解之后都只需要记忆简单的东西，而想简单、精确描述一个复杂知识，是极困难的事。

如果不了解virtual dom，要理解diff的过程是比较困难的。虚拟dom对应的是真实dom， 使用document.CreateElement 和 document.CreateTextNode创建的就是真实节点。vue2.0才开始使用了virtual dom，有向react靠拢的意思。

React 是 facebook 出的一个前端框架. 设计的关键处就是性能问题。在本文中，我主要是介绍 Diff 算法以及 React 渲染 ，这样你可以更好的优化你的应用程序。