function renderElementVNode(vnode) {
  // 取出标签名称和标签属性、子节点
  const { type: tag , props, children } = vnode

  // 开始标签的头部
  let ret = `<${tag}`
  // 处理标签属性
  if (props) {
    for (const key in props){
      // key = "value"形式拼接
      ret += `${key}=${props[key]}`
    }
  }
  // 闭合开始标签
  ret += `>`

  // 处理子节点
  // 子节点类型是字符串则是文本内容，直接拼接
  if (typeof children === 'string') {
    ret += children
  } else if (Array.isArray(children)) {
    // 如果子节点类型是数组则递归
    children.forEach(child => {
      ret += renderElementVNode(child)
    })
  }

  // 结束标签
  ret += `</${tag}>`

  return ret

}

const VOID_TAGS = [
  'area',
  'base',
  'br',
  'col',
  'embed',
  'hr',
  'img',
  'input',
  'link',
  'meta',
  'param',
  'source',
  'track',
  'wbr'
]

// 闭合开始标签，如果是 void element，则自闭合
ret += isVoidElement ? '/>' : '>'
// void element没有子节点，直接返回
if (isVoidElement) { return ret }

/**
 * 处理Props
 * */
const shouldIgnoreProp = ['key', 'ref']
export function renderAttrs(props: Record<string, any>) {
  let ret = ''
  for (const key in props) {
    if (shouldIgnoreProp.includes(key) || /^on[^a-z]/.test(key)) {
      // 检测属性名称，如果是事件或应该被忽略的属性，则忽略它
      continue
    }

    const value = props[key]
    
    ret += renderDynamicAttr(key, value)

  }
  return ret
}

/**
 * 判断是否是布尔属性
 * */
const booleanAttrs = [
  'itemscope', 'allowfullscreen', 'formnovalidate', 'ismap', 'nomodule', 'novalidate', 'readonly',
  `async`, `autofocus`, `autoplay`, `controls`, `default`, `defer`, `disabled`, `hidden`,
  `loop`,`open`,`required`,`reversed`,`scoped`,`seamless`,
  `checked`, `muted`, `multiple`, `selected`
]
const isBooleanAttr = (key: string): boolean => {
  return booleanAttrs.includes(key)
}

/**
 * 判断属性名称是否合法且安全
 * */
