HTMX 教程

• 为什么要使用 HTMX?
• HTMX 示例
• HTMX 相对于 React 的优势
• 开始使用 HTMX
• HTMX 常见问题解答

HTMX 是一种强大的 HTML 工具。HTMX​​ 允许您直接从 HTML 使用 AJAX、CSS Transitions、WebSockets 和服务器发送事件。通过使用 HTMX 属性，您可以轻松构建现代网站，同时享受 JavaScript 的简单性和强大功能。

本教程将指导您并解释 HTMX 的每个主题及其内部工作原理，以便您可以随时随地使用它。

为什么要使用 HTMX?

当不需要包含现代前端框架或库的高级功能时，它是最轻量级和最有效的工具。后端开发人员可以使用 HTMX，他们只想制作一个交互式 HTML 页面，而无需编写客户端 JavaScript 逻辑。可以从 React 迁移到 HTMX，因为它可以使代码库缩小 67%。

当您根本不需要所有那些高级功能(例如高级状态管理)时，建议用 HTMX 替换 React。

HTMX 示例

<script src="https://unpkg.com/htmx.org@2.0.2"></script>
<button hx-post="/clicked" hx-swap="outerHTML">
  Click Me
</button>

HTMX 相对于 React 的优势

如果我们正在寻找现代功能，那么 React 肯定比 HTMX 更高效，但如果您不打算使用这些高级功能，那么 HTMX 是一个不错的选择。下面列出的几点将引起您的注意并尝试一下。

方法

正如您所见，两者之间的比较是可读性、代码行数和可理解的方法。

• HTMX:这扩展了 HTML 并允许您直接在标记中与服务器交互。它更简单，更易读。

<div hx-get="/hello-world">
    Click me!
</div>

• React:它是当今时代最受欢迎的库，具有许多高级功能，如状态管理、可重用组件等。

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。如果您已经了解 JavaScript 的基础知识，那么 React 对您来说会很容易。

• HTMX:与 ReactJS 相比，它非常容易学习。传统的 Web 开发人员可以在几天内掌握它，因为它是基于 HTML 的语法和方法。
• React:拥有许多高级功能，因此学习起来会更困难或更耗时。

开始使用 HTMX

在深入研究本教程之前，我们建议您使用本教程中给出的每个示例和理论进行编码，以充分利用它。

HTMX 常见问题解答

关于 HTMX 有一些非常常见的问题 (FAQ)，本节将尝试简要回答这些问题。

HTMX 可以做什么?

HTMX 是一个库，它允许您直接从 HTML 访问现代浏览器功能，而不是使用 JavaScript。

HTMX 有什么用?

HTMX 提供了一种声明式开发风格，减少了对大量 JavaScript 代码的需求。

HTML 和 HTMX 有什么区别?

HTMX 是 HTML 的扩展，允许动态更新网页。

HTMX 支持哪些浏览器?

所有支持 JavaScript 和 XMLHttpRequest 的浏览器都支持 HTMX。