简述dom diff原理

isLishude 发布于2019-08-23 16:59 / 954人阅读

摘要：但是我一直信奉一个原则，即但凡复杂的知识，理解之后都只需要记忆简单的东西，而想简单精确描述一个复杂知识，是极困难的事。两个相同的节点，虚拟会认为是同一个节点，从而对其进行比较。

前言：

关于react的虚拟dom以及每次渲染更新的dom diff，网上文章很多。但是我一直信奉一个原则，即：但凡复杂的知识，理解之后都只需要记忆简单的东西，而想简单、精确描述一个复杂知识，是极困难的事。

正文

dom diff是什么？
1.从根节点开始遍历所有节点；
2.对于不同类型的标签，删除原标签，新建标签；
3.对于类型相同、属性不同的标签，只修改属性；
4.对于同一个父节点下的复数同类型标签（即列表类型），基于key对比、修改。

解析 关于1：

-遍历用的是前序遍历（先序遍历）

关于2：

-不同类型的标签是指：比如div和span就是不同类型的标签
-如果同一个位置的标签类型改变（依然以div和span为例），那么直接删除div标签，新建一个span标签，重新渲染。原本的div标签里的一切都跟新的span标签没有关系
-对于自定义的组件比如

、之类的也适用
-标签位置只相对于父节点有意义。假设原本A节点的父节点是B，更新后A节点的父节点是C，那么对于dom diff来说，原本的A节点会被销毁，在C节点下的A节点是一个新的节点，跟原本的A节点没有关系

关于3：

-这一个比较好理解，对于仅仅属性不同的标签，修改属性即可

关于4

-假设一个div下有五个span节点，此时我们要插入一个节点

虚拟dom并不知道插入后是ABFCDE，而会认为除了AB以外的节点都改变了
所以对于虚拟dom来说此时是ABGHIJ，付出了额外的消耗。
于是react引入了key的概念。两个key相同的节点，虚拟dom会认为是同一个节点，从而对其进行比较。引入了key之后，react就知道节点是ABFCDE了。

私有云服务器托管简述mapreduce原理简述服务器工作原理 diff array_diff

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103628.html

前端面试分享: 两年经验社招-阿里巴巴

摘要：作者两年经验第一家任职的是个小公司第二家算是二线互联网公司各待了一年吧能有机会去阿里面试很惊喜先来和大家分享一下面试经历电话面试初探因为还在职的缘故电话面试从晚上点钟开始持续了半个小时左右一开始的时候特比紧张甚至声音略有些颤抖简单自我介绍做作者两年经验, 第一家任职的是个小公司, 第二家算是二线互联网公司, 各待了一年吧... 能有机会去阿里面试很惊喜! 先来和大家分享一下面试经历....

JowayYoung 2019-08-22 15:06 评论0 收藏0
vue总结

摘要：用创建好的实例调用守卫中传给的回调函数。注册一个全局守卫。这和类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用仅代表个人见解，能力有限，如有错误会误人子弟的地方欢迎留言指出谢谢原文地址 vue(前端框架)解决了什么问题？现在的前端页面元素越来越多，结构也变得越来越复杂,当数据和视图混合在一起的时候对它们的处理会十分复杂，同时也很容易出现错...

Youngs 2019-08-23 18:38 评论0 收藏0
常见react面试题汇总（适合中级前端）

摘要：但在中会有些不同，包含表单元素的组件将会在中追踪输入的值，并且每次调用回调函数时，如会更新，重新渲染组件。在构造函数中调用的目的是什么在被调用之前，子类是不能使用的，在中，子类必须在中调用。将使用单个事件监听器监听顶层的所有事件。已经开源地址：https://github.com/nanhupatar...关注我们团队：showImg(https://segmentfault.co...

leone 2019-08-23 12:40 评论0 收藏0
记2019前端面经

摘要：寒冬来临，卷入动荡之中只能又开启了漫漫求职路。前前后后面试了家公司，总结一下问题做一个。这半年来因为种种原因对技术上有些许的松懈和怠慢，所幸还能拿到了自己很满意的，未来的路还要更加努力的走 Motivation 2019寒冬来临，卷入动荡之中只能又开启了漫漫求职路。有辛酸，有坎坷，但也有点小幸运。 Experience 前前后后面试了6家公司，总结一下问题做一个backup。（仅记录问...

CoffeX 2019-08-26 13:41 评论0 收藏0
react基本原理及性能优化

摘要：对同一层级的子节点进行处理时，会根据进行简要的复用。二性能优化方案由于中性能主要耗费在于阶段的算法，因此性能优化也主要针对算法。此时最常用的优化方案即为方法。或者直接使用，原理一致。一、从React原理谈起 react是什么？ showImg(https://segmentfault.com/img/bVbcYvf?w=1140&h=384); react是用于构建用户界面的JS框架...

VincentFF 2019-08-22 18:27 评论0 收藏0