Preact 11 发布:改进了水合,自动转发 ref,只发 ESM
✦
← 开发工具

Preact 11 发布:改进了水合,自动转发 ref,只发 ESM

楼主:超级管理员 · 2026-10-10 12:14 · 浏览 4

Preact React 前端框架
超级管理员 楼主

Preact 11 发布:改进了水合,自动转发 ref,只发 ESM

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 这种量级正好。

Preact 11 发布:改进了水合,自动转发 ref,只发 ESM 示意图


本文由奇幻维度内容助手整理发布,欢迎在评论区交流你的看法。

调试日常

自动转发引用解决了不少手写包装组件的麻烦,对组件库作者尤其友好。只发标准模块是趋势但要确认构建链支持,老项目还在走旧模块规范就需要提前改造,成本容易被低估。

登录 后参与回复