HTMX 或 React：你应该选择哪个？

为你的项目选择合适的工具可能很困难。HTMX 和 React 都共享增强 Web 交互性的共同目标，但由于它们采用不同的方法和功能，它们在不同的场景中使用。在两种不同的构建交互式 Web 体验的方法之间做出决定至关重要，它会对你的开发过程、性能和整体用户体验产生重大影响。

为了提供 HTMX 和 React 之间的全面比较，我们可以概述它们的基本比较点。

参数	HTMX	React
复杂性	使用最少的 JavaScript 简化	需要更多设置和状态管理
开发	使用更少的代码快速完成	更多设置，可能需要更多代码
性能	轻量级，高效更新	虚拟 DOM 可能效率较低
SEO/可访问性	服务器端渲染，默认可访问	需要额外设置才能实现 SEO/可访问性
可扩展性	对于小型项目来说很容易	用于大型项目的可扩展性工具
生态系统	不断发展的社区，生态系统有限	大型生态系统，广泛的社区支持
实时/交互式	支持实时更新	用于复杂交互功能的工具

什么是 HTMX？

HTMX（“Hypertext Markup Language eXtensions”的缩写）是一个轻量级的 JavaScript 库，它使开发人员能够轻松地构建动态和交互式的网页。

要了解 HTMX 的工作原理，让我们来看一个 HTML 锚点标签

<a href=”/contact”>联系我们</a>

• 此锚点标签告诉浏览器
  • 当用户点击此链接时，向 ‘/contact 发出 HTTP GET 请求，并将响应内容加载到浏览器窗口中。

考虑到这一点，请考虑以下 HTML 代码

<button 
    hx-post="/data"
    hx-trigger="click"
    hx-target="#content-div"
    hx-swap="innerHTML"
>
    Fetch Data
</button>

这告诉 HTMX

• 这告诉 HTMX
  • 当用户点击此按钮时，hx-trigger 告诉 htmx 向 ‘/data 发出 HTTP POST 请求，并使用来自响应的内容替换 DOM 中 id 为 content-div 的元素中的内容。

HTMX 通过引入可以触发 AJAX 请求和处理动态内容更新的其他 HTML 属性来扩展 HTML 的功能。让我们来看一看 HTMX 提供给我们的核心功能

1. 基于 AJAX 的交互

• hx-get、hx-post、hx-put、hx-patch、hx-delete：这些属性用于直接从 HTML 元素发出 HTTP 请求。
• hx-trigger：定义直接触发 AJAX 请求的事件（例如，click、change）。
• hx-target、hx-swap：控制服务器响应在 DOM 中的插入位置和方式。

2. 条件逻辑

• hx-if、hx-unless：根据服务器端或客户端条件有条件地显示或隐藏元素。
• hx-vals：使用 AJAX 请求发送附加数据。

3. 事件处理

• hx-on：将 JavaScript 事件处理程序直接附加到 HTML 元素。
• hx-boost：自动使用 AJAX 行为增强链接和表单。
• hx-indicator：在 AJAX 请求期间显示加载指示器。

要了解 HTMX 属性的工作原理，我们可以以带有 hx-trigger=’click’ 属性的按钮元素为例。它从浏览器检测到点击事件开始，并通过传播、HTMX 初始化、执行 HTMX 事件侦听器和 HTMX 处理事件来跟踪事件。

HTMX：为什么你应该考虑它

HTMX 通过拥抱 HTML 的简洁性和强大功能，挑战了完全依靠繁重的 JavaScript 框架来实现 Web 交互性的传统方式

• 性能瓶颈：传统的 JavaScript 框架可能很重，会降低网站速度。HTMX 的轻量级方法和服务器端渲染可以实现更快、更响应的应用程序。
• 复杂性过载：HTMX 通过利用 HTML 的熟悉性和最小化所需的 JavaScript 代码量来简化开发，使其可以为更广泛的开发人员所使用。
• SEO 挑战：客户端渲染的应用程序有时会对 SEO 构成挑战。HTMX 的服务器端渲染可确保内容可供搜索引擎抓取工具轻松访问。
• 成本和时间效率：开发复杂的 JavaScript 应用程序可能需要大量资源。HTMX 通过最大程度地减少对专业前端专业知识的需求，简化了开发过程，从而减少了时间和成本。

什么是 React

由 Facebook 创建的 React 是一个开源的 JavaScript 库，旨在创建动态、交互式和高性能的 Web 应用程序。它利用基于组件的架构和虚拟 DOM 来实现高效的渲染和 UI 更新。

1. 虚拟 DOM：将虚拟 DOM 想象成你网页实际结构（称为文档对象模型 (DOM)）的轻量级副本。此副本作为 JavaScript 对象存储在内存中，表示你 UI 的当前状态。
2. 状态更改：当你的应用程序中发生某些更改（例如，用户输入、从 API 获取的数据或内部逻辑修改）时，React 会更新虚拟 DOM 以反映此新状态。
3. 差异算法：然后，React 使用差异算法将新的虚拟 DOM 与之前的虚拟 DOM 进行比较。该算法有效地识别需要对真实 DOM 进行的特定更改。
4. 协调：在识别出差异后，React 会执行一个称为协调的过程，在这个过程中，它只选择性地更新已更改的真实 DOM 部分，而不是重新渲染整个页面。

让我们尝试通过使用与上面类似的示例来理解这一点

function DataFetcher() {
  const [data, setData] = useState(null);

  const fetchData = () => {
    fetch('/data') 
      .then(response => response.json())
      .then(data => setData(data));
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {data && <p>{data.message}</p>}
    </div>
  );
}

• 有一个变量 data ，它是一个状态变量，控制此组件的状态。
• 点击 获取数据按钮会调用一个函数，该函数向服务器发出 HTTP 请求。然后，它将来自服务器的数据存储在 data 状态变量中，从而导致组件状态发生变化。
• 然后将新的虚拟 DOM 与之前的虚拟 DOM 进行比较，并执行协调，从而导致组件重新渲染以在 UI 上显示数据。

React 为构建现代、可扩展和高性能的 Web 应用程序提供了坚实的基础。它的基于组件的架构、高效的渲染机制和庞大的生态系统使其成为全球开发人员的热门选择

1. 基于组件的架构

• React 的核心原则围绕着将 UI 拆分为可重用、自包含的组件。
• 组件封装了它们自己的逻辑、结构和样式，从而促进了模块化和代码重用。

2. JSX（JavaScript 语法扩展）

• JSX 是一个语法扩展，它允许你在 JavaScript 中编写类似 HTML 的代码，它提供了一种声明式方式来描述 UI 的结构。

3. 单向数据流（单向数据绑定）

• React 强制执行单向数据流，这意味着数据以单一方向从父组件流向子组件。
• 这种可预测的数据流简化了调试，并使理解应用程序状态的变化如何影响 UI 变得更加容易。

4. 状态管理

• React 组件可以使用 useState hook 管理它们自己的内部状态。
• 对于更复杂的应用程序，React 提供了各种状态管理解决方案，例如 Context API、Redux 或 MobX，用于管理全局应用程序状态。

5. 生命周期方法

• React 组件具有生命周期方法，使你能够在组件存在的不同阶段（例如，安装、更新、卸载）中进行挂钩。

6. Hooks

• Hooks 是 React 16.8 中引入的一项强大功能，它允许你使用状态和其他 React 功能，而无需编写类组件。
• useState、useEffect 和 useContext 等 Hooks 简化了状态管理、副作用以及组件之间的数据共享。

React 的核心原则是只有当组件状态发生变化时才重新渲染组件，从而优化了性能。useState hook 使组件能够管理和更新它们的状态，并在必要时触发高效的重新渲染。

React：为什么你应该考虑它

通过引入基于组件的架构和构建用户界面的声明式方法，React 解决了关键挑战，并为创建可扩展和可维护的 Web 应用程序开辟了新的可能性

• 性能优化：React 的虚拟 DOM 和高效的更新机制提供了高度响应的体验，尤其适用于经常发生数据更改的动态应用程序。
• 组件可重用性和可维护性：基于组件的架构促进了模块化和可重用性，使代码更易于管理和维护。
• 复杂 UI 开发：React 的声明式风格和庞大的库集合简化了创建复杂、交互式用户界面的过程，从而增强了用户体验。
• .状态管理和数据流：React 提供了强大的解决方案来管理复杂的应用程序状态和数据流，确保整个应用程序的一致性和可预测性。
• 大型应用程序：React 的基于组件的设计和丰富的生态系统非常适合构建和维护大型、可扩展的应用程序。

React 中的测试和调试

测试和调试在确保 Web 应用程序的可靠性和性能方面起着至关重要的作用。在 HTMX 和 React 的背景下，由于前端开发的动态性质，这些实践尤其重要。

• 测试
  • HTMX：可以使用传统的 JavaScript 测试工具和库（如 Jest、Mocha 或 Jasmine）来测试 HTMX 应用程序。由于 HTMX 主要处理前端交互，因此你可以编写测试来模拟用户交互并验证预期的结果。
  • React：React 提供了一个内置的测试实用程序，称为 React Testing Library，它允许我们独立测试 React 组件。你可以为组件编写单元测试，为组件交互编写集成测试。
• 调试
  • HTMX：调试 HTMX 应用程序涉及检查网络请求和响应，以及使用浏览器开发人员工具检查 DOM 更改。HTMX 还提供了一个调试模式（hx-debug=”true”），它会将调试信息记录到控制台，这对于诊断问题很有用。
  • React：React 的开发人员工具（作为浏览器扩展提供）对于调试 React 应用程序非常宝贵。你可以检查组件层次结构、查看组件状态和属性，甚至进行时间旅行以检查以前的状态。

HTMX vs Reactjs

让我们尝试从开发人员的角度来理解 HTMX 和 React 如何满足不同的场景。通过检查它们独特的优势和用例，我们可以看到每个工具的优势所在。

1. 应用程序复杂性
   • HTMX：需要更少的设置和样板代码，从而使小型项目的实现速度更快。它可以轻松集成到现有的服务器端渲染的应用程序中。
   • React：需要更多的前期设置和学习曲线，尤其是在集成状态管理或路由库时。但是，它的结构对于大型、可维护的项目来说是值得的。
2. 开发时间和资源
   • HTMX：需要更少的设置和样板代码，因此对于小型、简单的项目来说实现速度更快。它可以增量添加到现有的服务器端渲染的应用程序中。
   • React：可能需要更多的初始设置和学习曲线，尤其是在你需要集成用于状态管理（如 Redux）或路由（如 React Router）的额外库时。但是，它对于大型项目来说是值得的，因为它提供了结构化和可维护的代码库。
3. 性能
   • HTMX：在服务器端渲染占主导地位且交互性最小的场景中表现出色。
     • 服务器端渲染的应用程序：对于主要以服务器端渲染为主，偶尔进行交互的应用程序来说，它可能性能更高。
     • 延迟加载：它支持延迟加载，使你只有在需要时才加载内容。
     • 缓存：支持响应缓存，通过减少服务器负载和网络延迟，可以提高对同一资源的重复请求的性能。
   • **React：**由于其虚拟 DOM，在高度交互式应用程序中可以更加高效，能够有效更新 UI。但是，由于 JavaScript 包的大小，初始加载可能会更重。
     • 虚拟 DOM：React 的虚拟 DOM 允许它通过仅重新渲染已更改的组件来有效地更新 UI。
     • 代码拆分：允许您将代码拆分为可以按需加载的较小包。
     • 优化协调：React 使用差异算法来最小化 DOM 更新，确保仅将必要的更改应用于实际 DOM。
4. SEO 和可访问性
   • **HTMX：**与服务器渲染的内容配合良好，确保开箱即用的良好 SEO 和可访问性。渐进式增强非常直观，可以轻松支持有残疾的用户。
   • **React：**需要仔细考虑以确保 SEO 和可访问性。使用 Next.js 等框架的服务器端渲染 (SSR) 可以解决 SEO 问题，但这会增加复杂性。
