app.mount 源码阅读mount 方法主要做了哪些事用 createVnode 新建一个组件 vnode 用 r

mount 方法主要做了哪些事

用 createVnode 新建一个组件 vnode
用 render 把 vnode 挂载到 container 上

createVNode 方法主要做了哪些事

新建一个初始化各种属性的 vnode 并标示它的类型
格式化一些 vnode 属性
做一些兼容老版本处理

初始化的属性如下

这句是什么作用？

// 诸如这个有关 vnode 类型的类型标示使用位运算 |，这是为了运算更快，也更节约内存。
vnode.shapeFlag |= type // 表示这个 vnode 也是 type 类型

去学一下位运算

因为一个 vnode 可以是多个不同的的类型，如:

vnode.shapeFlag = ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN

vnode的shapeFLag 属性使用二进制的方式描述了 vnode 的类型。shapeFLag的值的类型是个枚举：

export enum ShapeFlags {
  ELEMENT = 1, // 表示一个普通的HTML元素
  FUNCTIONAL_COMPONENT = 1 << 1, // 函数式组件
  STATEFUL_COMPONENT = 1 << 2, // 有状态组件
  TEXT_CHILDREN = 1 << 3, // 子节点是文本
  ARRAY_CHILDREN = 1 << 4, // 子节点是数组
  SLOTS_CHILDREN = 1 << 5, // 子节点是插槽
  TELEPORT = 1 << 6, // 表示vnode描述的是个teleport组件
  SUSPENSE = 1 << 7, // 表示vnode描述的是个suspense组件
  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8, // 表示需要被keep-live的有状态组件
  COMPONENT_KEPT_ALIVE = 1 << 9, // 已经被keep-live的有状态组件
  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT, // 组件，有状态组件和函数式组件的统称
}

判断某个 vnode 的类型时可以使用 vnode.shapeFlag & ShapeFlags.ELEMENT 的方式进行判断，或判断 vnode 是否同时是多种类型 vnode.shapeFlag & (ShapeFlags.ELEMENT | ShapeFlags.ARRAY_CHILDREN)

patchFlag 起什么作用？

patchFlag是在编译template模板时，给vnode添加的一个标识信息，这个标识信息反映了vnode的哪些部位绑定了动态值，这样在runtime阶段，可以根据patchFlag判断出哪些内容需要更新，实现靶向更新。
patchFlag的类型和shapeFLag相同，也是个枚举类型：

export const enum PatchFlags {
  // 表示vnode具有动态textContent的元素
  TEXT = 1,
  // 表示vnode具有动态的class
  CLASS = 1 << 1,
  // 表示具有动态的style
  STYLE = 1 << 2,
  // 表示具有动态的非class和style的props
  PROPS = 1 << 3,
  // 表示props具有动态的key，与CLASS、STYLE、PROPS冲突
  FULL_PROPS = 1 << 4,
  // 表示有监听事件(在同构期间需要添加)
  HYDRATE_EVENTS = 1 << 5,
  // 表示vnode是个children顺序不会改变的fragment
  STABLE_FRAGMENT = 1 << 6,
  // 表示children带有key的fragment
  KEYED_FRAGMENT = 1 << 7,
  // 表示children没有key的fragment
  UNKEYED_FRAGMENT = 1 << 8,
  // 表示vnode只需要非props的patch。例如只有标签中只有ref或指令
  NEED_PATCH = 1 << 9,
  // 表示vnode存在动态的插槽。例如动态的插槽名
  DYNAMIC_SLOTS = 1 << 10,
  // 表示用户在模板的根级别存在注释而创建的片段，这是一个仅用于开发的标志，因为注释在生产中被剥离
  DEV_ROOT_FRAGMENT = 1 << 11,
  
  // 以下都是一些特殊的flag，它们不能使用位运算进行匹配
  // 表示vnode经过静态提升
  HOISTED = -1,
  // diff算法应该退出优化模式
  BAIL = -2
}

normalizeChildren 主要做了哪些事？

根据 children 的类型，格式化 children 并添加 shapeFlag 类型

渲染器里的 render 方法主要做了哪些事？

这个方法代码比较少

  const render: RootRenderFunction = (vnode, container, namespace) => {
    if (vnode == null) {
      if (container._vnode) {
        unmount(container._vnode, null, null, true)
      }
    } else {
      patch(
        container._vnode || null,
        vnode,
        container,
        null,
        null,
        null,
        namespace,
      )
    }
    if (!isFlushing) {
      isFlushing = true
      flushPreFlushCbs()
      flushPostFlushCbs()
      isFlushing = false
    }
    container._vnode = vnode
  }

子组件是怎么渲染和挂载的

会递归调用 patch 方法处理，先挂载根组件，然后再递归挂载子组件。