const isSSRSafeAttrName = (key: string): boolean => {
  return !/[>/="'\u0009\u000a\u000c\u0020]/.test(key)
}


/**
 * 处理动态属性，包括布尔属性以及SSR安全
 * */
export function renderDynamicAttr(key: string, value: any) {
  if (isBooleanAttr(key)) {
    // 对于布尔属性如果值为 false 则什么都不做
    return value === false ? '' : ` ${key}`

  } else if (isSSRSafeAttrName(key)) {
    // 对于其他安全的属性，执行完整的渲染
    // 对于属性值，我们需要对它执行 HTML 转义操作
    return value === '' ? ` ${key}`
      : `${key}="${escapeHTML(value)}"`

  } else if (key === 'class' || key === 'style') {
    // 处理 class 和 style
    return ` ${key}=${normalize(value)}`
  } else {
    // 跳过不安全的属性，并打印警告信息
    console.warn(
      `[server-renderer] Skipped rendering unsafe attribute name: ${key}`
    )
    return ''
  }

}

const escapeRE = /["'&<>]/
function escapeHTML(value: string): string {
  const str = '' + value
  const match = escapeRE.exec(str)
  
  if (!match) {
    return str
  }
  
  let html = ''
  let escaped: string
  let index: number
  let lastIndex = 0
  
  for (index = match.index ; index < str.length; index++) {
    switch (str.charCodeAt(index)) {
      case 34: // "
        escaped = '&quot'
        break
      
      case 38: // &
        escaped = '&amp'
        break
      
      case 39: // '
        escaped = '&#39'
        break
      
      case 60: // <
        escaped = '&lt'
        break
      
      case 62: // >
        escaped = '&gt'
        break
      
      default:
        continue
    }
    
    if (lastIndex !== index) {
      html += str.substring(lastIndex++, index)
    }
    
    html += escaped
  }
  
  return lastIndex !== index ? html : str.substring(lastIndex, index)
}

function renderVNode(vnode: VNode) {
  const type = typeof vnode.type
  if (type === 'string') {
    return renderElementVNode(vnode)
  } else if (type === 'object' || type === 'function') {
    return renderComponentVNode(vnode)
  } else if (vnode.type === Text) {
    // 处理文本
  } else if (vnode.type === Fragment) {
    // 处理片段
  } else {
	...
  }
}

export function renderComponentVNode(vnode: VNode) {
  // 检查是否是函数式组件
  const isFunctional = typeof vnode.type === 'function'

  // 获取组件
  let componentOptions = vnode.type as componentOptions
  // 如果是函数式组件，则将compVNode.type作为渲染函数
  // 将compVNode.type.props作为props选项
  if (isFunctional) {
    componentOptions.render = vnode.type as FuncComponent
    componentOptions.props = (vnode.type as FuncComponent).props as Record<string, any>
  }

  // 获取组件渲染函数与props定义
  let { render, data, setup, props: propsOption, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated } = componentOptions

  // 创建实例前钩子
  beforeCreate && beforeCreate()

  // 无须使用 reactive() 创建 data 的响应式版本
  const state = data ? data() : undefined
  const [props, attrs] = resolveProps(propsOption, vnode.props)

  const slots = vnode.children || {}

  // 创建实例
  const instance: ComponentInstance = {
    // 状态数据data
    state,
    // 这里 props 无须 shallowReactive
    props,
    // 是否挂载
    isMounted: false,
    // 渲染内容subTree
    subTree: null,
    // 插槽
    slots: slots,
    // 生命周期函数
    mounted: [],
    unmounted: [],

    // keepAlive
    keepAliveCtx: undefined
  }
  
  function emit(event: string, ...payload: any[]) {
    const eventName =`on${event[0].toUpperCase() + event.slice(1)}`
    // 根据处理后的事件名去寻找对用的事件处理函数
    const handler = instance.props[eventName]
    if (handler) {
      handler(...payload)
    } else {
      console.error(`[${eventName}] ${eventName} does not exist`)
    }
  }

  // setupContext
  const setupContext = { attrs, emit, slots }
  // setupState用于存储由setup返回的数据
  let setupState: any | null = null

  // 在调用setup函数前设置当前组件实例
  setCurrentInstance(instance)
  // 处理setup相关
  if (setup) {
    // 调用setup函数
    // 将只读版本的 props 作为第一个参数传递，避免用户意外地修改 props 的值
    // 将setupContext作为第二个参数
    const setupResult = setup(shallowReadonly(instance.props), setupContext)
    // setup返回函数，将其作为渲染函数
    if (typeof setupResult === 'function') {
      if (render) {
        // 如果存在渲染函数，则报告冲突错误
        console.error('render conflicts')
        // 将setupResult作为渲染函数
        render = setupResult
      } else {
        // 否则作为数据状态赋值给setupState
        setupState = setupResult
      }
    }
    // 执行完成后重置currentInstance
    setCurrentInstance(null)
  }

  // 将组件实例设置到vnode上，用于后续更新
  vnode.component = instance

  // 创建渲染上下文对象，本质是组件实例的代理
  const renderContext = new Proxy(instance, {
    get(target, key) {
      const { state, props, slots } = target

      // 如果key值为$slots，直接返回对应插槽
      if (key === "$slots") return slots

      // 先尝试读取自身状态数据
      if (state && key in state) {
        return state[key]
      } else if (key in props) {
        return props[key]
      } else {
        console.error('state does not exist')
      }
    },
    set (target, key, value) {
      const { state, props } = target
      if (state && key in state) {
        state[key] = value
        return true
      } else if (key in props) {
        console.warn(`Attempting to mutate prop "${String(key)}". Props are readonly.`)
        return false
      } else if (setupState && key in setupState) {
        // setupState处理
        setupState[key] = value
        return true
      } else {
        console.error('state does not exist')
        return false
      }
    }
  })

  // 完成创建钩子
  created && created.call(renderContext)
  
  const subTree = render?.call(renderContext, renderContext)
  
  return renderVNode(subTree)
}

function hydrateNode(node: Node | null, vnode: VNode, container: Container) {
  const { type } = vnode

  // vnode.el 引用真实 DOM
  vnode.el = node as Container

  // 检查虚拟 DOM 的类型，如果是组件，则调用 mountComponent 函数完成激活
  if (typeof type === 'object') {
    mountComponent(vnode, container, null)
  } else if (typeof type === 'string') {
    // 检查真实 DOM 的类型与虚拟 DOM 的类型是否匹配
    if (node?.nodeType !== 1) {
      console.error('mismatch', node, vnode)
    } else {
      // 普通元素则调用hydrateElement
      hydrateElement(node as Container, vnode)
    }
  }

  // 重要：hydrateNode 函数需要返回当前节点的下一个兄弟节点，以便继续进行后续的激活操作
  return (node as Node).nextSibling
}

function hydrateElement(el: Container, vnode: VNode) {
  if (vnode.props) {
    for (const key in vnode.props) {
      // 只有事件类型的 props 需要处理
      if (/^on/.test(key)) {
        patchProps(el, key, null, vnode.props[key])
      }
    }
  }

  // 递归激活子节点
  if (Array.isArray(vnode.children)) {
    let nextNode = el.firstChild
    const len = vnode.children.length
    for (let i = 0 ; i < len; i++) {
      // 每当激活一个子节点，hydrateNode 函数都会返回当前子节点的下一个兄弟节点
      nextNode = hydrateNode(nextNode, vnode.children[i], el)
    }
  }
}

instance.update = watchEffect(() => {
    
	...
    
    if (!instance.isMounted) {

      // 挂载前钩子
      beforeMount && beforeMount().call(state)
      // 如果 vnode.el 存在，则意味着要执行激活
      if (compVNode.el) {
        hydrateNode(compVNode.el, subTree, container)
      } else {
        // 初次挂载组件subTree
        patch(undefined, subTree, container, anchor)
      }
      
      // 将组件实例的 isMounted 设置为 true，这样当更新发生时就不会再次进行挂载操作
      instance.isMounted = true
      instance.renderContext = renderContext

      // 完成挂载钩子
      mounted && mounted.call(state)
      // 遍历mounted生命周期函数数组执行生命周期函数
      instance.mounted && instance.mounted.forEach(hook => hook.call(renderContext))
      // instance.unmounted && instance.unmounted.forEach(hook => hook.call(renderContext))

    } 
    
    ...

  }, {
    scheduler: queueJob
})

export const ClientOnly = {
  setup(props: Record<symbol | string, any>, { slots }) {
    // 标记变量，仅在客户端渲染时为 true
    const show = ref(false)
    // onMounted钩子只在客户端执行
    onMounted(() => {
      show.value = true
    })
    
    // 服务端什么都不做
    return () => (show.value && slots.default ? slots.default() : null)
  }
}