5. 可扩展性和可维护性
   • **HTMX：**对于具有较少客户端逻辑的较小项目，更容易维护。添加或更改交互性涉及对现有代码库的最小更改。
   • **React：**更适合具有复杂 UI 的大型应用程序。其基于组件的架构促进了可重用性和关注点分离，使其更易于扩展和维护。
6. 生态系统和社区
   • **HTMX：**比较新，生态系统较小，但它可以很好地与现有的服务器端框架和库集成。它因其简单性和强大功能而越来越受欢迎。
   • **React：**拥有一个庞大而成熟的生态系统，拥有大量的工具、库和社区支持。这使得为几乎任何问题找到解决方案、库和最佳实践变得更加容易。

让我们通过构建两个实际应用程序（动态评论系统和产品过滤系统）来比较 HTMX 和 React。这种实践方法将揭示它们的优势、劣势和最佳使用案例，帮助您为您的项目选择合适的工具。

动态评论系统

首先使用以下命令将动态评论系统存储库克隆到您的本地机器上

git clone https://github.com/ScaleupInfra/dynamic-commenting-system.git

导航到克隆存储库中的后端目录

cd dynamic-commenting-system/backend

安装所需的 Node.js 包

npm install

在后端目录中运行此命令

node index.js

这将启动将被 HTMX 和 React 应用程序使用的后端服务器。

启动 HTMX 应用程序

导航到克隆存储库的根目录并运行

cd htmx-app

现在只需复制您的 HTML 文件的路径并将其粘贴到浏览器的地址栏中。这将启动使用 HTMX 构建的应用程序的前端。

启动 React 应用程序

导航到克隆存储库的根目录并运行

cd react-app

在 react-app 目录中运行此命令

npm run install

这将安装 React 应用程序所需的所有依赖项。

要启动应用程序，请执行以下命令

npm start

这将启动开发服务器 https://127.0.0.1:3000/，您将在其中看到使用 Reactjs 构建的前端。

现在，让我们探索 HTMX 和 React 如何处理评论系统的功能。我们将查看实现细节，看看它们的方法有何不同。

**HTMX：**为了实现添加评论功能，我们只需创建一个像这样的表单

<form
  hx-get="https://127.0.0.1:8080/add-comments"
  hx-target="#comments"
  hx-boost="true"
  hx-trigger="submit
>
  <input type="text" name="comment" id="comment" />
  <button type="submit">Add Comment</button>
</form>

此表单使用：

• hx-get：指定在提交时将表单数据发送到的 URL。
• hx-target：标识将放置更新内容的 HTML 元素。
• hx-boost：增强表单以使用 AJAX，防止完整页面重新加载。
• hx-trigger：定义触发 AJAX 请求的事件（在本例中为表单提交）。

**React：**要在 React 中实现相同的功能，我们有如下代码

const [comments, setComments] = useState('');
  const newCommentRef = useRef(null);

  useEffect(() => {
    fetchComments();
  }, []);

  const fetchComments = () => {
    fetch('https://127.0.0.1:8080/comments')
      .then(res => res.text())
      .then(setComments);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newComment = newCommentRef.current.value;

    fetch('https://127.0.0.1:8080/add-comments?comment=' + encodeURIComponent(newComment))
      .then(res => res.text())
      .then(setComments);
  };
  return (
    <div>
      <h1>Comments</h1>
      <div dangerouslySetInnerHTML={{ __html: comments }} />

      <form onSubmit={handleSubmit}>
        <input type="text" ref={newCommentRef} />
        <button type="submit">Add Comment</button>
      </form>
    </div>
  );

• 将接收到的评论列表存储在 comments 状态变量中。
• 在组件加载时使用 fetchComments 获取初始评论。
• 通过 handleSubmit 处理表单提交，发送新评论并更新评论列表。
• 然后从服务器动态渲染 HTML 评论列表。

HTMX 在这里胜出，因为它：

• **最少的 JavaScript：**需要编写和维护的客户端代码更少。
• **简化的设置：**更容易与服务器渲染的应用程序集成。
• **更快的更新：**部分页面更新，提供更流畅的用户体验。
• **服务器端控制：**更容易管理和保护评论数据。

产品过滤系统

