react中的虚拟dom和diff算法详解
虚拟DOM的作用
首先我们要知道虚拟dom的出现是为了解决什么问题的,他解决我们平时频繁的直接操作DOM效率低下的问题。那么为什么我们直接操作DOM效率会低下呢?
比如我们创建一个div,我们可以在控制台查看一下这个div上自带或者继承了很多属性,尤其是我们使用js操作DOM的时候,我们的DOM本身就很复杂,js的操作也会占用很多时间,但是我们控制不了DOM元素本身,因此虚拟DOM解决的是js操作DOM这一层面,其实解决的是减少了操作dom的次数
简单实现虚拟DOM
虚拟DOM,见名知意,就是假的DOM,我们真实的DOM挂载在页面上的,而我们的虚拟DOM则是在内存中的。这个就需要我们把真实的DOM抽象成一个对象放在内存中。这个对象就可以是如下类型:
var element = { tagName: 'div', props: { class: 'box' }, children: { { tagName: 'p', props: { class: 'p1' }, children: ['我是p1'] }, { tagName: 'p', props: { class: 'p2' }, children: ['我是p2'] }, { tagName: 'p', props: { class: 'p3' }, children: ['我是p3'] }, } }
我们想要构造出这样的对象可以自己封装一个构造函数如下:
function Element(tagName, props, children) { this.tagName = tagName this.props = props this.children = children }
有了这个对象,我们需要把这个虚拟DOM渲染到真实DOM上,可以写出如下方法:
Element.prototype.render = function () { const { tagName, props, children } = this var el = document.createElement(tagName) for (key in props) { el.setAttribute(key, props[key]) } children.forEach((item) => { const childEl = (item instanceof Element) ? item.render() : document.createTextNode(item) el.appendChild(childEl) }) return el }
最后我们可以new出这个对象调用render()方法然后appendChild到body中就好了:
let virtualDom = new Element('div', { class: 'box' }, [ new Element('p', { class: 'p1' }, ['我是p1']), new Element('p', { class: 'p2' }, ['我是p2']), new Element('p', { class: 'p3' }, ['我是p3']), ]) let a = virtualDom.render() document.body.appendChild(a)
diff算法
首先我们先了解一下diff算法的作用
如果我们的虚拟dom发生了变化,我们的内存中又会产生新的虚拟DOM,如果我们直接用这个新的虚拟DOM结构的话,又会导致很多重复的渲染,因此 这个时候diff算法的作用就体现了出来,diff通过比较新旧两个虚拟DOM树,找出差异,并且记录下来,然后把记录的差异应用到真实的DOM树上。
原理:
diff算法通过对新旧两颗树进行深度优先遍历,每一个节点都加一个唯一的标识。
这个过程分为2步
- 找出两个树的差异,并记录在一个伪数组里。
- 把这些不同应用到真实的DOM树上
对于dom的操作基本可化为4种类型
- 对节点的删除,移动,添加子节点
- 更换节点标签
- 对于文本节点,修改节点文本
- 修改节点props
下面会用伪代码的形式大致过一下这个流程
// diff 函数,对比两棵树 function diff(oldTree, newTree) { var patchs = {}; // 伪数组,记录差异 // 对4种节点做错判断 dfWork(oldTree, newTree, patchs, index) return patchs } function dfWork(oldTree, newTree, patchs, index) { let currentPatch = [] if (1) { // 对节点的删除 currentPatch.push() } else if (3) { // 对节点的文本的更换 currentPatch.push() } else { // 修改节点的props 对children的检查 // 对props作diff算法,把变化记录到patchs中。 currentPatch.push({ type: patch.PROPS, props: propsPatches }) // 然后需要对子节点作diff算法 diffChildren(oldNode.children, newNode.children, index, patches, currentPatch) } } function diffChildren(oldChildren, newChildren, index, patches, currentPatch) { // 对子节点作diff算法,遍历子节点,递归调用dfWork,做差异得到patchs } // 把变化应用在真实的DOM树上 function patch(node, patchs) { // node为老的DOM树,patchs变化。 // 我们会遍历这个patchs,并且把node和patch对应上, } function applyPatch(node, patchs) { // 应为每个节点可能有多个变化,所以也需要遍历 switch (patchs.type) { case REPLACE: // 节点替换 // node.render() break; case REORDER: // 节点的移动删除新增子节点。 break; case PROPS: // setProps break; case TEXT: // 对节点文本的修改 // node.nodeValue break; default: break; } }
参考文档:深度剖析:如何实现一个 Virtual DOM 算法 作者:livoras,内置源码。
到此这篇关于react中的虚拟dom和diff算法的文章就介绍到这了,更多相关react虚拟dom和diff算法内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 下面小编就为大家带来一篇C#学习笔记- 随机函数Random()的用法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
PHP用DOM方式处理HTML之《Simple HTML DOM》
近经常需要采集一些网上的数据,发现一个PHP处理HTML的利器 simple html dom,看了一下文档,使用非常方便,关键是能够用CSS选择器来访问DOM树,和jquery相似,实在是难得的利器...2016-11-25关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的....2016-04-27
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
借助jQuery我们可以轻松地堆DOM元素进行向上、向下遍历以及同级的遍历,本文我们即来整理jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结:...2016-07-25- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能。这篇文章主要介绍了JavaScript驾驭网页-CSS与DOM的相关资料,需要的朋友可以参考下...2016-03-28
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了C++ 中随机函数random函数的使用方法的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- 这篇文章主要介绍了vue3编写挂载DOM的插件的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 这篇文章主要介绍了jQuery中DOM节点的删除方法,文中介绍的很相信,内容包括empty()的基本用法、remove()的有参用法和无参用法、empty和remove区别、保留数据的删除操作detach()以及detach()和remove()区别,需要的朋友可以参考借鉴。...2017-01-26
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02