import { h } from preact - 什么时候需要

Question

我目前正在使用 CLI 构建 Preact PWA。

我的理解是，无论我有一个用 JSX 定义的组件，我都需要在文件顶部有 import { h } from 'preact'。

我删除了该 import 语句的所有实例，但应用程序仍然可以正常运行和构建。

有人能把我说清楚吗，因为我现在有点困惑 - 也许某处幕后正在发生一些魔法？

Answer 1

当你写一个类似 jsx 的语法时

render() {
  return <div id="abc">Hello World</div>
}

在屏幕后面会被转换成

render() {
  return h('div', { id: 'abc' }, 'Hello World')
}

那么，什么时候需要导入h？

答案是每次使用 jsx 语法时。 JSX 不是 JavaScript 规范的一部分，它必须转换为等效的函数调用。使用h 或使用React.createElement 进行反应。

正如您所提到的，我们可以通过使用额外的babel-plugin-jsx-pragmatic 插件使import 自动化。

module.exports = {
  presets: [],
  'plugins': [
    ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
    ['babel-plugin-jsx-pragmatic', {
      module: 'preact',
      import: 'h',
      export: 'h',
    }],
  ],
}

了解更多信息：https://github.com/jmm/babel-plugin-jsx-pragmatic

Answer 2

好的，经过一番挖掘，我看到 preact-cli 节点模块中有一个 babel-config，它正在添加以下代码：

plugins: [ [require.resolve('babel-plugin-transform-react-jsx'), { pragma: 'h' }], [require.resolve('babel-plugin-jsx-pragmatic'), { module: 'preact', export: 'h', import: 'h' }] ]

这似乎意味着h 的导入是自动的，并且没有明确要求。如果他们的文档中提到了这一点，那就太好了！