简单的看一下render函数的设计

h函数作为创建vnode对象的函数的封装，

在vnode创建时确定其flag

function h () {
  return {
    _isVNode: true,
    flags: VNodeFlags.ELEMENT_HTML,
    tag: 'h1',
    data: null,
    children: null,
    childFlags: ChildrenFlags.NO_CHILDREN,
    el: null
  };
}

为了让h函数更灵活，我们可以添加参数，我们只需要把tag、data 和 children提取为参数即可

function h (tag, data,children) {/*...*/}

对于flags属性，我们可以通过tag属性值的特征来判断

function h (tag, data,children) {
  let flags = null;
  if (typeof tag === 'string') {
    flags = tag === 'svg' ? VNodeFlags. ELEMENT_SVG : VNodeFlags.ELEMENT_HTML;
  }
}

对于Fragment类型的VNode

export const Fragment = Symbol()
function h (tag, data, children) {
  let flags = null;
  if (typeof tag === 'string') {
    flags = tag === 'svg' ? VNodeFlags.ELEMENT_SVG : VNodeFlags.ELEMENT_HTML
  } else if (tag === Fragment) {
    flags = VNodeFlags.FRAGMENT
  }
}

这时我们就可以像如下这样调用h函数，创建Fragment

import { Fragment, h } from 'vue'
h(Fragment, null, chidren)

类似的对于Portal类型的VNode，他的tag属性也可以是字符串，这样就和普通标签的VNode冲突，所以给Portal一个唯一标识

export const Fragment = Symbol()
export const Portal = Symbol()
function h (tag, data, children) {
  let flags = null;
  if (typeof tag === 'string') {
    flags = tag === 'svg' ? VNodeFlags.ELEMENT_SVG : VNodeFlags.ELEMENT_HTML
  } else if (tag === Fragment) {
    flags = VNodeFlags.FRAGMENT
  } else if (tag === Portal) {
    flags = VNodeFlags.Portal
    tag = data && data.target
  }
}

不满足以上所有条件的话，就是组件了。
当是文本的时候，一般是直接在children参数传文本

export const Fragment = Symbol()
export const Portal = Symbol()
function h (tag, data, children) {
  let flags = null;
  if (typeof tag === 'string') {
    flags = tag === 'svg' ? VNodeFlags.ELEMENT_SVG : VNodeFlags.ELEMENT_HTML
  } else if (tag === Fragment) {
    flags = VNodeFlags.FRAGMENT
  } else if (tag === Portal) {
    flags = VNodeFlags.Portal
    tag = data && data.target
  } else if (typeof tag === 'function') {
    flags = tag.prototype && tag.prototype.render
        ? VNodeFlags.COMPONENT_STATEFUL_NORMAL  // 有状态组件
        : VNodeFlags.COMPONENT_FUNCTIONAL
  }
}

在vue2中，用一个对象作为组件的描述，vue3中，是一个继承了基类的类，所以可以通过原型链中是否有render函数的定义来判断是否是有状态组件
一旦确定了vnode的类型就可以返回带有正确类型的vnode。

在vnode创建时确定其children的类型

可以通过检测chidren来确定childFlags的值。根据h函数的调用可以很容易的确定参数children包含哪些值。
1.children是一个数组

h('ul', null, [
  h('li'),
  h('li')
])

chidren是一个vnode对象

h('div', null, h('span'))

没有children

h('div')

4、children 是一个普通文本字符串：

h('div', null, '我是文本')

以上是常见的h函数的调用方式，根据这四种方式中children的不同形式，就可以确定childFlags的值

function h (tag, data, children) {
  // 省略flag部分的代码

  if (Array.isArray(children)) {
    const { length } = children
    if (length === 0) {
      childFlags = ChildrenFlags.NO_CHILDREN
    } else if (length === 1) {
      childFlags = ChildrenFlags.SINGLE_VNODE
      children = children[0]
    } else {
      // 多个子节点
      childFlags = ChildrenFlags.KEYED_VNODES
      children = normalizeVNodes(children)
    }
  } else if (children === null) {
    childFlags = ChildrenFlags.NO_CHILDREN
  } else if (children._isVNode) {
    // 单个子节点
    childFlags = ChildrenFlags.SINGLE_VNODE
  } else {
    // 其他情况都作为文本节点处理
    childFlags = ChildrenFlags.SINGLE_VNODE
    children = createTextVNode(children + '')
  }
}

为什么多个子节点的时候会当做有key的vnodes？因为key是可以认为创造的

function normalizeVNodes (children) {
  const newChildren = []
  for (let i = 0; i < children.length; i++) {
    const child = children[i]
    if (!child.key) {
      // 如果原来的vnode中没有key，则key就用竖线|与该VNode在数组中的索引拼接而成的字符串作为key
      child.key = '|' + i
      newChildren.push(child)
    }
  }
  // 返回新的children，此时 children 的类型就是ChildrenFlags.KEYED_VNODES
  return newChildren
}

function createTextVNode (text) {
  return {
    _isVNode: true,
    // flags 是 VNodeFlags.TEXT
    flags: VNodeFlags.TEXT,
    tag: null,
    data: null,
    // 纯文本类型的 VNode，其 children 属性存储的是与之相符的文本内容
    children: text,
    // 文本节点没有子节点
    childFlags: ChildrenFlags.NO_CHILDREN,
    el: null
  }
}

以上的childFlags只适用于非组件类型的vnode，因为对于组件类型vnode来说，他并没有子节点，所有的子节点都应该作为slots存在，所以如果使用h函数创建一个组件类型的vnode，那么我们应该把children的内容转化为slots。

代码：
https://github.com/TingYinHelen/tempo-optimization