Back

2026 年 Preact 有哪些新变化?

2026 年 Preact 有哪些新变化?

如果您正在评估 Preact 用于 2026 年的生产项目,那么形势已经发生了变化。在关键安全补丁、Preact 11 测试版以及重大生态系统变化之间,您在做决策之前需要了解一些实用信息。

核心要点

  • 立即将 2026 年 1 月的安全补丁应用到所有 Preact 10.x 项目,以防止不安全的 VNode 注入和潜在的 XSS 问题。
  • Preact 11 测试版引入了 Hydration 2.0 和用于 hook 依赖项的 Object.is,但尚未准备好用于生产环境。
  • 新项目使用 Vite 而非 preact-cli,路由选择 preact-iso 而非 preact-router。
  • preact/compat 兼容层适用于大多数 React 库,但尚不支持 React 19 的特性,如 use() hook。

2026 年 1 月安全补丁

2026 年 1 月,Preact 发布了一个安全修复,解决了 VNode 构造函数严格相等性漏洞(在 GitHub 上的 10.26.10 / 10.27.3 / 10.28.2 版本中修补)。此更改确保内部只接受由 Preact 创建的真实 VNode 实例。

以前,特制的普通对象(例如来自 JSON 输入)可能被误认为是 VNode,在边缘情况下可能导致不安全的 DOM 注入和 XSS 风格的攻击向量。如果您正在运行 Preact 10.x,请立即更新——该修复向后兼容,无需更改代码。

Preact 11 测试版:实际变化内容

Preact 11 测试版引入了有意义的更新,尽管它尚未稳定。在最终版本发布之前,不要围绕它规划生产迁移。

Hydration 2.0

最重要的变化是 Hydration 2.0。以前,在 hydration 期间挂起的组件必须恰好返回一个 DOM 节点。Preact 11 移除了这一限制——组件现在可以返回零个或多个节点:

function LazyAnalytics() {
  // 在 Preact 11 中有效:返回 null
  return null
}

function MultipleElements() {
  // 在 Preact 11 中有效:返回包含多个子元素的片段
  return (
    <>
      <p>First</p>
      <p>Second</p>
    </>
  )
}

这使得 SSR 模式更加灵活,并简化了异步边界的组件设计。

Hook 依赖项相等性

Preact 11 将 hook 依赖项检查从宽松相等切换到 Object.is。这修复了 useEffectuseMemouseCallbackNaN 比较的边缘情况。如果您之前曾针对 NaN 处理进行过变通,那些变通方法将变得不必要。

Ref 处理改进

Preact 11 改进了函数组件的 ref 处理方式,在许多场景中减少了对显式 forwardRef 的需求,并与现代 React 行为更加一致。确切的 API 表面在测试版中仍在演变,因此库作者应将其视为临时性的,直到稳定版本发布。

需要注意的破坏性变化

  • 完全放弃了对旧版浏览器(包括 IE11)的支持。
  • 一些旧版行为,如 defaultProps 处理和自动 px 后缀,现在仅限于 preact/compat

2026 年 Preact 工具:生态系统转变

工具链情况已经发生了重大变化。了解这些转变可以防止您在已弃用的基础上构建项目。

Vite 取代 preact-cli

preact-cli 不再是推荐的脚手架工具,并且基本上处于无人维护状态。新项目应该使用带有 Preact 预设的 Vite。Vite 提供更快的构建、更好的 HMR 以及积极的维护。

preact-iso 优于 preact-router

preact-router 已经停滞不前。对于新应用程序,preact-iso 是推荐的路由解决方案。它更轻量、积极维护,并且专为现代 Preact 模式设计。

Signals:可选的状态管理

Preact Signals 作为第一方库提供响应式状态管理。它不是 Preact 核心的一部分——您需要显式选择使用。Signals 非常适合细粒度响应性,但对于典型应用程序并非必需。

2026 年 Preact 与 React 的兼容性

preact/compat 兼容层为运行 React 库提供了良好的覆盖,但仍存在差距。尚不支持 React 19 的特性,如 use() hook。如果您的项目依赖于前沿的 React API,请在承诺之前验证兼容性。

对于大多数 React 库——路由、状态管理、UI 组件——preact/compat 工作可靠。Preact 11 测试版通过在 ref 处理等领域收紧行为兼容性进一步改进了这一点。

何时选择 Preact

Preact 在包大小受限的环境中仍然具有吸引力。Shopify 的 2025-10 API 更新要求 UI 扩展使用 Preact,严格限制为 64 KB。嵌入式小部件、PWA 和性能关键的落地页也存在类似的约束。

如果包大小不是主要关注点,并且您需要完整的 React 19 兼容性,React 本身可能更简单。

实用建议

对于 2026 年的 Preact 更新,以下是现在应该做的事情:

  1. 将 2026 年 1 月的安全补丁应用到所有 Preact 10.x 项目
  2. 使用 Vite 进行新项目脚手架搭建
  3. 在新应用程序中选择 preact-iso 进行路由
  4. 在生产环境中等待 Preact 11——监控测试版但暂不迁移
  5. 针对您的特定 React 依赖项测试 preact/compat,然后再做承诺

结论

Preact 对于大小敏感的生产工作仍然是一个可靠的选择。生态系统正在成熟,工具推荐更加清晰,React 兼容性也有所改进。立即应用安全补丁,在新项目中采用 Vite 和 preact-iso,并监控 Preact 11 测试版而不急于迁移。有了当前的信息,您可以避免使用已弃用的工具,并了解真实的兼容性边界。

常见问题

可以,您可以将现有的 preact-cli 项目迁移到 Vite。使用 Preact 预设创建一个新的 Vite 项目,复制您的源文件,并更新您的构建脚本。大多数配置可以直接转换,尽管您可能需要调整路径别名和环境变量处理以匹配 Vite 的约定。

不,Preact Signals 完全是可选的。您可以继续使用 useState、useReducer 或外部状态管理库,如 Zustand 或 Redux。Signals 提供细粒度响应性的好处,但会增加复杂性。在采用它们之前,评估您的应用程序是否需要这种级别的优化。

在承诺之前,在开发环境中测试该库。安装库,配置您的打包工具将 react 别名为 preact/compat,并验证核心功能是否正常工作。检查库的 GitHub issues 以了解已知的 Preact 兼容性问题。使用 React 19 特定 API(如 use())的库将无法工作。

使用 Preact 10.x 和 2026 年 1 月的安全补丁开始新项目。Preact 11 测试版尚未准备好用于生产环境,一旦稳定,从 10.x 到 11 的迁移应该会很简单。现在基于经过验证的工具进行构建可以避免延迟,同时仍然为以后的轻松升级做好准备。

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay