开始之前，先简单介绍下 HTMX 是什么：htmx是一个小巧、无依赖、可扩展的前端库，通过HTML属性直接实现AJAX、CSS过渡、WebSockets和服务器推送事件，以简单而强大的超文本方式构建现代用户界面，且与React相比，代码库减小了67%。

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

在 2023 JavaScript Rising Stars “前端框架”类别中获得第二名（仅次于React），进入GitHub Accelerator，并在GitHub上获得20,000多个星标，HTMX迅速赢得了人气。为什么会有这么多关注呢？它是否有可能取代React？我们来找出答案！

在这个HTMX与React的比较指南中，您将了解我们选择HTMX的原因，它是什么，提供了哪些功能，并且在性能、社区、功能等方面与React相比如何。

HTMX与React简述

通过查看下面的摘要表格，您可以直接了解HTMX与React的比较：

我们如何从jQuery转向现代Web框架中的React

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

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

我们如何从Web框架过渡到更现代的HTML中的HTMX

尽管像React、Vue和Angular这样的Web框架非常适用于构建结构化的Web应用程序，但它们的复杂性可能对寻求简单性的开发人员构成巨大的负担。这就是HTMX发挥作用的地方！

HTMX是现代交互的轻量级解决方案，类似于React，但具有简单的集成和无需jQuery的优势。它通过使用自定义属性扩展HTML，实现无需JavaScript代码即可进行AJAX请求。HTMX的理念是保持事情简单，使开发人员能够涉足Web的奇迹，同时不放弃熟悉的HTML。

在由更复杂的前端框架主导的宇宙中，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">
  显示用户
</div>

这告诉浏览器：

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

请注意，为了使这个机制工作，/users端点应该返回原始的HTML。

查询参数和主体数据

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

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

AJAX结果处理

如前所述，HTMX使用服务器返回的HTML内容替换触发AJAX请求的元素的内部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"
>
  添加任务
</button>

这告诉浏览器：

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

太棒了！您刚刚探索了HTMX的基础知识以及它的工作原理的基本原理。请记住，这些只是该库支持的一些功能。欲了解更多信息，请查看文档。

HTMX vs React：比较这两种Web技术

现在您知道了HTMX是什么以及它是如何工作的，让我们看看它与React相比，即前端Web开发库的霸主。本节将探讨在确定HTMX和React之间哪个更好时要考虑的基本方面。

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

方法

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

<div hx-get="/hello-world">
    点我！ 
</div>

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

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}</> : "点我！"}
    </div>
  )
}

学习曲线

• HTMX： 借助其基于HTML的语法和方法，HTMX提供了一个平滑的学习曲线。已经熟悉传统Web开发的开发人员可以在短短几天内掌握它，而新手可以从第一天开始使用它。
• React： 由于其独特的Web开发方法，React有一个陡峭的学习曲线。在构建第一个React应用程序之前，您需要了解SPA（单页应用程序）、虚拟DOM、JSX、状态管理、props、重新渲染等概念。这可能会使一些初学者感到不知所措。

功能

• HTMX： 该库背后的核心概念可以总结为在HTML中进行AJAX调用而无需JavaScript代码。虽然还可以提到其他很酷的功能，但这基本上就是HTMX所提供的。
• React： 使React如此受欢迎的一些功能包括其基于组件的体系结构、基于代码重用的JSX语法、强大的状态管理、hooks、对客户端和服务器端渲染的支持、高效的虚拟DOM、对CSS-in-JS的支持等。

性能

• HTMX： 其轻量级、无依赖的特性意味着依赖于HTMX的网页将具有快速的初始页面加载和减少客户端处理。一般来说，在处理简单交互的应用程序时，HTMX的性能表现良好。
• React： 使用React构建的SPA应用程序通常包含大量JavaScript。这导致更高的网络利用率和客户端渲染时间。然而，虚拟DOM和高效的协调算法使React能够迅速更新UI，使其适用于大规模应用程序。

集成

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

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

用例

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

从React迁移到HTMX是可能的，并且可以导致67%的较小代码库。然而，仅当您不需要使React如此受欢迎的所有功能时，如高级状态管理时，才建议这样做。

社区

