在什么场景下组件用 h 函数 或者 jsx #3931

[Miofly]

看很多开源组件库代码中有部分用到了 h 函数，按照理解 h 函数和 createVnode 差不多创建一个虚拟 dom,但是 h 函数的写法相比 jsx 麻烦很多，想了解直接用 jsx 替代 h 函数，从 jsx 转换成 vnode，这种在性能上有什么影响吗，或者说什么场景下组件用 h 函数或者 jsx

[Justineo]

JSX 需要编译工具链支持，h 函数是运行时的，直接用 h 写 HyperScript 不需要编译。

[Miofly]

JSX 需要编译工具链支持，h 函数是运行时的，直接用 h 写 HyperScript 不需要编译。

大佬，比如如下代码是 element-plus 的 loading 组件中的，是用 h 函数写的，如果改成 jsx 同样也可以实现同等效果，在自己去写组件时，使用 jsx 或者 h 函数要如何去筛选呢

  const elLoadingComponent = {
    name: 'ElLoading',
    setup() {
      return () => {
        const svg = data.spinner || data.svg
        const spinner = h(
          'svg',
          {
            class: 'circular',
            viewBox: data.svgViewBox ? data.svgViewBox : '0 0 50 50',
            ...(svg ? { innerHTML: svg } : {}),
          },
          [
            h('circle', {
              class: 'path',
              cx: '25',
              cy: '25',
              r: '20',
              fill: 'none',
            }),
          ]
        )

        const spinnerText = data.text
          ? h('p', { class: ns.b('text') }, [data.text])
          : undefined

        return h(
          Transition,
          {
            name: ns.b('fade'),
            onAfterLeave: handleAfterLeave,
          },
          {
            default: withCtx(() => [
              withDirectives(
                createVNode(
                  'div',
                  {
                    style: {
                      backgroundColor: data.background || '',
                    },
                    class: [
                      ns.b('mask'),
                      data.customClass,
                      data.fullscreen ? 'is-fullscreen' : '',
                    ],
                  },
                  [
                    h(
                      'div',
                      {
                        class: ns.b('spinner'),
                      },
                      [spinner, spinnerText]
                    ),
                  ]
                ),
                [[vShow, data.visible]]
              ),
            ]),
          }
        )
      }
    },
  }

[lvboda]

jsx的最终产物就是h(createElement)函数，jsx需要babel或其他工具编译，简单来说在vue里使用jsx就是h函数的语法糖。

[phy-lei]

什么时候使用jsx，什么时候使用h，我个人觉得，如果在一个vue的组件中，有一个像是element的ElMessage的指令，他可以支持message是自定义的vnode，而此时，你可以新建一个组件文件，但是这里message的内容一般比较少，新建文件，显得有些繁琐，那么直接写h是不是方便很多，也不需要新建文件了，而且，这里也不能写jsx。除此之外，如果通用的情况下，我个人建议的是，如果内容很多，写jsx的可读性比h好很多