12k
All articles

2026 年 Preact 有哪些新变化?

评估 Preact 安全补丁、Preact 11 beta 版变更及更新的工具链,包括 Vite 和 preact-iso,为生产环境决策提供参考。

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

Preact 11 中是否必须使用 Preact Signals 进行状态管理?

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

如何检查 React 库是否与 preact/compat 兼容?

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

在开始新项目之前,我应该等待 Preact 11 稳定版吗?

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

DevTools for the frontend

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.

Star on GitHub12k

We use cookies to improve your experience. By using our site, you accept cookies.