大家好，我是 ConardLi。

HTMX 的终极目标目标，就是让开发者在 HTML 中就能实现现代浏览器级的交互性，而无需使用 JavaScript。这个前端库虽然起步晚，首次亮相是在 2020 年底，但却迅速吸引了开发者社区的眼球。

在 2023 年的 "JavaScript Rising Stars" "前端框架” 类别里，HTMX 排名第二，仅次于 React。

此外，HTMX 还在 GitHub 上收获了超过 20k 的 Star，它的受欢迎程度可见一斑。为什么人们对它那么热衷呢？它能否撼动 React 的前端霸主地位呢？让我们一起来做个对比吧！

简单对比

如何从 jQuery 走向 React：从 jQuery 到现代 Web 开发框架

在 Web 开发的早期阶段，开发者依赖 jQuery 来处理 AJAX 请求、DOM 操作以及事件处理。随着时间的推移，Web 应用发展越来越现代化、结构化，可扩展性要求也越来越高。就在这个时候，Angular、React 和 Vue 等框架和库的出现改变了现状。

React 引入了基于组件的体系结构，这永久性地改变了 Web 开发的方式。其声明式 UI 和单向数据流简化了 Web 开发，可复用性和可维护性更强。这些方面使 React 成为构建动态、响应式和交互式 Web 应用的首选解决方案。

如何从 Web 框架转向 HTMX ：从 Web 框架到更现代的 HTML

尽管 React、Vue 和 Angular 等 Web 框架在构建结构化的 Web 应用程序方面表现出色，但是它们的复杂性也给追求简单的开发者带来了巨大的负担。这就是 HTMX 的表现的舞台了！

HTMX 是一个轻量级的解决方案，它保有类似 React 的现代交互性，同时具备像 jQuery 那样的简单集成和无负担特性。它通过扩展 HTML 的自定义属性，使我们能够发起 AJAX 请求而无需编写 JavaScript 代码。HTMX 的理念是让事情变得简单，让开发者能在不丢弃熟悉的 HTML 的情况下，更深入多体验 Web 的魔力。

HTMX 作为一种流线型和灵活的选择，在由更复杂的前端框架主导的宇宙中，独树一帜。

HTMX：一种全新的、现代的交互方法

HTMX 是一个轻量级的、无依赖的、可扩展的 JavaScript 前端库，它可以直接从 HTML 中访问到现代浏览器的特性。具体来说，它允许你在 HTML 代码中直接处理 AJAX 请求、CSS 动画、WebSockets 和服务端发送的事件。

通过设置特殊的 HTML 属性，这个库使你能够访问到以上大部分特性，而无需编写一行 JavaScript 代码。HTMX 提升了 HTML 的能力，使其变成了一个全功能的超文本。

我们接下来通过一些 HTMX 的示例，来看看这个库都提供了什么。

AJAX 请求触发器

HTMX 的主要概念是能够直接从 HTML 发送 AJAX 请求。这得益于以下属性：

• hx-get: 向给定的 URL 发出一个 GET 请求。
• hx-post: 向给定的 URL 发出一个 POST 请求。
• hx-put: 向给定的 URL 发出一个 PUT 请求。
• hx-patch: 向给定的 URL 发出一个 PATCH 请求。
• hx-delete: 向给定的 URL 发出一个 DELETE 请求。

当带有这些 HTMX 属性中的一个的 HTML 元素被触发，将会向给定的URL发出指定类型的 AJAX 请求。默认情况下，元素会被 “自然” 事件触发（例如，<input>, <textarea>, 和 <select> 由 change 事件触发， <form> 由 submit 事件触发，其他情况由 click 事件触发）。你可以通过 hx-trigger 属性定制这种行为。

比如下面的 HTMX 示例：

<div hx-get="/users">
    你好 code秘密花园
</div>

这会告诉浏览器：

“当用户点击 <div> 时，向 /users 发送一个 GET 请求并将响应呈现到 <div> 中”

要使此机制发挥作用，/users 接口应返回原始的 HTML。

查询参数和请求体数据

HTMX 设置查询参数和请求体数据的方式取决于 HTTP 请求的类型：

