巧用位运算区分虚拟节点类型

前言

在前面两篇文章中,我们已经实现了createApprender函数等,可以将数据渲染到页面上。

推荐阅读:

Vue中this是怎么直接拿到数据的?

createApp之后发生了什么?

在渲染逻辑的实现中,patch方法里区分了vnode的类型elementcomponent,又在节点挂载mountElement方法中区分子节点children的类型stringarray

在实现类型判断时,此前的方式是直接通过typeof判断,这里的逻辑可以重构抽离,将所有的节点类型定义成一个常量,在 Vue 源码中使用了位运算更加高效。

位运算

先回顾一下基础知识,位运算并不是 JavaScript 特有概念,而是隶属编程技术。从现代计算机中所有的数据二进制的形式存储在设备中。即 0、1 两种状态,计算机对二进制数据进行的运算(+、-、*、/)都是叫位运算,即将符号位共同参与运算的运算。

这里罗列 3 个接下来shapeFlags实现涉及到的位运算的操作符号

符号 描述 运算规则
& 两个位都为1时,结果才为1
| 两个位都为0时,结果才为0
<< 左移 各二进位全部左移若干位,高位丢弃,低位补0

举个栗子

[x]..toString('2')可以获取数值的二进制形式,1 的二进制就是 0001,不足会补充 0 ;1 << 1就是表示二进制 0001 左移 1 位,即 0010 ,也就是计算得到的 2 。1 << 2就是 0001 左移 2 位,即 0100 。

区分vnode类型

shared文件夹下新家文件shapeFlags.ts,定义一个枚举类型,

这里将目前需要判断的节点类型区分为 4 种:

  1. 节点类型为字符串,即表示为element,值为 1 ,二进制为 0001
  2. 节点类型为对象类型时,表示为stateful_component,值为 2 ,二进制为 0010
  3. 子节点类型为字符串,表示纯文本text_children,值为 4 ,二进制为 0100
  4. 子节点类型为数组,表示为array_children,值为 8,二进制为 1000

使用位运算进行判断的基本思想:

假设当前vnode节点的类型是字符串,也就是我们定义的element,是 0001 ,当在判断时,只需要再用 0001 进行与运算 ,也就是 &0001 & 0001等于 1,即为真;假设当前这个vnode不是 0001,而是个stateful_component,也就是0010 ,0010 & 0001等于 0,即为假。

清楚了判断逻辑,那前提是需要赋值修改,就是需要在vnode中添加一个属性shapeFlags,当默认是 0000 ,vnodeelement时,需要将shapeFlags修改成 0001,使用或运算 |

举个栗子

默认是 0001,想要修改成 0011,即使用 0010 进行或运算。

使用位运算进行修改的基本思想:

初始时设置shapeFlags,判断vnodetype类型,字符串还是对象,设置成定义的常量值;在判断子节点children时,使用或运算,将当前的shapeFlags值和常量值中 text_childrenarray_children进行或运算。

实现

shapeFlags修改

vnode.ts中,

shapeFlags判断

renderer.ts中,

验证

执行yarn build打包,验证 example 中测试代码,App.js中代码

运行结果:

推荐阅读:

Vue中this是怎么直接拿到数据的?

createApp之后发生了什么?

相关推荐
温宇飞几秒前
CSS 属性分类
前端
鹏多多3 分钟前
使用React-OAuth进行Google/GitHub登录的教程和案例
前端·javascript·react.js
苏打水com29 分钟前
JavaScript 企业面试与学习难度拆解:从0到中高级的阶梯式路线图
javascript
晓得迷路了31 分钟前
栗子前端技术周刊第 101 期 - React 19.2、Next.js 16 Beta、pnpm 10.18...
前端·javascript·react.js
玲小珑41 分钟前
LangChain.js 完全开发手册(十四)生产环境部署与 DevOps 实践
前端·langchain·ai编程
亿元程序员44 分钟前
有了AI,游戏开发新人还有必要学Cocos游戏开发吗?
前端
Mike_jia1 小时前
Alist终极指南:一键聚合20+云存储,打造私有化文件管理中枢
前端
IT_陈寒1 小时前
Redis性能翻倍秘籍:10个99%开发者不知道的冷门配置优化技巧
前端·人工智能·后端
LinXunFeng2 小时前
Flutter - Melos Pub workspaces 实践
前端·flutter·架构
艾小码2 小时前
前端人必看!3个技巧让你彻底搞懂JS条件判断与循环
前端·javascript