react diff算法剖析总结

原文:https://zhuanlan.zhihu.com/p/20346379

总结一下个人看完之后的理解:

1、tree diff:只对相同层级的节点进行比较,如果子树在新树种不存在了,则直接删除。如果新加了树就是创建,那么如果进行了跨层级的树的移动怎么办?答案是直接删除移动前的树,在移动后的位置创建一颗一模一样的。

所以在react中尽量还是不要进行跨层级的移动。

2、component diff:如果是相同的组件,则继续比较virtual DOM tree。如果不是,则直接删除整个组件并替换成相同的组件

3、element diff:有移动,创建和删除操作,这个不用说都直接什么意思。具体的算法细节可以看原文,这里不深究。

时间: 2024-10-07 22:13:15

react diff算法剖析总结的相关文章

react Diff算法

一个页面就是一个DOM树,当页面发生变化的时候,又会形成另一个DOM树,这两个树要作比较的时候,就用到了Diff算法. 传统的diff算法为O(n^3),相当复杂. 时间复杂度是检测一个算法或者一个性能好坏的重要因数. 其他它没有什么神奇的,只是一个名词而已. O(n^3)  ->  O(n^2)  ->   O(n) 从左到右,时间复杂度越来越小,越小性能越好. 传统的diff算法会比较不同,react的diff算法会先检查结构是否相同,如果不同直接销毁重建. react将diff算法从O(

ReactiveNative学习之Diff算法

React 源码剖析系列 - 不可思议的 react diff深入浅出React(四):虚拟DOM Diff算法解析React diff 算法总结链接引用的文章React出于性能的考虑,为了避免频繁操作DOM,采用了虚拟DOM结构(virtual DOM):每当虚拟DOM树发生变化树发生变化时,React会将当前DOM树和之前的虚拟DOM树进行diff算法对比,得到虚拟DOM结构的区别,然后仅仅渲染差异部分.ReactiveNative官方称,不同类型的 component 是很少存在相似 DO

React diff策略

React dom过程 不可变数据,Immutable 是在 数据结构参数变化 到 虚拟dom对象的阶段. diff算法是在 旧的虚拟dom 到 新的虚拟dom的阶段. 从数据结构 -> 虚拟对象 -> 到虚拟dom树 -> 新的虚拟dom -> 渲染成真实dom -> 挂载 相比于一版树形结构对比,算法复杂度可以从(o(n^3))降低到 (o(n)). 树形dom树结构如果有1000子节点,一般diff算法,会比较1000^3次,浪费资源. diff策略提供了逐步提升渲染d

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非

react虚拟dom diff算法

react虚拟dom:依据diff算法台 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快!jsg更容易表示节点 所以:把js和html混写在一起来解决,React出现了!!! diff算法是虚拟dom核心: 传统的diffs算法复杂度是次方级别增长,而react用的优化过的diff算法: 过程:1.节点比较(属性.文本):2.记录差别(编号):3.增删改查(js): 优化点: 情景1:

react虚拟dom与diff算法

react拥有极速渲染的特点,这个特点依靠的就是react的虚拟dom和diff算法 对比两个图就可以发现标准dom机制下,用户在应用上的操作是直接对真实dom进行操作的,在react中我们操作 的是虚拟dom,用户的操作产生的数据改变或者state变量改变,都会保存到虚拟dom上,之后再批量的对这些更 改进行diff算法计算,对比操作前后的虚拟dom树,把更改后的变化再同步到真实dom上 虚拟DOM的原理: React会在内存中维护一个虚拟DOM树,对这个树进行读或写,实际上是对虚拟DOM进行

React 虚拟dom与diff算法

一.React的虚拟dom react生成真实dom的步骤如下: 1.state(数据)与模版结合生成虚拟dom. 2.React根据虚拟dom的结构生成真实dom节点(1). 3.数据发生改变时,生成新的虚拟dom. 4.新的虚拟dom与原先的虚拟dom进行比较,将新的虚拟dom变动的部分替换原虚拟dom.(2) 5.根据变动后的虚拟dom结构生成真实的dom. 注解:(1)React根据虚拟dom生成真实dom,而不是直接生成真实dom.根据这个特性,可以实现跨端应用(React Nativ

图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法

其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 1.两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 2.同一层级的一组节点,他们

react redux 深入剖析--干货

## 技术栈: react + redux + webpack + react-router + ES6/7/8 + immutable ## 运行项目(nodejs 6.0+) ``` git clone https://github.com/bailicangdu/react-pxq.git cd react-pxq npm i 或者运行 yarn(推荐) npm start npm run build (发布)``` ## 说明 > 本项目主要用于理解 react 和 redux 的编译方