GET 请求：默认情况下，hx-get 不会自动在 AJAX 请求中包含任何查询参数。要设置查询参数，可以在传递给 hx-get 的 URL 中指定它们。或者也可以通过 hx-params 属性来覆盖 HTMX 的默认行为。

  <div hx-get="/example" hx-params="*">你好 code秘密花园</div>

非 GET 请求：当元素是 <form>时，AJAX 请求的请求体会包含它所有输入的值，使用它们的 name 属性作为参数名称。当元素不是 <form> 时，请求体将包含距离最近的 <form> 中所有输入的值。或者，如果元素有 value 属性，那么也会被添加到 Request Body 中。如果要将其他元素的值添加到请求体中，可以使用 hx-include 属性，然后通过 CSS 选择器选择出你想要在请求体中包含的所有元素的值。

<div>
    <button hx-post="/register" hx-include="[name='email']">
        注册!
    </button>
    输入 email: <input name="email" type="email"/>
</div>

然后可以使用 hx-params 属性来过滤掉一些请求体参数。也可以编写自定义的 htmx:configRequest 事件处理器，以编程方式修改请求体定义逻辑。

document.body.addEventListener('htmx:configRequest', function(evt) {
    evt.detail.parameters['auth_token'] = getAuthToken(); // add a new parameter into the mix
});

AJAX 结果处理

如前所述，HTMX 会将触发 AJAX 请求的元素的内部 HTML 替换为服务器返回的 HTML 内容。你可以使用 hx-swap 和 hx-target 属性来定制这种行为：

hx-swap 定义了如何处理服务器返回的 HTML，接受以下自解释的值之一：innerHTML（默认）、outerHTML、beforebegin、afterbegin、beforeend、afterend、delete、none。

hx-target 接受一个 CSS 选择器，并指示 HTMX 将交换逻辑应用于选定的元素。

我们看下面的示例：

<button 
  hx-post="/tasks"
  hx-swap=".todo-list" 
  hx-target="afterend"
>
  添加任务
</button>

这会告诉浏览器：

“当用户单击 <button> 节点时，向 /tasks 端点发送 POST 请求，并将服务器返回的 HTML 附加到 .todo-list 元素”

以上几个例子是 HTMX 的核心工作理念了 ...

HTMX 与 React 对比

前面我们已经知道了什么是 HTMX 以及它是大概是怎么工作的，下面我们让它与 React 大概做个比较。

语法

HTMX：它扩展了 HTML，提供了直接在 HTML 中与服务器交互的能力，它优先考虑简介性和可读性：

<div hx-get="/hello-world">
    你好 code秘密花园
</div>

React：一个功能齐全的 JavaScript 库，用基于 JSX 编写的可复用组件构建用户界面：

import React, { useState } from "react"

export default const HelloWorldComponent = () => {
  const [responseData, setResponseData] = useState(null)

  const handleClick = () => {
    fetch("/hello-world")
      .then(response => response.text())
      .then(data => {
        setResponseData(data)
      })
  }

  return (
    <div onClick={handleClick}>
      {responseData ? <>{responseData}</> : "你好 code秘密花园"}
    </div>
  )
}

学习曲线

HTMX：因为它基于 HTML 的语法和方法，所以学习曲线是很平滑的。已经熟悉传统 Web 开发的开发者可以在几天内快速掌握它，而新手可以从零开始使用它。

React：由于其独特的 Web 开发方法，React 的学习曲线比较陡峭。在构建你的第一个 React 应用程序之前，你需要理解 SPA（单页应用）、虚拟 DOM、JSX、状态管理、props、重新渲染等概念。这可能让一些初学者感到困难。

功能特性

HTMX：背后的核心概念可以概括为：实现在 HTML 中进行 AJAX 调用，无需 JavaScript 代码。虽然还有其他一些酷炫的特性可以提及，但这基本上就是 HTMX 所能提供的核心功能了。

React：让 React 如此受欢迎的一些特性包括：可复用的组件化架构、便于 UI 开发的 JSX 语法、强大的状态管理、Hooks、同时支持客户端和服务端渲染、高效的虚拟 DOM、CSS-in-JS 支持等。

