import h from preact - 啥时候需要

Posted 2023-02-16

【中文标题】import h from preact - 啥时候需要

【英文标题】：import h from preact - when is it necessaryimport h from preact - 什么时候需要

【发布时间】：2019-02-24 07:14:55

【问题描述】：

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

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

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

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

【参考方案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

【参考方案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 的导入是自动的，并且没有明确要求。如果他们的文档中提到了这一点，那就太好了！

【讨论】：

确实有这方面的文档。 github.com/developit/preact#import-what-you-need

更新@rbenvenuto 的评论：github.com/preactjs/preact/tree/…