HTMX 与 React：全面对比

HTMX 的最终目标是直接在 HTML 中提供现代浏览器交互性，而无需 JavaScript。尽管该前端库相对较新，于 2020 年底才首次发布，但它已迅速引起了 IT 网络社区的关注。

HTMX 在 2023 年 JavaScript Rising Stars “前端框架 “类别中排名第二（仅次于 React），还入选了 GitHub Accelerator，并在 GitHub 上获得了超过 2 万颗星，其受欢迎程度可见一斑。为什么大家对它如此关注？它是否会取代 React？让我们一探究竟！

在本 HTMX vs React 指南中，您将了解到我们为何选择 HTMX、HTMX 是什么、它提供了哪些功能，以及它与 React 在性能、社区、功能等方面的比较。

HTMX 与 React 简要对比

请看下面的汇总表，直接进入 HTMX 与 React 的对比：

我们是如何实现 React 的？从 jQuery 到现代网络框架

在网络开发的早期，开发人员依赖 jQuery 来处理 AJAX 请求、DOM 操作和事件处理。随着时间的推移，在线应用程序不断发展，变得更加现代化、结构化和可扩展。这时，Angular、React 和 Vue 等框架和库开始发挥作用。

React 引入了基于组件的架构，彻底改变了网络开发。其声明式用户界面方法和单向数据流简化了网络开发，提高了可重用性和可维护性。这些方面使 React 成为构建动态、响应式和交互式网络应用程序的首选解决方案。

我们是如何实现 HTMX 的？从网络框架到更现代的 HTML

虽然 React、Vue 和 Angular 等网络框架非常适合构建结构化网络应用程序，但它们的复杂性可能会给追求简单的开发人员带来巨大的开销。这就是 HTMX 发挥作用的地方！

HTMX 是一种轻量级的现代交互解决方案，与 React 相似，但集成简单，没有 jQuery 的开销。它使用自定义属性扩展 HTML，无需 JavaScript 代码即可实现 AJAX 请求。HTMX 背后的理念是保持简单，让开发人员可以在不放弃熟悉的 HTML 的情况下徜徉于神奇的网络世界。

在复杂的前端框架占据主导地位的今天，HTMX 是一种精简、灵活的替代方案。了解更多信息，请参阅下面的章节。

HTMX：交互性的现代新方法

HTMX 是一个轻量级、无依赖、可扩展的 JavaScript 前端库，可直接从 HTML 访问现代浏览器功能。具体来说，它允许您直接在 HTML 代码中处理 AJAX requests, CSS Transitions, WebSockets, and Server Sent Events。

您只需设置特殊的 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> 为更改，<form> 为提交，其他为点击）。您可以使用属性 hx-trigger 自定义这种行为。

现在，请看下面的 HTMX 示例：

<div hx-get="/users">
    Show Users
</div>

这会告诉浏览器:

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

请注意，要使这一机制发挥作用，/users 端点应返回原始 HTML。

查询参数和正文数据

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

• GET 请求：默认情况下，hx-get 不会在 AJAX 请求中自动包含任何查询参数。要设置查询参数，请在传递给 hx-get 的 URL 中指定查询参数。否则，请使用 hx-params attribute 覆盖 HTMX 默认行为。
• 非 GET 请求：当元素是 <form> 时，AJAX 请求的正文将包含所有输入值，并使用它们的 name 属性作为参数名。如果元素不是 <form>，则正文将包含最靠近的外层 <form> 中所有输入的值。否则，如果元素有 value 属性，就会在正文中使用。要将其他元素的值添加到正文中，请使用 hx-include 属性，并在 CSS 选择器中包含所有元素的值，以便将其添加到请求的正文中。然后，可以使用 hx-params 属性过滤掉一些正文参数。你还可以编写一个自定义 htmx:configRequest 事件处理程序，以编程方式修改正文定义逻辑。

AJAX 结果处理

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

• hx-swap 定义了如何处理服务器返回的 HTML 内容，可接受以下自动解释值之一：innerHTML（默认）、outerHTML、beforebegin、afterbegin、beforeend、afterend、delete、none。
• hx-target 接受 CSS 选择器，并指示 HTMX 对所选元素应用交换逻辑。

现在，请看下面的 HTMX 代码段：

<button 
  hx-post="/tasks"
  hx-swap=".todo-list" 
  hx-target="afterend"
>
  Add task
</button>

这会告诉浏览器

“当用户点击 <button> 节点时，向 /tasks 端点执行 POST 请求，并将服务器返回的 HTML 追加到 .todo-list 元素中。

太棒了您刚刚了解了 HTMX 的基础知识及其工作原理。请记住，这些只是该库支持的部分功能。如需了解更多信息，请查阅文档。

HTMX 与 React：两种 Web 技术的比较

既然您已经知道 HTMX 是什么以及它是如何工作的，那么让我们来看看它与 React（前端 Web 开发库中的王者）之间的比较。本节将探讨在确定 HTMX 和 React 孰优孰劣时需要考虑的基本方面。

是时候深入了解 HTMX 与 React 的对比了！

方法

HTMX：它扩展了 HTML，提供了在标记中直接与服务器交互的能力。它将简单、简洁和可读性放在首位：

<div hx-get="/hello-world">
    Click me!
</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}</> : "Click me!"}
    </div>
  )
}

学习曲线

