diff算法的流程
创始人
2024-11-15 16:06:30

diff算法?

组件并不是真是的DOM节点,而是存在与内存中的一种数据结构,叫做虚拟DOM,只有当它真正插入文档中的时候才会真的变成DOM。

React的设计时所有的DOM变动都先在虚拟的DOM上发生,然后再将实际变动的部分反映在真是DOM上。这就是DOM diff算法,它可以大大提升网页性能表现。

一:diff算法的作用域是什么?

diff算法存在patchChildren方法中,而patchChildren方法用在Flagment类型和element类型的vnode中。

  •  什么类型的vnode存在children?

element元素类型vnode和flagment碎片类型vnode

(什么是碎片?创建一个vue组件,它只有一个根节点。

这样会报错。flagement的出现是虚拟的,根本不会在dom树中呈现。而vue组件的vue实例需要绑定到一个单一的DOM元素中。processFlagment用于处理Flagment类型的vnode)

  • patchChildren方法

1:patch每一个children vnode依次向下遍历

2:patchChildren方法根据是否存在key进行真正的diff或者直接patch

二:diff算法的作用?

diff算法的作用:在patch子vnode的过程中,找到新的vnode对应的老vnode,复用真是的DOM节点

如果没有diff算法:会浪费性能开销。因为没有diff算法,而是依次patch虚拟dom,那么稍微修改一下dom树,就会在patch过程没有一对正确的新老vnode,

老的vnode没有一个可以复用,就需要重新创造新的节点,浪费性能开销。

三:diff算法具体做了什么?

相关内容

热门资讯

裸辞做“一人公司”,我后悔了 去年这个时候,一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品,一个让任...
南京建成国内首个Pre-6G试... 4月21日,2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前,一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”,探讨分享优质内容传播,服务万千学员。 ...
摩托罗拉Razr 2026(R... IT之家 4 月 22 日消息,摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任,特纳斯领航:苹果新纪... 苹果首席执行官蒂姆·库克将卸任,硬件工程主管约翰·特纳斯将接任,苹果公司今天宣布此事。 库克将在夏季...