React完成DIff的过程

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量502 收藏 1
点赞数
文章标签： 前端 javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34574204/article/details/121530857
版权
本文探讨了React中如何对组件进行优化，包括使用key进行同级元素比较，确保只比较同class的组件，以及利用shouldComponentUpdate方法实现选择性渲染。通过SetState的脏检查机制，React在循环结束时更新dirty组件，提高性能。
摘要由CSDN通过智能技术生成
  1. 把树形结构按层级进行分层，只比较同级元素
  2. 通过给列表中的元素添加唯一标识key，进行同层级的子节点比较
  3. React只比较同class的compontent（class是组件的名称）
  4. 合并操作，调用compontent的SetState的方法时，将每个元素添加表示dirty，到时间循环结束，react检查所有的dirty compontent进行重新渲染
  5. 选择性渲染，可以重写shouldCompontentUpdate来提高diff

在这里插入图片描述

大莲芒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react中的diff算法，通俗易懂的解读
weixin_59558923的博客
09-25 838
如果老节点被复用了，就会将该老节点原来所在的位置和第一轮循环确定的基准位置值比较，老节点的位置在基准位置值的左边时，说明复用该老节点的新节点需要重新插入，基准位置值不变；第二轮循环开始，新节点存在key值，为3，从map中寻在以key为3的值，发现map中存在该值，且该老节点的key和type都newChild相同，可以复用，然后将该老节点的位置(2)与基准位置值(0)对比，发现该老节点位置在基准位置的右边，复用该老节点的新节点无须移动，基准位置值更新为2，最后从map中删除key为3的值。
【React】react的diff算法流程
qq_53715003的博客
11-18 1118
react的diff算法
React中的Diff算法
m0_53644435的博客
03-12 1万+
一、什么是Diff算法
React Diff算法详解
祥哥的说
01-14 6448
react diff
React之Diff算法
认定的总要想办法去完成。
02-02 1420
对于Vue2的diff算法使用了双指针，React的diff算法没有使用双指针，是因为更新的jsx对象的newChildren为数组的形式，但是和newChildren中每个组件比较的是current fiber，对fiber的兄弟节点是通过silbing来相连的，我们通过下标来去获取下一个newChildren项，但是对于fiber只能通过fiber.silbing来获取对应的项，所以没有使用双指针法来进行diff。既然唯一的可能性已经不能复用，则剩下的fiber都没有机会了，所以都需要标记删除。
react项目配合diff实现文件对比差异功能
见贤思齐焉，见不贤内自省
01-07 4242
react项目配合diff实现文件对比差异功能
React diff
橙煦媛的博客
08-01 475
传统diff算法传统diff算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，其中 n 是树中节点的总数let result = []; const diffLeafs = function (beforeLeaf, afterLeaf) { // 获取较大节点树的长度 let count = Math.max(beforeLeaf.children.len
React如何避免重渲染
01-19
当 props 和 state 发生变化时，React 会重新渲染整个组件，组件重新渲染的过程可简化如下图： 译者之前对diff的理解是，对于一个改变 props 的组件，diff能自动计算出组件内部DOM树的不同，然后经过对比，找出真正...
剖析 React 内部运行机制.rar
12-29
当React组件的状态改变时，虚拟DOM会进行快速的计算，找出最小的更新子集，然后只对实际DOM进行必要的修改，这种过程称为"diff"算法，显著提高了UI更新的性能。 2. 组件生命周期 React组件有三个主要的生命周期...
rn-diff：通过清楚地显示从一个版本到另一个版本的更改，React Native升级更加轻松
02-05
"rn-diff"是一个专门针对React Native版本升级的工具，它旨在简化从一个版本到另一个版本的更新过程。通过清晰地展示两个不同版本间的差异，开发者可以更有效地理解和应用这些变更，避免手动查找和比较源代码的繁琐...
React构建用户界面组件化架构JavaScript库
06-11
当状态或属性发生变化时，React 会计算出虚拟 DOM 和真实 DOM 之间的差异（也称为“diff”），并仅对变化的部分进行实际的 DOM 更新。这种方式极大地减少了浏览器的重排和重绘次数，显著提升了应用性能。 ##### 2. ...
React
02-18
当组件的状态变化时，React会计算出新的虚拟DOM树与旧树的差异（称为“diff”），然后仅对实际DOM进行最小化的更新，提高性能。 React使用JSX语法，这是一种JavaScript的扩展，允许开发者在JavaScript中写HTML。JSX...
React之Diff 算法
qq_53742640的博客
04-04 1101
在 React 中，通过 React.createElement 也能生成一个虚拟 DOM 节点（ReactElement）。在 React15 及以前，采用了递归的方式创建虚拟 DOM，递归过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间，造成卡顿。React16 将递归的无法中断的更新重构为异步的可中断更新，推出了新的 Fiber 架构。原本的 ReactElement 只有 children，在中断恢复时，无法找到其兄弟节点和父节点，无法从断点处继续完成渲染工作。
react中的diff算法
qq_42931285的博客
02-08 1429
react中的diff算法
React diff的原理是什么？
郊眠寺
06-09 4100
跟一致，通过引入的概念，极大地避免无效的操作，使我们的页面的构建效率提到了极大的提升而算法就是更高效地通过对比新旧来找出真正的变化之处传统diff算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，将算法进行一个优化，复杂度姜降，两者效率差距如下图：中算法主要遵循三个层级的策略：节点跨层级的操作不做优化，只会对相同层级的节点进行比较只有删除、创建操作，没有移动操作，如下图：发现新树中，R节点下没有了A，那么直接删除A，在D节点下创建A以及下属节点上述操作中，只有删除和创建操作如果是同
Vue和React的区别到底是什么？
热门推荐
Always-Learning
03-06 2万+
一提到前端框架，相信大家都对Vue和React不陌生，这两个前端框架都是比较主流的，用户也都比较多，但是我们在使用这些框架的时候，是否对这两个框架之间的区别有所了解呢？接下来，让我们来一起的系统梳理这两个框架的区别是什么吧~ 预备知识介绍 在了解Vue和React的区别之前，我们首先来了解一下MVC和MVVM架构，这个知识点有助于我们对后续知识的了解。 MVC架构 首先MVC指的是Model-View-Controller，分别代表着模型层、视图层、控制器。 Model（模型层），主要管理的是.
react的diff算法讲解
qq_35629054的博客
07-27 3098
传统的diff算法 通过循环递归进行依次对比，算法复杂度高达O(n^3)，n代表树的节点数，这个算法有多么庞大？如果要展示1000个节点就要执行上亿次比较，你电脑CPU再好也很难在1秒内计算出差异。 react的diff算法 先了解一下什么是调和？ 将virtual DOM（虚拟dom）转换成actual DOM(真实dom)的 最少操作过程就叫调和，简单理解就是简化算法复杂度 react的diff算法 react的diff就是实现了上述的调和，简化了算法的复杂度 react的三大diff策略
完整的React 的 Diff 过程
My_wife_QBL的博客
08-05 619
在计算机科学中，Diff（差异比较）是指比较两个数据结构之间的差异。在 React 中，Diff 主要用于比较虚拟 DOM（Virtual DOM）与实际 DOM 之间的变化，以便高效地更新用户界面。通过这种方式，React 能够最大限度地减少对真实 DOM 的操作，从而提高性能。React 的 Diff 过程是其高效性能的核心所在。通过智能的虚拟 DOM 比较、组件类型比较和合理的更新策略，React 能够在性能和用户体验之间找到平衡。
vue ref和reactive区别
最新发布
灰海
08-25 318
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
深入理解React组件生命周期
React的响应式特性体现在，当组件的状态改变时，React会自动计算出需要更新的DOM部分，使用高效的diff算法更新虚拟DOM，并同步到实际DOM中，这一过程大大减少了不必要的DOM操作，提升了性能。JSX是一种特殊语法，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值