性能

HTMX：由于其轻量级、无依赖的特性，依赖于 HTMX 的网页通常具有快速的首屏渲染性能。总的来说，对于具有简单交互的应用，HTMX 性能表现良好。

React：用 React 构建的 SPA 应用通常包含大量的 JavaScript。这就导致了更高的网络利用率和客户端渲染时间。但是，虚拟 DOM 和高效的 DIFF 算法使 React 能够高效更新 UI，使其适用于大规模的应用。

集成

HTMX：可以嵌入到任何 HTML 网页中，与那些可以返回原始 HTML 内容的后端技术可以非常丝滑的集成，比如 Node.js、Django、Laravel、Spring Boot、Flask 等等。

React：作为一个前端库，而不是框架，理论上可以将它集成到任何现有的站点中。但是，集成 React 可能需要额外的配置，特别是在并非围绕 JavaScript 构建的前端项目中。

需要注意的是，HTMX 和 React 可以在同一个项目中共存。这意味着你可以在一个网页上同时使用 React 和 HTMX，它们在页面的不同部分起作用，甚至 React 组件也可以依赖 HTMX 属性。

社区

HTMX：由于它在 2020 年底才首次发布，所以 HTMX 肯定不会像 React 那样受欢迎。所以，教程、操作视频并不会很多。尽管如此，该项目已经在 GitHub 上获得了超过 29k 的 star，各方面的讨论也非常热烈。

React：凭借全球数百万开发者以及 GitHub 上超过 218k 的 star，React 无疑是 Web 开发库中的绝对霸主。据 Statista 的调查，React 是目前使用最广泛的前端 Web 库，市场份额超过 40%。难怪会有数以十万计的 React 的教程、文章和视频。

生态系统

HTMX：虽然该库是可扩展的，但项目相对较新， HTMX 的库和工具并不多。在撰写本文时，npm 上的 htmx 标签只有 35 个包。

React：单单 npm 上的 react 标签就有超过 6000 个库。这只是一个 React 相关的标签，你还可以找到与它兼容的数以万计的其他库。

HTMX 和 React，你应该选择哪一个？

当我们比较两种技术时，一般情况下是没有绝对的赢家的。HTMX 和 React 都是优秀的前端 Web 开发库，选择哪一个取决于大家的项目需求和目标。

如果你需要创建一个具备状态管理、提供复杂功能并需要可复用组件的 Web 应用程序时，React可能是更合适的选择。而在构建具有简单交互性和没有特别高级功能的站点时，HTMX 可能是一个更好的解决方案。

HTMX：优点和缺点

👍 优点：

• 简单直观的基于 HTML 的语法。
• 只需几个 HTML 属性就能发送 AJAX 请求和更新 DOM。
• 不需要 JavaScript，直接在 HTML 中实现动态交互。
• 整合到现有的 HTML 网页中非常简单。
• 轻量级库，仅有几 KB。

👎 缺点：

• 需要后端 UI 服务返回原始 HTML，因此更依赖于前端。
• 相对较新。

React：优点和缺点

👍 优点：

• 用 JSX 编写可复用组件进行 UI 构建。
• 复杂的状态管理和支持许多其他有用的功能。
• 是全球最常用的前端 Web 库。
• 由 Meta 开发和维护。
• 对后端没有特定的选择。

👎 缺点：

• 学习曲线陡峭。
• 难以整合到非 JavaScript 项目中。

最后

所以，没有谁最好，只有谁最合适。

大家认为这两个库怎么样呢？欢迎在评论区留言。

参考：

• https://htmx.org/
• https://semaphoreci.com/blog/htmx-react
• https://risingstars.js.org/2023/en#section-framework
• https://react.dev/learn/writing-markup-with-jsx

抖音前端架构团队目前放出不少新的 HC ，又看起会的小伙伴可以看看这篇文章：抖音前端架构团队正在寻找人才！FE/Client/Server/QA

如果你想加入高质量前端交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。

点赞和在看是最大的支持⬇️❤️⬇️