函数式组件和高阶组件

一、h和render

1、h是用来创建VNode的
// 第一个参数 节点类型 dom标签字符串
// 第二个参数 节点属性 div节点的属性
// 第三个参数 节点的子节点,包括插槽节点
h('div', 
   {
    id: 'la',
    class: ['la', 'bg-green'],
    onClick: () => {
        ctx.emit('xxx事件', '中国人')
    },
    name: 'jim',
    age: 15
   },
   []
)

2、render（option api）
- render选项和template模板做的是相同的事情，render的优先级更高些；使用render省去了template的编译过程。
- render选项是用来产出VNode的，所以它return是一个VNode或者JSX
- render选项中有个参数可以用，就是h函数

3、render函数
在vue3中，render函数可以直接从vue中导出使用，用来渲染VNode，eg：
render(VNode, 容器dom)

二、函数式组件的特点

特点：
1、没有任何管理状态
2、没有监听任何状态
3、本身没有实例（即没有this）
4、没有生命周期
5、只能接受一些prop的数据

优点：
1、渲染开销低、速度快、

场景：
主要用于简单的展示组件和高阶组件

三、vue3的函数式组件的写法

vue3中函数式组件就是一个函数
参数：props,ctx
返回：使用h函数返回一个VNode

import { h } from 'vue'
const Hello = (props, {attrs, emit, slots}) => {
    return h(
      'div',
      {},
      [
        h('div', props.age),
        slots.default(),
        h('div'),
        slots.bottom(msg)
      ]
    )
}
<Hello :age="18">
    <template #bottom="msg">
      {{msg}}
    </template>
</Hello>

四、高阶组件

1、高阶函数：
接受一个函数，返回一个函数，使得新的函数具有参数函数的能力的同时，又可以添加新功能

2、高阶组件：
也是一个函数，接受一个组件，返回一个新组件。新组件具有原有组件的功能，并拥有新的能力

3、高阶组件的意义：
意义在于封装，一种抽离vue模板内容的思想，相对于hooks、mixin（抽离业务逻辑的思想）

getNewComp.js
export default (comp) => {
    return (props) => {
        return h('div',[h('span',props.msg), h(comp)])
    }
}

<template>
    <Xxx msg="中国">

<script>
    import getNewComp from './getNewComp.js'
    import anyComp from '...'
    export default {
        components: {
            Xxx: getNewComp(anyComp)
        }
    }