没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
React diff算法的实现示例算法的实现示例
主要介绍了React diff算法的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小
编过来看看吧
前言前言
在上一篇文章,我们已经实现了React的组件功能,从功能的角度来说已经实现了React的核心功能了。
但是我们的实现方式有很大的问题:每次更新都重新渲染整个应用或者整个组件,DOM操作十分昂贵,这样性能损耗非常
大。
为了减少DOM更新,我们需要找渲染前后真正变化的部分,只更新这一部分DOM。而对比变化,找出需要更新部分的算法我
们称之为diff算法。
对比策略对比策略
在前面两篇文章后,我们实现了一个render方法,它能将虚拟DOM渲染成真正的DOM,我们现在就需要改进它,让它不要再
傻乎乎地重新渲染整个DOM树,而是找出真正变化的部分。
这部分很多类React框架实现方式都不太一样,有的框架会选择保存上次渲染的虚拟DOM,然后对比虚拟DOM前后的变化,
得到一系列更新的数据,然后再将这些更新应用到真正的DOM上。
但也有一些框架会选择直接对比虚拟DOM和真实DOM,这样就不需要额外保存上一次渲染的虚拟DOM,并且能够一边对比一
边更新,这也是我们选择的方式。
不管是DOM还是虚拟DOM,它们的结构都是一棵树,完全对比两棵树变化的算法时间复杂度是O(n^3),但是考虑到我们很少
会跨层级移动DOM,所以我们只需要对比同一层级的变化。
只需要对比同一颜色框内的节点
总而言之,我们的diff算法有两个原则:
1. 对比当前真实的DOM和虚拟DOM,在对比过程中直接更新真实DOM
2. 只对比同一层级的变化实现
我们需要实现一个diff方法,它的作用是对比真实DOM和虚拟DOM,最后返回更新后的DOM
/**
* @param {HTMLElement} dom 真实DOM
* @param {vnode} vnode 虚拟DOM
* @returns {HTMLElement} 更新后的DOM
*/
function diff( dom, vnode ) {
// ...
}
接下来就要实现这个方法。
在这之前先来回忆一下我们虚拟DOM的结构:
虚拟DOM的结构可以分为三种,分别表示文本、原生DOM节点以及组件。
// 原生DOM节点的vnode
{
tag: 'div',
attrs: {
className: 'container'
},
children: []
}
资源评论
weixin_38731385
- 粉丝: 2
- 资源: 871
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- ### 词向量的介绍、使用技巧和优缺点的文章
- 基于STM32F103CBT6单片机GC65+MP2625+CC1101 GPSTrack模块板硬件(原理图+PCB)工程文件
- ### 通道处理过程模拟概念、优缺点和使用技巧
- ### MyBatis动态SQL介绍说明、使用技巧和优缺点
- 上传下载仿163网盘无刷新文件上传 for Jsp-fileupload-jsp.rar
- VMware Workstation业界非常稳定且安全的桌面虚拟机软件-计算机上运行多个操作系统,支持Windows、DOS等
- 基于STM8L101F3P6单片机+LY2508A33P+CC1100遥控器硬件(原理图+PCB)工程文件.zip
- 上传下载WAP图铃下载系统-unimg.rar
- YTX-0.1.0-Win
- 上传下载ExtJS 2.2 开源网络硬盘系统-dogdisk.rar
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功