# 组件的本质

  1. 在模板引擎的年代,组件的产出的是html 字符串。
  2. 现在的vue或者react,组件产出的内容是virtual dom。
  3. h函数用来创建vnode,组件的产出是vnode 要从直接产出 html 变成产出 Virtual DOM 呢?其原因是 Virtual DOM 带来了 分层设计,它对渲染过程的抽象,使得框架可以渲染到 web(浏览器) 以外的平台,以及能够实现 SSR 等。
  4. Vnode是真实DOM的描述。
  5. 函数式组件 a. 是一个纯函数 b. 没有自身状态,只接受外部数据 c. 产出Vnode的方式,单纯的函数调用
  6. 有状态的组件 a. 是一个类,可实例化 b. 可以有自身状态 c. 产出Vnode的方式,需要实例化,然后调用其render函数

# 设计Vnode

  1. 尽可能的再保证语义能够说通的情况下服用属性,会使Vnode对象更加轻量。
  2. 我们可以通过检查tag属性值是否是字符串俩确定一个Vnode是否是普通标签。
  3. 当渲染器在渲染Vnode时,如果发现该vnode的类型是fragment,就只需要把该Vnode的子节点渲染到页面。
  4. 什么是portal,它允许你把内容渲染到任何地方。
  5. 所谓的portal,就是把子节点渲染到给定的目标。
  6. 不同类型的Vnode拥有不同的设计。
  7. Html/svg标签 组件 a. 有状态组件 i. 普通的有状态的组件 ii. 需要被keepalive的有状态组件 iii. 已经被keepalive的组件 b. 函数式组件 纯文本 Fragment Portal
  8. Vue2中区分Vnode 是html元素还是组件亦或是普通文本的做法: a. 拿到vnode后先尝试把它当做组价去处理,如果成功地创建了组件,那说明该vnode就是组件的vnode b. 如果没能成功地创建组件,则检查vnode.tag 是否有定义,如果有定义则当做普通标签处理 c. 如果vnode.tag 没有定义接检查是否是注释节点。 d. 如果不是注释节点,则会把它当做文本节点对待。
  9. 从设计角度来说,任何可以对Vnode进行描述的内容,我们都可以将其存放到vnodedata对象中。

# 辅助创建Vnode的h函数

  1. 在设计有状态组价时,我们会设计一个基础组件,所有组价都会继承其基础组件,并且基础组件拥有用来报告信息的render函数。
一笔写于: 10/20/2021, 9:46:51 PM
扫码添加我的微信
个人
个人号
公众号
公众号