React vs HTMX ，谁更适合你？

最新推荐文章于 2024-06-01 09:39:15 发布

IT界那些事儿

最新推荐文章于 2024-06-01 09:39:15 发布

阅读量87

点赞数

文章标签： react.js 前端前端框架

原文链接：https://mp.weixin.qq.com/s/VmweVDhaXepn0ZchZ20eWw

版权

HTMX是一个新兴的前端库，通过扩展HTML实现浏览器级别的交互，无需JavaScript。尽管起步较晚，但它在开发者社区中受到关注，尤其是在JavaScriptRisingStars评选中排名第二。本文对比了HTMX与React在语法、学习曲线、功能特性和生态系统的差异，指出两者各有优缺点，选择取决于项目需求和目标。

摘要由CSDN通过智能技术生成

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

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

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

简单对比

-	HTMX	React
开发者	Big Sky Software	Meta
开源	✅	✅
GitHub Star	29k+	218k+
文件大小	2.9 kB	6.4 kB
语法	基于 `HTML`，带有自定义属性	基于 `JSX`， `Javascript` 的扩展
目标	直接在 `HTML` 中增加现代交互性特性	提供一个基于组件的，功能全面的 `JavaScript UI` 库
学习曲线	平滑	陡峭
特性	AJAX 请求以及一些其他次要特性	可组合性，单向数据绑定，状态管理，Hooks 等之外的多种特性
性能	极好	良好，尤其在大规模应用或者复杂的 Web 应用上
集成	可以嵌入到已存在的 HTML 页面中	可以嵌入到已存在的 HTML 页面中，但主要用于基于 Javascript 的项目上
社区	小而日益发展	市场上最大的
生态系统	小	极为丰富

如何从 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 的教程、文章和视频。