温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

react虚拟dom与diff算法

发布时间:2020-08-16 04:39:53 来源:网络 阅读:1101 作者:杏sunshine 栏目:web开发
react拥有极速渲染的特点,这个特点依靠的就是react的虚拟dom和diff算法

react虚拟dom与diff算法

react虚拟dom与diff算法

对比两个图就可以发现标准dom机制下,用户在应用上的操作是直接对真实dom进行操作的,在react中我们操作
的是虚拟dom,用户的操作产生的数据改变或者state变量改变,都会保存到虚拟dom上,之后再批量的对这些更
改进行diff算法计算,对比操作前后的虚拟dom树,把更改后的变化再同步到真实dom上
虚拟DOM的原理:
React会在内存中维护一个虚拟DOM树,对这个树进行读或写,实际上是对虚拟DOM进行。当数据变化时,
React会自动更新虚拟DOM,然后将新的虚拟DOM和旧的虚拟DOM进行对比,找到变更的部分,得出一个diff,
然后将diff放到一个队列里,最终批量更新这些diff到DOM中。
虚拟DOM的优点:最终表现在DOM上的修改只是变更的部分,可以保证非常高效的渲染。
虚拟DOM:render 虚拟DOM + diff + 更新必要的 DOM 元素
虚拟DOM的缺点:首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。

DOM Diff算法的原理图

react虚拟dom与diff算法

在react的diff算法下,在同一位置对比前后dom节点,只要发现不同,就会删除操作前的dom节点(包括其子节点)
,替换为操作后的dom节点。
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI