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

标签: vue3

评论已关闭