首先使用以下命令将产品过滤系统存储库克隆到您的本地机器上

git clone https://github.com/ScaleupInfra/product-filtering-system.git

导航到克隆存储库中的后端目录

cd product-filtering-system/backend

安装所需的 Node.js 包

npm install

在后端目录中运行此命令

node index.js

这将启动将被 HTMX 和 React 应用程序使用的后端服务器。

启动 HTMX 应用程序

导航到克隆存储库的根目录并运行

cd htmx-app

现在只需复制您的 HTML 文件的路径并将其粘贴到浏览器的地址栏中。这将启动使用 HTMX 构建的应用程序的前端。

启动 React 应用程序

导航到克隆存储库的根目录并运行

cd react-app

在 react-app 目录中运行此命令

npm run install

这将安装 React 应用程序所需的所有依赖项。

要启动应用程序，请执行以下命令

npm start

这将启动开发服务器 https://127.0.0.1:3000/，您将在其中看到使用 Reactjs 构建的前端。

现在，让我们探索 HTMX 和 React 如何处理产品的排序和过滤功能。我们将查看实现细节，看看它们的方法有何不同。

**HTMX：**为了实现按类别过滤功能，我们只需创建一个 如下

<select
  hx-get="https://127.0.0.1:8000/filter"
  hx-trigger="change"
  hx-target="#product-list"
  hx-boost="true"
  id="category"
  name="category"
  hx-include="#sort_by"
>
  <option value="">All Categories</option>
  <option value="Electronics">Electronics</option>
  <option value="Clothing">Clothing</option>
</select>

它使用：

• hx-get：从指定的 URL 获取更新的内容。
• hx-target：确定将新内容插入的位置。
• hx-boost：启用 AJAX 以实现更流畅的更新。
• hx-trigger：指定何时发送请求（发生更改时）。
• hx-include：在请求中包含其他元素的值。

**React：**要在 React 中实现相同的功能，我们有如下代码

const [products, setProducts] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]);
  const [filter, setFilter] = useState({ category: "", sortBy: "" });


  useEffect(() => {
    let filtered = products;

    if (filter.category) {
      filtered = filtered.filter((p) => p.category === filter.category);
    }

    if (filter.sortBy) {
      filtered = [...filtered].sort((a, b) => {
        if (filter.sortBy === "price_asc") {
          return a.price - b.price;
        } else {
          return b.price - a.price;
        }
      });
    }

    setFilteredProducts(filtered);
  }, [filter, products]);

  const handleFilterChange = (e) => {
    setFilter({ ...filter, category: e.target.value });
  };

  const handleSortChange = (e) => {
    setFilter({ ...filter, sortBy: e.target.value });
  };

  return (
    <div>
      <select value={filter.category} onChange={handleFilterChange}>
        <option value="">All Categories</option>
        <option value="Electronics">Electronics</option>
        <option value="Clothing">Clothing</option>
      </select>
      <select value={filter.sortBy} onChange={handleSortChange}>
        <option value="">Sort By</option>
        <option value="price_asc">Price (Low to High)</option>
        <option value="price_desc">Price (High to Low)</option>
      </select>

      <ul>
        {filteredProducts?.map((product) => (
          <li key={product.id}>
            <h3>{product.name}</h3>
            <p>Category: {product.category}</p>
            <p>Price: ${product.price}</p>
          </li>
        ))}
      </ul>
    </div>
  )

• 将初始产品列表和过滤/排序结果存储在单独的状态中。
• 在初始加载时获取所有产品。
• 根据用户选择在内存中过滤和排序产品。
• 每当过滤或排序选项更改时重新渲染产品列表。
• 提供用于类别过滤和价格排序的下拉菜单。

React 在这里胜出，因为它：

• **客户端效率：**React 直接在浏览器中执行过滤和排序，无需不断发送服务器请求，这对于高用户流量尤其重要。
• **即时反馈：**用户在与过滤和排序选项交互时体验到即时更新，增强了响应性。
• **减少服务器负载：**将过滤和排序卸载到客户端大大减少了服务器的工作量，从而提高了整体应用程序性能和可扩展性。
• **离线功能：**React 的客户端方法甚至可以使基本过滤和排序功能在离线时工作，如果产品数据被缓存。

