[Vue]Vue3中使用渲染函数、JSX创建组件，以及函数式组件

0、前言

渲染函数h()取自 hyperscript 的第一个字母，意思是“能够生成 HTML 的 JavaScript”，用来创建 vnodes。

JSX是 React 最早使用的，类似 XML 的 JavaScript 扩展，能够用这样的方式写代码：

const vnode = <h1>Hi!</h1>

渲染函数和 JSX 都比模板语法灵活得多，所以可以用来创建高自由度的组件，实现复杂逻辑。

函数式组件实际上就是一种轻量化的组件，去掉了大多数组件的属性，仅支持有限的属性，用来创建功能简单的组件：接收 props，返回 vnodes。由于轻量化，所以性能比正常组件高。

下面介绍如何创建这些组件。

1、使用渲染函数创建组件

由于渲染函数是使用纯 JavaScript 创建组件，所以将其放在一个 .js或.ts文件中。
创建Component1.js，并添加如下代码：

import { h } from 'vue';

export default {
    setup() {
        return () => h('div', 'Hi!');
    }
}

这样就完成了一个最简单的组件的创建。h函数的参数，以及 props 的接收、数据的处理请参见文档。

2、使用 JSX 创建组件

JSX 组件的文件后缀是 .jsx。如果你使用 TypeScript的话，后缀则为.tsx。

创建Component2.jsx并添加如下代码：

export default {
    render() {
        return <h1>Hi!</h1>;
    }
}

JSX 组件创建完成。同样地，具体细节请参考文档。

3、在Component1中使用Component2

修改 Component1.js 的代码如下：

import { h } from 'vue';
import Component2 from './Component2.jsx';

export default {
    setup() {
        return () => h('div', h(Component2));
    }
}

如果提示React is not defined，可能是 Vite 的版本过低，没有自带@vitejs/plugin-vue-jsx，请更新 Vite，或者安装 @vitejs/plugin-vue-jsx，不过，由于版本原因，安装过程中会报错，请根据提示强制安装，或者更新 Vite。

4、创建函数式组件

函数式组件实际上就是一个函数，其接收一些参数，这些参数和setup()完全相同。
在 Component1.js 中创建一个函数式组件：

const Component3 = props => {
    return h('div', props.msg);
}

5、在 Component1 中使用函数式组件

修改 Component1.js：

//...
setup() {
    return () => h('div', h(Component3, { msg: 'Hi!' }));
}
//...

6、总结

注意， JSX 组件和函数式组件都需要经过渲染函数h()来渲染。

熟练创建文中各种类型的组件，需要了解渲染函数的参数，渲染函数以及 JSX 的语法，setup()函数的参数。掌握这些知识，对于提高程序灵活性、提高程序性能会有很大的帮助。

End