theme: juejin前言大家好，我是小杜杜，React中的虚拟DOM和diff算法是非常核心的特型，了解它们是非常有必要，只有了解，才能深入。 我们直接来看看以下几个问题： 虚拟DOM到底是什么，它与真实的DOM有什么不同？在React中，为什么自定义组件的首字母要大写？有了虚拟DOM，性能就一定能够得到提升吗？React的diff算法与传统的diff算法有什么区别？为...

前言都说“双端对比算法”，那么双端对比算法，到底是怎么样的呢？跟 React 中的 Diff 算法又有什么不同呢？ 要了解这些，我们先了解 React 中的 Diff 算法，然后再了解 Vue3 中的 Diff 算法，最后讲一下 Vue2 中的 Diff 算法，才能去比较一下他们的区别。 最后讲一下为什么 Vue 中不需要使用 Fiber 架构。 React 官方的解析其实为什...

Vue 和 React 都是基于 vdom 的前端框架，组件渲染会返回 vdom，渲染器再把 vdom 通过增删改的 api 同步到 dom。 当再次渲染时，会产生新的 vdom，渲染器会对比两棵 vdom 树，对有差异的部分通过增删改的 api 更新到 dom。 这里对比两棵 vdom 树，找到有差异的部分的算法，就叫做 diff 算法。 diff 算法是渲染器中最复杂的部分...

所谓 diff 算法，就是通过比对新旧两个虚拟节点不一样的地方，针对那些不一样的地方进行新增或更新或删除操作。接下来我们详细介绍节点更新的过程。 首先进行静态节点处理，判断新旧两个虚拟节点是否是静态节点，如果是，就不需要进行更新操作，可以直接跳过更新比对的过程 。 再更新处理新老节点的属性，获取新老节点的子节点，然后进行一定规则的判断。 这里值得多说一下的是，Vue2 在更新元...

壹 ❀ 引 我在[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?一文中，介绍了虚拟dom的概念，以及react中虚拟dom的使用场景。那么按照之前的约定，本文来聊聊react中另一个非常重要的概念，也就是fiber。那么通过阅读本文，你将了解到如下几个知识点： react在使用fiber之前为什么会出现丢帧（...

theme: smartblue本人已参与「新人创作礼」活动，一起开启掘金创作之路。 diff算法听起来很深奥。其实真的没那么难。今天我们就用最简单的话把diff算法讲清楚。 虚拟Dom什么是虚拟Dom在传统的dom中只有真实Dom↓ 这玩意就是真实DOM,我们能看见的节点元素。↓ react/vue这些组件化的框架诞生后，增加了一个概念，虚拟Dom。所以，在传统的浏览器和...

theme: channing-cyan highlight: dracula持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情 上一章我们实现了双端对比的逻辑，完成了左端和右端的对比，经过双端对比的筛选后，我们就得到了新旧children中间的差异部分，接下来就是算法的核心，如何处理这些差异部分？ 更新逻辑无非就是增加、删除和修改以...

theme: channing-cyan highlight: dracula持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情 前面我们实现了children的三种更新情况，分别是： array变成texttext变成arraytext变成text 这三种情况都是比较好处理的，但是还有一种情况，就是array变成array 这种情...