说下你口中的“函数式”是什么意思。不会就是去掉 jsx 吧……你用 React 也可以用 React.createElement：

import { createElement } from 'react';

function Greeting({ name }) {
return createElement(
'h1',
{ className: 'greeting' },
'Hello'
);
}

我不想使用工具链的时候就是这么写的。

Vue 也一样：

import { h } from 'vue'

const vnode = h(
'div', // type
{ id: 'foo', class: 'bar' }, // props
[
/* children */
]
)

需要动态创建组件的时候经常会这么写。

这些都是框架最表面的一层，甚至都算不上框架的一部分（更像是工具链的一部分）。你使用了 React.createElement 或者 h 其实并不能增加多少你对底层机制的理解。我也不觉得对生产力提升有帮助，反而会极大影响可读性。写多了你就腻了。

唯一的优势，就是当你自己想山寨一个“半成品”的时候，可以省一步转译。