Snabbdom（虚拟dom-9-patchVnode函数）

patchVnode

  // 对比新旧节点,vnode渲染成真实dom,并返回vnodefunction patchVnode(oldVnode: VNode,vnode: VNode,insertedVnodeQueue: VNodeQueue) {const hook = vnode.data?.hook;// 首先执行用户设置的 prepatch钩子函数;hook?.prepatch?.(oldVnode, vnode);const elm = (vnode.elm = oldVnode.elm)!;const oldCh = oldVnode.children as VNode[];const ch = vnode.children as VNode[];// 如果新老 vnode相同直接返回if (oldVnode === vnode) return;if (vnode.data !== undefined) {// 执行模块的update钩子函数for (let i = 0; i < cbs.update.length; ++i)cbs.update[i](oldVnode, vnode);// 执行用户设置的update钩子函数vnode.data.hook?.update?.(oldVnode, vnode);}// 如果 vnode.text未定义if (isUndef(vnode.text)) {// 如果新老节点都有 childrenif (isDef(oldCh) && isDef(ch)) {// 使用diff算法对比子节点,更新子节点if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);} else if (isDef(ch)) {// 如果新节点有children,老节点没有children// 如果老节点有text,清空dom元素的内容if (isDef(oldVnode.text)) api.setTextContent(elm, "");// 批量添加子节点addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);} else if (isDef(oldCh)) {// 如果老节点有children,新节点没有children// 批量移出子节点removeVnodes(elm, oldCh, 0, oldCh.length - 1);} else if (isDef(oldVnode.text)) {// 如果老节点有text,情况DOM元素api.setTextContent(elm, "");}} else if (oldVnode.text !== vnode.text) {// 如果没有设置vnode.textif (isDef(oldCh)) {// 如果老节点有 children,移出removeVnodes(elm, oldCh, 0, oldCh.length - 1);}// 设置DOM元素的textContent 为 vnode.textapi.setTextContent(elm, vnode.text!);}// 最后执行用户设置的postpatch钩子函数hook?.postpatch?.(oldVnode, vnode);}

Snabbdom（虚拟dom-9-patchVnode函数）相关推荐

十二、虚拟 DOM 和 render() 函数（1）
本章概要虚拟DOM render()函数 Vue.js 之所以执行性能高,一个很重要的原因就是它的虚拟 DOM 机制. 12.1 虚拟 DOM 浏览器在解析 HTML 文档时,会将文档中的元素.注释 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
Github每日精选（第61期）：虚拟 DOM 走向未来 million
million million 使创建用户界面像React一样简单,但为最终用户提供更快的性能和更小的包大小.通过使用编译器预先计算用户界面,Million 减少了传统 Virtual DOM 的开销 ...
React框架简介（JSX语法、组件、虚拟DOM渲染）
目录 React框架为什么要学习React React特点 React核心 JSX语法语法详解 React开发过程实际DOM 虚拟DOM React组件函数组件类组件虚拟DOM渲染过程 R ...
Vue 这更新是要抛弃虚拟 DOM ？
最近 Vue 在美国举办了 Vue Conf 2022,不过可惜的是在国内并未掀起任何的波澜,于是我来试试能不能一石激起千层浪,因为尤雨溪在 Vue Conf 上说他们正在探索一种新的编译策略. 流行 ...
解密虚拟 DOM——snabbdom 核心源码解读
本文源码地址:https://github.com/zhongdeming428/snabbdom 对很多人而言,虚拟 DOM 都是一个很高大上而且远不可及的专有名词,以前我也这么认为,后来在学习 V ...
【Virtual DOM】虚拟 DOM 和 Snabbdom 库
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读 Virtual DOM 基本介绍什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的的 ...
虚拟DOM 之 Snabbdom 一、基本介绍
Snabbdom 接口介绍(Snabbdom@1.0.1) 官方文档当前snabbdom版本为 @1.0.1.接口介绍在官方文档的基础上做扩展,新版本接口使用基本和@0.7.4差不多. Snabbd ...
html5新的dom函数,从0到1: 实现一个虚拟 DOM（上）
写在前面本文分上下两篇,实现一个基础版本的虚拟 DOM. 上篇首先介绍什么是虚拟 DOM.为什么要使用虚拟 DOM,其次完成项目创建.实现 h 函数.render 函数以及 mount 函数,完成创 ...
面试中的网红虚拟DOM，你知多少呢？深入解读diff算法
深入浅出虚拟DOM和diff算法一.虚拟DOM(Vitual DOM) 1.虚拟DOM(Vitual DOM)和diff的关系 2.真实DOM的渲染过程 3.虚拟DOM是什么? 4.解决方案 - v ...

Snabbdom（虚拟dom-9-patchVnode函数）

Snabbdom（虚拟dom-9-patchVnode函数）相关推荐

最新文章

热门文章