• HTMX： 由于于2020年底首次发布，因此不能期望HTMX像React一样受欢迎。因此，您不会找到许多关于它的指南、教程和漫游视频。尽管如此，该项目在GitHub上已经获得了29k多个星标，引起了很多关注。
• React： 在全球拥有数百万开发人员，并在GitHub上获得了218k多个星标，React是Web开发库的无可争议的重量级冠军。根据Statista的调查，React是全球最受欢迎的前端Web库，市场份额超过40%。难怪有数十万教程、文章和视频专门用于React。

生态系统

• HTMX： 虽然该库是可扩展的，但该项目相对较新，可用的HTMX库和工具不多。截至本文撰写时，npm上的htmx标签仅返回两个结果。
• React： 它拥有庞大而活跃的生态系统，包括丰富的第三方库、组件、工具和插件。有大量的React库可供选择，可以加速开发，并且有许多社区驱动的项目，为React提供了丰富的资源。

HTMX和React都是出色的工具，但它们在适用场景和目标受众方面存在差异。HTMX是为寻求简化、轻量级交互的开发人员设计的，而React是为构建复杂、交互式Web应用程序的开发人员设计的。在选择使用HTMX还是React时，您需要考虑项目的规模、复杂性、学习曲线和您的团队的技能水平。

示例用例

为了更好地理解HTMX和React的实际应用，让我们看几个具体的用例：

HTMX示例用例

1. 针对每个帖子的喜欢计数器

考虑以下HTML：

<button hx-post="/like" hx-swap="outerHTML">
  👍 喜欢
</button>

这是一个简单的例子，当用户点击“喜欢”按钮时，它会向服务器发送POST请求到/like端点，然后用服务器返回的内容替换整个按钮。

2. 通过模态框进行登录

<div
  hx-get="/login"
  hx-trigger="click"
  hx-target="#login-modal"
>登录</div>

<div
  id="login-modal"
  style="display: none;"
><!-- 这里是登录表单 --></div>

在这里，用户点击“登录”按钮时，它会发起GET请求到/login端点，并将服务器返回的HTML放入具有id="login-modal"的元素中，从而显示登录模态框。

React示例用例

1. 喜欢计数器

import React, { useState } from "react"
const LikeButton = () => {
  const [likes, setLikes] = useState(0)
  const handleLike = () => {
    // 这里可以发送异步请求更新服务器的喜欢计数
    setLikes(likes + 1)
  }
  return (
    <button onClick={handleLike}>
      👍 {likes} 喜欢
    </button>
  )
}

这是一个使用React编写的组件，用于跟踪和显示“喜欢”按钮的点击次数。当用户点击按钮时，handleLike函数将更新likes状态。

2. 登录模态框

import React, { useState } from "react"
const LoginButton = () => {
  const [showModal, setShowModal] = useState(false)
  const handleLoginClick = async () => {
    // 这里可以异步加载登录表单组件
    setShowModal(true)
  }
  return (
    <div>
      <div onClick={handleLoginClick}>登录</div>
      {showModal && (
        <div>{/* 这里是登录表单组件 */}</div>
      )}
    </div>
  )
}

这个React组件包含一个“登录”按钮，当用户点击按钮时，它将显示一个模态框，其中包含登录表单组件。

结论

HTMX和React都是为构建现代Web应用程序而设计的工具，但它们在方法、学习曲线、功能、性能、集成、用例、社区和生态系统方面存在差异。在选择其中之一时，关键是了解项目的需求、团队的技能水平以及您更注重的方面。

如果您正在寻找一种轻量级的、简单的方法来为现有的HTML页面添加交互性，HTMX可能是一个很好的选择。它的学习曲线相对平滑，适用于那些希望保持事情简单而又不失灵活性的开发人员。

另一方面，如果您的项目需要更复杂的状态管理、可重用的组件、虚拟DOM和更强大的生态系统，那么React可能更适合您。尽管学习曲线较陡峭，但React已经证明是构建大型、交互式Web应用程序的可靠选择。

最终，HTMX和React并不互斥。您可以根据项目的需求和特定部分的功能，选择使用其中之一或将它们结合起来，以获得最佳的开发体验。HTMX的出现使开发人员能够更加灵活地选择适用于其特定用例的工具，这是Web开发生态系统中的一项重要进步。