什么时候应该使用 HTMX

HTMX 在为现有网站添加动态功能或构建优先考虑性能和 SEO 的项目方面非常出色。它轻量级的特性简化了开发，并确保了快速页面加载。

理想使用案例

• 增强网站
  • 基于 AJAX 的表单提交和验证
  • 无需页面重新加载即可平滑地更新内容
• 简单的 Web 应用程序
  • 仪表板和管理面板
  • 动态评论部分
• 原型设计
  • 快速创建交互式模型
• 与服务器端框架集成
  • 与 Django、Rails、Flask 等无缝协作。

让我们仔细看看 HTMX 的优势和局限性，以帮助您确定它是否适合您的下一个 Web 项目。

优点	缺点
**简单性：**易于学习，需要最少的 JavaScript。	**有限的生态系统：**较少的专用库和工具。
**轻量级：**库大小小，页面加载速度快。	**复杂交互：**对于复杂的 UI 逻辑具有挑战性。
**性能：**高效更新，快速的用户体验。	**不适合 SPA：**不适合大型单页面应用程序。
**SEO 友好：**服务器渲染的内容，易于索引。	**较小的社区：**支持和资源不太广泛。

什么时候应该使用 React

React 是构建交互式、复杂 Web 应用程序的首选解决方案。它基于组件的结构在处理复杂的 UI 元素和大型项目方面非常出色。React 还简化了创建单页面应用程序和数据驱动的界面，证明了其在现代 Web 开发中的多功能性。

理想使用案例

• 复杂、交互式 UI
  • 具有实时更新和交互式功能的动态社交媒体 feed。
  • 使用可定制图表、图形和过滤器的數據可视化。
• 单页面应用程序 (SPA)
  • 具有丰富功能的协作项目管理平台。
  • 具有交互式课程内容的引人入胜的在线学习平台。
• 实时应用程序
  • 用于实时文档和白板协作的协作编辑工具。
  • 同步数据的实时体育比分榜。
• 与外部系统集成
  • 为无头 CMS 平台构建自定义前端。
  • 从各种 API 获取和显示数据。

优点	缺点
**组件可重用性：**具有可重用组件的模块化 UI。	**较陡的学习曲线：**需要学习 JSX 和概念。
**虚拟 DOM：**高效更新，提供流畅的用户体验。	**JSX：**与纯 HTML 相比，语法冗长。
**大型生态系统：**各种各样的库和工具。	**较大的包大小：**可能会影响初始加载时间。
**强大的社区：**广泛的支持和资源	**过度工程风险：**灵活性可能导致不必要的复杂性。

结论

在这次对 HTMX 与 React 的探索中，我们深入研究了两个库的内部运作，比较了它们的功能和使用案例，甚至构建了两个应用程序来展示每个库的优势。我们看到了 HTMX 的简单性和服务器端渲染能力如何在增强现有页面和构建轻量级应用程序方面闪耀。相反，React 基于组件的架构和广泛的生态系统使其成为构建复杂、交互式 UI 和大型项目的首选。最终，最适合您 Web 开发之旅的工具取决于您的具体需求和优先级，但是通过这种全面的比较，您已经做好了充分的准备做出明智的决定。

作者

Anurag Kainth

Anurag Kainth 是 Infrasity 的一名熟练的软件开发人员，在 Next.js、React、Node.js 和 Flutter 开发方面拥有丰富的经验。他擅长打造创新解决方案，推动技术卓越。他热衷于持续学习的挑战，致力于推动技术的界限，始终致力于扩展他的专业知识并为尖端项目做出贡献。

审阅者

Michael Mendy

Michael Mendy 是 CI/CD 社区中最杰出的成员之一，是 Travis CI 的软件工程师。他经常在各种群体面前发表有关 CI/CD 的演讲，包括 IBM、droidcon、LeadDev、Arm DevSummit 等。

产品 为什么选择 Travis CI 服务器

定价

提示、促销和独家优惠：获取 Travis CI 时事通讯