• HTMX：HTMX 采用基于 HTML 的语法和方法，学习曲线平滑。熟悉传统网站开发的开发人员几天内就能掌握，而新手则可以从零开始使用。
• React：由于其独特的网页开发方法，React 的学习曲线非常陡峭。在构建第一个 React 应用程序之前，您需要了解 SPA（单页面应用）、虚拟 DOM、JSX、状态管理、道具、重新呈现等概念。这可能会让一些初学者不知所措。

特点

• HTMX：该库的核心理念可以概括为无需 JavaScript 代码即可在 HTML 中实现 AJAX 调用。虽然还可以提及其他很酷的功能，但 HTMX 所提供的功能已基本概括。
• ReactReact 广受欢迎的一些特性包括：基于代码重用的组件式架构、方便用户界面开发的 JSX 语法、强大的状态管理、钩子、客户端和服务器端渲染支持、高效的虚拟 DOM、CSS-in-JS 支持等。

性能

• HTMX：其轻量级、无依赖性的特性意味着依赖 HTMX 的网页将具有快速的初始页面加载和较少的客户端处理。一般来说，HTMX 在涉及简单交互的应用程序时表现出色。
• React使用 React 构建的 SPA 应用程序通常包含大量 JavaScript。这会导致较高的网络利用率和客户端呈现时间。不过，虚拟 DOM 和高效的调和算法允许 React 快速更新 UI，使其适用于大规模应用。

集成

• HTMX：可嵌入任何 HTML 网页。HTMX 可与 Node.js、Django、Laravel、Spring Boot、Flask 等可返回原始 HTML 内容的后端技术原生集成。
• React作为一个前端库，而不是一个框架，它在技术上可以集成到任何现有网站中。同时，集成 React 可能需要额外的配置，尤其是在非 JavaScript 构建的前端项目中。

请注意，HTMX 和 React 可以共存于同一项目中。这意味着您可以在网页的不同部分同时使用 React 和 HTMX，甚至 React 组件也可以依赖 HTMX 属性。

使用案例

• HTMX：最适合需要简单、现代和动态交互性的项目。当您不需要完整前端框架的所有高级功能时，HTMX 是一种轻量级、高效的选择。对于想要提供交互式 HTML 页面而无需编写专用客户端 JavaScript 逻辑的后端开发人员来说，它也是理想之选。
• React**** 最适合开发单页面应用程序和需要提供丰富用户体验和/或处理复杂状态的复杂网络应用程序。对于希望在多个项目中重复使用用户界面组件的大型团队来说，它也是一个不错的选择。

从 React 迁移到 HTMX 是可能的，而且可以使代码库缩小 67%。不过，只有在不需要 React 广受欢迎的所有功能（如高级状态管理）时，才建议迁移。

社区

• HTMX：HTMX 将于 2020 年底首次发布，您无法指望它像 React 一样流行。因此，你不会找到很多关于它的指南、教程和演练视频。尽管如此，该项目在 GitHub 上的启动次数已超过 29k，周围的讨论也非常热烈。
• ReactReact 在全球拥有数百万开发者，在 GitHub 上有超过 21.8 万颗星，是网络开发库中无可争议的重量级冠军。根据 Statista 的一项调查，React 是迄今为止使用最多的前端 Web 库，市场份额超过 40%。难怪有成千上万的教程、文章和视频专门介绍 React。

生态系统

• HTMX：虽然该库具有可扩展性，但该项目相对较新，可用的 HTMX 库和实用程序并不多。截至本文撰写时，npm 上的 htmx 标签只列出了 35 个软件包。
• React：仅 npm 上的 react 标签就包含 6000 多个库。这只是 React 相关标签中的一个，你还可以找到成千上万个与之兼容的其他库。

在 HTMX 和 React 之间做出选择？

在比较两种技术时，总是没有绝对的赢家。HTMX 和 React 都是优秀的前端网站开发库，选择哪一个取决于您项目的要求和目标。

在创建需要状态管理、提供复杂功能和需要可重用组件的网络应用程序时，React 是更合适的选择。如果创建的网站只有简单的交互性，没有特殊的高级功能，那么 HTMX 可能是更好的解决方案。

为了帮助您在 HTMX 和 React 之间做出明智的决定，让我们来看看这两个库的优缺点！

HTMX：优点和缺点

👍 优点：

• 基于 HTML 的语法简单直观。
• 只需几个 HTML 属性即可实现 AJAX 请求和 DOM 更新。
• 直接在 HTML 中实现动态交互，无需 JavaScript。
• 可轻松集成到现有的 HTML 网页中。
• 重量仅几 kB 的轻量级库。

👎缺点

需要返回原始 HTML 的后端用户界面端点，因此与前端的联系更紧密。
仍相对较新。

React优点和缺点

👍 优点：

• 使用 JSX 编写的可重用组件构建用户界面。
• 复杂的状态管理并支持许多其他有用的功能。
• 世界上使用最多的前端网络库。
• 由 Meta 开发和维护。
• 后端不受约束。

👎缺点

• 不容易学习和掌握。
• 难以集成到非基于 JavaScript 的项目中。

结论

在 HTMX 与 React 这篇文章中，您了解了 HTMX 是什么、它如何工作以及它如何与 React 竞争。HTMX 可实现现代 HTML 交互性，而不会像成熟的 Web 框架那样复杂。虽然 HTMX 前景光明，但它并不是来取代 React 的。要更好地了解 HTMX 的优势所在，请查看官方网站上的 HTMX 示例列表。

恰恰相反，这两个库可以共存，并针对不同的用例。正如在这里学到的，React 适合具有丰富用户体验和复杂功能的网络应用，而 HTMX 则更适合具有简单交互需求的网页。

本文文字及图片出自 HTMX vs React: A Complete Comparison