React 虚拟dom

虚拟dom react核心机制

内存中轻量级JS对象树模拟真实DOM,主要目的是减少操作真实dom的开销

具体是通过diff算法计算最小的变更,批处理更新真实dom元素

diff算法

特点

同级去进行比较,不涉及跨层的一个比较

使用key值优化列表遍历过程

对相同类型的节点,递归比较其子节点

具体流程

从根节点出发,IF类型不同,销毁旧节点和子树,ELSE更新变化的属性进入子节点的递归

list diff 双指针遍历策略 old指针 new 指针

new和old相同key 复用节点

不同销毁old节点

改进:支持中断遍历,拆分为多个小任务。和优先级调度

相关推荐
Min;15 分钟前
cesium-kit:让 Cesium 开发像写 UI 组件一样简单
javascript·vscode·计算机视觉·3d·几何学·贴图
EveryPossible33 分钟前
展示内容框
前端·javascript·css
伊织code1 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰1 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js
拉不动的猪1 小时前
回顾关于筛选时的隐式返回和显示返回
前端·javascript·面试
yinuo1 小时前
不写一行JS!纯CSS如何读取HTML属性实现Tooltip
前端
gnip2 小时前
脚本加载失败重试机制
前端·javascript
遗憾随她而去.2 小时前
Uni-App 页面跳转监控实战:快速定位路由问题
前端·网络·uni-app
码农学院2 小时前
MSSQL字段去掉excel复制过来的换行符
前端·数据库·sqlserver
颜酱3 小时前
实现一个mini编译器,来感受编译器的各个流程
前端·javascript·编译器