htmx 4.0 发布:改用 Fetch API 重写,内置 DOM Morphing Swap,并明确属性继承规则

文章来源声明: 来源站点:InfoQ 中文; 原文链接:https://www.infoq.cn/article/kJ4EkjPLVTh9iT5yyXkM?utm_source=rss&utm_medium=article; 本文基于上述来源整理/加工,觅优补充点评,仅供技术学习交流。版权归原作者所有。
觅优短评

显式属性继承是本次最易踩坑处,升级前务必跑官方检查工具;适合采用 Django、Go、Rails 做服务端渲染与渐进增强的团队评估跟进。

- 2026-09-25北京 - 本文字数:1357 字
阅读完需:约 4 分钟
htmx 4.0.0 跳过 3.0 直接发布,核心是将底层网络层从 XMLHttpRequest 迁移至 fetch API,支持流式传输并精简体积至约 14KB。

内置 Idiomorph 实现 Morphing Swap,保留输入焦点;新增 hx-partial 支持单响应多目标更新;属性继承改为显式 :inherited 后缀机制。

适合前端架构师、全栈开发者、渐进增强实践者阅读。

![](https://static001.infoq.cn/resource/image/5b/be/5b619fb6d122a708398376777d562ebe.jpg?x-oss-process=image/resize,w_726)
htmx 团队发布了 [htmx 4.0.0](https://four.htmx.org/announcements/2026-08-28-htmx-4.0.0-is-released)。这是继 2024 年 htmx 2.0 发布以来,该超媒体库的首个主版本更新。新版本历经八个月开发,直接跳过了 3.0 版本。htmx 创始人 Carson Gross 曾承诺永远不会有 htmx 3.0。当 InfoWorld 问及此次版本跨越时,他用[一个词概括了这一变化](https://www.infoworld.com/article/4150864/htmx-4-0-hypermedia-finds-a-new-gear.html):“Oops”(哎呀)。

htmx 已将长期使用的 XMLHttpRequest 传输机制替换为现代 fetch() API。这次重写支持原生流式传输,同时将脚本体积控制在约 14KB。对大多数开发者而言,熟悉的 hx-get 和 hx-post 属性仍然保持原有行为。不过,这一改动也为团队最期待的两项功能提供了基础:一是基于 idiomorph 实现的内置 Morphing Swap,在更新 DOM 时保留输入框焦点等状态;二是新增 hx-partial 标签,使单个响应能够简洁地更新多个目标元素,为带外交换(OOB Swap)提供了一种更整洁的实现方式。

属性继承现在采用显式机制:只有在属性名后添加 :inherited 后缀,父元素上的属性才会传递给子元素。

``` <div hx-confirm:inherited="Are you sure?"> `````` <button hx-delete="/item/1">Delete</button> `````` div> ``````

</div>复制代码

</div>[DEV Community 上的一篇详细文章](https://dev.to/jamilxt/htmx-40-just-shipped-what-changed-what-breaks-and-how-to-migrate-this-weekend-a4o)提醒开发者,这可能是升级过程中最需要警惕的问题。例如,原本通过 `hx-headers` 属性向子元素传递 CSRF Token 的实现,如果没有添加 `:inherited`,就会悄无声息地失效。服务器随后会以 403 状态码拒绝请求,但从表面上看,代码似乎并没有任何异常。

事件名称也统一为 `htmx:phase:action` 格式。例如,`htmx:afterRequest` 现在变为 `htmx:after:request`。此外,历史记录不再将 DOM 快照保存到 localStorage,而是通过重新获取页面来恢复历史记录,从而确保第三方脚本能够正常工作。

Hacker News 上的一篇[讨论帖](https://news.ycombinator.com/item?id=49478178)获得了超过 700 赞。开发者称赞了 Go、SQLite 和 htmx 技术栈,以及 AI 助手对这一技术栈的良好支持。一位开发者[指出](https://news.ycombinator.com/item?id=49481710),Claude“理解它,而且做得很好”。与此同时,[r/htmx](https://www.reddit.com/r/htmx/comments/1w0qffe/htmx_400_has_been_released/) 上的版本发布帖也获得了超过 300 个赞。

另一方面,一位使用 .NET 和 Angular 的开发[者认为](https://news.ycombinator.com/item?id=49484694),htmx 迫使开发者将表现层与业务逻辑混合在一起。另一位开发者也表达了类似看法,并表示其团队正准备迁回 React。

htmx 4.0 通过 npm 的 `next` 标签发布,而非 `latest`,因此,使用未指定版本的 CDN 链接的用户不会被强制升级。2.x 版本也将继续获得支持,且没有设定终止时间。

htmx 团队还提供了一个命令行检查工具,用于识别属性继承问题、属性重命名以及旧版事件名称:

<div data-codeblock-wrap="" data-type="codeblock"><div data-codeblock-codes="">```
npx htmx.org<span>@4</span><span>.0</span><span>.0</span> upgrade<span>-</span><span>check</span> <span>-- ./templates</span>
复制代码
除了属性继承规则的变化外,新版本还引入了 [60 秒的请求超时时间](https://four.htmx.org/docs/whats-new-in-htmx-4#60-second-timeout),并对多个属性进行了[重命名](https://four.htmx.org/docs/whats-new-in-htmx-4#attributes),例如 `hx-disable` 更名为 `hx-ignore`。这些变更都需要谨慎处理。htmx 团队提供了完整的 [htmx 4 新特性指南](https://four.htmx.org/docs/whats-new-in-htmx-4),以及专门面向 LLM 辅助升级的 [Skills 文件](https://four.htmx.org/docs/editor-support#ai-coding-assistants)。

htmx 是一个开源库,可以通过 HTML 属性直接为页面添加 AJAX、CSS 过渡效果、WebSocket 和服务器发送事件(Server-Sent Events,SSE)能力,让开发者只需要写一点 JavaScript 就能构建现代化界面。htmx 仍然是超媒体(Hypermedia)运动的代表性项目之一,在采用 Django、Go 和 Rails 等后端技术的开发者中颇受欢迎。这些技术栈通过服务端渲染 HTML,在降低客户端复杂度的同时构建现代 Web 界面。

查看英文原文:htmx 4.0: a Fetch-Based Rewrite, Built-In Morphing Swaps, and Explicit Attribute Inheritance