首页 > 编程语言 >react的diff算法

react的diff算法

时间:2023-03-21 09:47:43浏览次数:35  
标签:DOM react 算法 组件 diff 节点

diff策略

React用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度

  • 策略一(tree diff):
    Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计。

  • 策略二(component diff):
    拥有相同类的两个组件 生成相似的树形结构,
    拥有不同类的两个组件 生成不同的树形结构。

同一类型的两个组件,组件A变化为组件B时,可能Virtual DOM没有任何变化,如果知道这点(变换的过程中,Virtual DOM没有改变),可节省大量计算时间,所以 用户 可以通过 shouldComponentUpdate() 来判断是否需要 判断计算。

不同类型的组件,将一个(将被改变的)组件判断为dirty component(脏组件),从而替换 整个组件的所有节点。

  • 策略三(element diff):
    对于同一层级的一组子节点,通过唯一id区分。

Vue diff算法和react diff算法区别

  • vue比对节点,当节点元素类型相同,但是className不同,认为是不同类型元素,删除重建,而react会认为是同类型节点,只是修改节点属性

  • vue的列表对比,采用的是两端到中间比对的方式,而react采用的是从左到右依次对比的方式(利用元素的index和标识lastIndex进行比较,如果满足index < lastIndex就移动元素,删除和添加则各自按照规则调整)。

标签:DOM,react,算法,组件,diff,节点
From: https://www.cnblogs.com/lasn/p/17238805.html

相关文章

  • Java算法01
    冒泡排序将大的数往后排 packageScanner; importjava.util.*; publicclassDemo04{  publicstaticvoidmain(String[]args){ Scannersan=newScanner(......
  • 【数据结构与算法】堆与堆排序
    堆与堆排序1堆的概念堆用于维护一个数集。堆是一个完全二叉树小根堆:每个结点都小于等于它的左右子结点(递归定义)推论:每个结点都是以其为根节点的子树的最小值......
  • 「解题报告」ARC128E K Different Values
    我还是很菜啊。先考虑判定问题。考虑先找出一些显然的必要条件。记\(m=\suma_i\)。那么我们首先对\(m\)进行分块,每\(k\)个一块,设块数为\(p\),最后一个块的大小为......
  • [React] Flushing state updates synchronously with flushSync
    InReact,everyupdateissplitintwophases:During render, Reactcallsyourcomponentstofigureoutwhatshouldbeonthescreen.During commit, React......
  • 算法笔记的笔记——第4章 算法初步
    排序选择排序(简单选择排序)从1到n进行n趟操作每趟从待排序部分(i到n)选择最小元素与待排序部分第一个元素(i)交换复杂度O(n2)for(inti=0;i<n;i++){ intk=i;......
  • 算法笔记的笔记——第5章 数学问题
    简单数学略最大公约数与最小公倍数最大公约数intgcd(inta,intb){if(b==0){returna;}else{returngcd(b,a%b);}}......
  • Boruvka 算法简记
    这个算法怕是只会存在于模拟赛里了。Boruvka算法是用于解决完全图的生成树的一类算法,因为完全图边数很多,因此普通时间复杂度基于边数的做法不适用。Boruvka算法核心思想......
  • [算法课]全面翻新计划!第二周全解
    文章目录​​上课内容​​​​试题A:组队​​​​数据​​​​详细分析​​​​颜老板版本暴力枚举​​​​吐槽​​​​更新版​​​​思路​​​​枚举版本​​​​思路......
  • [算法课]全面翻新计划!第十一周全解
    文章目录​​上课内容​​​​贪心法​​​​例1兑换货币​​​​颜老板代码​​​​更新版​​​​测试数据​​​​博主提示:​​​​注意:​​​​贪心算法的思路:​​​​......
  • 代码随想录算法训练营Day48 动态规划
    代码随想录算法训练营代码随想录算法训练营Day48动态规划|198.打家劫舍213.打家劫舍II337.打家劫舍III198.打家劫舍题目链接:198.打家劫舍你是一个专业的小偷,计划偷......