什么是diff算法?
2021/6/18 12:26:53
本文主要是介绍什么是diff算法?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
我们在进行dom操作的时候可能会出现需要更新某一个dom元素,但如果不更新整个组件就无法生效,其实我们使用diff算法配合虚拟dom即可实现。
虚拟DOM 本质上就是一个JS对象,用来描述你希望在屏幕上看到的内容
虚拟dom
Diff算法 执行过程 初次渲染时,React会根据初始化的state(model),创建一个虚拟DOM对象(树) 根据虚拟DOM生成真正的DOM,渲染到页面 当数据变化后(setState()),会重新根据新的数据,创建新的虚拟DOM对象(树) 与上一次得到的虚拟DOM对象,使用Diff算法比对(找不同),得到需要更新的内容 最终,React只将变化的页游内容更新(patch)到DOM中,重新渲染到页面
diff算法
代码演示 组件render()调用后,根据状态和JSX结构生成虚拟DOM对象(renderwww.sangpi.com()方法的调用并不意味着浏览器进行渲染,render方法调用时意味着Diff算法开始比对了) 示例中,只更新p元素的文本节点内容 初次渲染的DOM对象
代码演示
数据更新之后的虚拟DOM对象
页游代码演示2
工作角度:应用第一,原理第二 原理有助于更好的理解React的自身运行机制 setState() 异步更新数据 父组件更新导致子组件更新,纯组件提升性能 思路清晰简单为前提,虚拟DOM和Diff保效率(渲染变化的组件) 虚拟DOM -> state + JSX 虚拟DOM最大的特点是 脱离了浏览器的束缚,也就是意味着只要是能支持js的地方都可以用到react,所以为什么说react是可以进行跨平台的开发 以上就是关于dom和diff算法的介绍了,希望能帮到大家。
这篇关于什么是diff算法?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求