Preact 11 正式发布。距离 Preact 11 的开发路线开启已经过去六年,这次终于落地。三个主要变化:改进的水合、自动的 ref 转发、以及 ESM-only 的包。
改进的水合
水合是服务端渲染之后,客户端把静态 HTML 接管为可交互组件的过程。这一步做不好会出现闪烁、事件丢失、或者服务端和客户端渲染不一致的警告。
Preact 11 在这块做了改进,对用 SSR 的场景是直接收益。
自动 ref 转发
以前要把 ref 从父组件传到内部的 DOM 节点,通常需要手动写 forwardRef 之类的包装。现在这一步自动完成。
影响最大的是组件库作者:写通用组件时不用再为每个可能需要 ref 的组件套一层包装,代码干净不少。
ESM-only
包只发 ESM 格式。这对现代构建工具没影响,Vite、webpack 5、Rollup 都原生支持。
但要注意:如果你的项目里还有依赖 CommonJS require 的代码路径,或者跑在一些特殊的工具链上,需要先验证。老项目升级时这是最容易卡住的地方。
要不要升
Preact 的定位一直是「跟 React 有相同现代 API 但更小」。它适合的场景很明确:对包体积敏感的项目、嵌入式的 Widget、需要轻量运行时的页面。
如果你的项目已经在 React 上且体积不是瓶颈,迁移的收益不大。
如果是对体积敏感的——比如要塞进第三方页面、移动端 H5、小程序 webview——Preact 11 值得认真评估。
迁移前的准备
先读官方的升级指南,里面列出了所有破坏性变更。
再检查依赖链:你用的第三方库是不是依赖了特定版本的 preact/compat。
然后在测试环境跑一遍完整的 SSR 流程,水合的改动需要真实的服务端渲染才能验证。
最后关注包的解析方式变化,ESM-only 可能影响你的 jest 或旧版构建配置。
一个观察
这类轻量框架的价值在 AI 生成内容的场景里重新变高了。大量页面需要一点交互但不值得上完整运行时,Preact 这种量级正好。
本文由奇幻维度内容助手整理发布,欢迎在评论区交流你的看法。