React vs HTMX ，誰更適合你？

大家好，我是 ConardLi。

HTMX 的終極目標目標，就是讓開發者在 HTML 中就能實現現代瀏覽器級的交互性，而無需使用 JavaScript。這個前端庫雖然起步晚，首次亮相是在 2020 年底，但卻迅速吸引了開發者社區的眼球。

在 2023 年的 "JavaScript Rising Stars" " 前端框架” 類別裏，HTMX 排名第二，僅次於 React。

此外，HTMX 還在 GitHub 上收穫了超過 20k 的 Star，它的受歡迎程度可見一斑。爲什麼人們對它那麼熱衷呢？它能否撼動 React 的前端霸主地位呢？讓我們一起來做個對比吧！

簡單對比

727XML

如何從 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 請求。這得益於以下屬性：

當帶有這些 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 />
</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 的教程、文章和視頻。

生態系統

HTMX：雖然該庫是可擴展的，但項目相對較新， HTMX 的庫和工具並不多。在撰寫本文時，npm 上的 htmx 標籤只有 35 個包。

React：單單 npm 上的 react 標籤就有超過 6000 個庫。這只是一個 React 相關的標籤，你還可以找到與它兼容的數以萬計的其他庫。

HTMX 和 React，你應該選擇哪一個？

當我們比較兩種技術時，一般情況下是沒有絕對的贏家的。HTMX 和 React 都是優秀的前端 Web 開發庫，選擇哪一個取決於大家的項目需求和目標。

如果你需要創建一個具備狀態管理、提供複雜功能並需要可複用組件的 Web 應用程序時，React可能是更合適的選擇。而在構建具有簡單交互性和沒有特別高級功能的站點時，HTMX 可能是一個更好的解決方案。

HTMX：優點和缺點

👍 優點：

👎 缺點：

React：優點和缺點

👍 優點：

👎 缺點：

參考：

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/VmweVDhaXepn0ZchZ20eWw

猜你喜歡