Preact Hooks 在纯浏览器环境中的使用注意事项

Preact 是一个轻量级的 React 替代方案，以其小巧的体积和良好的性能著称。许多开发者喜欢在不需要构建工具的环境下直接使用 Preact，特别是在快速原型开发或小型项目中。然而，在使用 Preact Hooks 时，开发者可能会遇到一些常见问题。

核心问题分析

在纯浏览器环境中直接使用 Preact Hooks（如 useState）时，开发者可能会遇到以下错误：

1. Firefox 中的错误："Uncaught TypeError: r is undefined"
2. Chrome 中的错误："Cannot read properties of undefined (reading '__H')"

这些错误通常源于两个主要原因：

1. 未正确配置导入映射(import maps)：Preact Hooks 需要 Preact 上下文才能正常工作
2. 在非组件环境中直接调用 Hook：Hooks 只能在组件函数内部使用

正确使用方式

要在纯浏览器环境中正确使用 Preact Hooks，需要遵循以下步骤：

1. 设置导入映射：在 HTML 文件中添加 importmap 配置
2. 创建组件函数：将 Hooks 调用放在组件函数内部
3. 渲染组件：使用 Preact 的 render 方法将组件挂载到 DOM

完整示例代码

<script type="importmap">
  {
    "imports": {
      "preact": "https://esm.sh/preact@10.23.1",
      "preact/": "https://esm.sh/preact@10.23.1/",
      "@preact/signals": "https://esm.sh/@preact/signals@1.3.0?external=preact",
      "htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
    }
  }
</script>

<script type="module">
  import { render } from 'preact';
  import { html } from 'htm/preact';
  import { useState } from 'preact/hooks';

  function App() {
    const [state, setState] = useState('world');
    return html`<h1>Hello, ${state}!</h1>`;
  }

  render(html`<${App} />`, document.body);
</script>

关键注意事项

1. importmap 的重要性：确保所有 Preact 相关包的导入路径正确配置
2. 组件化思维：Hooks 必须用在组件函数内部，不能在模块顶层直接调用
3. 渲染流程：必须通过 render 方法将组件渲染到页面
4. 错误处理：建议添加全局错误监听以捕获运行时问题

替代方案

如果不想使用 importmap，也可以直接通过完整路径导入：

import { useState } from 'https://esm.sh/preact@10.23.1/hooks';

但这种方式在大型项目中可能会导致维护困难，推荐使用 importmap 进行统一管理。

总结

Preact 在无构建工具环境下使用是完全可行的，但需要特别注意 Hooks 的使用规则和模块导入的正确配置。遵循组件化思维和正确的导入方式，可以避免大多数常见问题，享受 Preact 带来的轻量级开发体验。