最近，前端圈出現(xiàn)了很多全新的輪子，本文將精選三個(gè)熱門的新輪子，看看它們各自都有什么特點(diǎn)！

實(shí)際上，面對(duì)新出現(xiàn)的輪子，我們也不必畏懼。新輪子的出現(xiàn)很大概率是因?yàn)楝F(xiàn)有工具無(wú)法滿足個(gè)性化需求，因此才決定開(kāi)發(fā)新輪子。對(duì)于這些新輪子，我們只需保持開(kāi)放的心態(tài)去了解，也借此機(jī)會(huì)洞察前端技術(shù)的發(fā)展趨勢(shì)與方向。

TanStack Start

對(duì)于有 React 項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的同學(xué)來(lái)說(shuō)，React Query 或許并不陌生，它隸屬于功能強(qiáng)大的 TanStack 工具系列。TanStack 是一個(gè)全面的前端工具集合，涵蓋了 TanStack Query、TanStack Router、TanStack Table、TanStack Form 及 TanStack Virtual 等多個(gè)實(shí)用工具。

近期，TanStack 又推出了其最新的力作——TanStack Start，這是一個(gè)基于 TanStack Router、Vinxi 和 Vite 的全棧 React 框架。以下是其主要特點(diǎn)：

• 全棧路由：利用 TanStack Router 提供企業(yè)級(jí)路由系統(tǒng)，支持全棧類型安全和強(qiáng)大的路由功能。
• 服務(wù)端渲染 (SSR)、流式傳輸和服務(wù)器 RPC：支持全文檔服務(wù)端渲染、流式傳輸、服務(wù)器函數(shù)和遠(yuǎn)程過(guò)程調(diào)用 (RPC)，無(wú)需在服務(wù)器端渲染和客戶端交互性之間做出選擇。
• 客戶端優(yōu)先，100% 服務(wù)器端能力：在保持前端社區(qū)多年來(lái)培養(yǎng)的客戶端應(yīng)用體驗(yàn)的同時(shí)，提供全功能的服務(wù)端能力，不犧牲用戶體驗(yàn)。
• 可部署性：借助 Vinxi 和 Vite，TanStack Start 可以部署在任何可以運(yùn)行 JavaScript 的地方，無(wú)論是傳統(tǒng)服務(wù)器、無(wú)服務(wù)器平臺(tái)還是 CDN，都能輕松構(gòu)建、打包和部署應(yīng)用。

雖然目前官網(wǎng)對(duì) TanStack Start 的介紹并不多，但是已經(jīng)有開(kāi)源項(xiàng)目的作者認(rèn)為，這才是 React 的未來(lái)，并且已經(jīng)將其開(kāi)源項(xiàng)目從 Next.js 遷移到了 TanStack Start。

該項(xiàng)目在 Github 上有 16k Star，鏈接：https://github.com/learn-anything/learn-anything。

圖片

注意：目前 TanStack Start 仍處于 Alpha 測(cè)試階段，不建議在生產(chǎn)環(huán)境使用。

TanStack Start 官網(wǎng)：https://tanstack.com/start/latest。

Brisa

Brisa 是一個(gè)全棧 Web 框架，它允許開(kāi)發(fā)者混合使用服務(wù)器組件（Server Components）+ 服務(wù)器操作（Server Actions）與 Web Components + 信號(hào)（Signals），全部采用 JSX 編寫。

import type { WebContext } from 'brisa';

export default function Counter({ name }: { name: string }, { state }: WebContext) {
  const count = state(0);

  return (
    <p>
      <button onClick={() => count.value++}>+</button>
      <span> {name} {count.value} </span>
      <button onClick={() => count.value--}>-</button>
    </p>
  )
}

Brisa 的特點(diǎn)如下：

• 服務(wù)端渲染（SSR）：頁(yè)面入口點(diǎn)在服務(wù)器上渲染并流式傳輸?shù)娇蛻舳耍ㄊ褂寐暶魇?Shadow DOM 進(jìn)行 Web 組件的服務(wù)端渲染。
• 靜態(tài)站點(diǎn)生成：可以在構(gòu)建時(shí)生成靜態(tài)頁(yè)面，并與動(dòng)態(tài)頁(yè)面混合。
• 部分預(yù)渲染：可以在構(gòu)建時(shí)預(yù)渲染特定頁(yè)面組件，而頁(yè)面的其余部分在服務(wù)端渲染。
• 響應(yīng)性：由于信號(hào)（Signals）的存在，Web Components 的屬性（props）和狀態(tài)是完全響應(yīng)式的。屬性在構(gòu)建時(shí)被優(yōu)化，因此可以像在 React 等框架中一樣編寫屬性，控制它們的默認(rèn)值、解構(gòu)等，而不會(huì)失去響應(yīng)性。
• 功能全面：Brisa 支持 TypeScript、CSS、Tailwind、中間件、API 路由、國(guó)際化（路由 + 翻譯）、WebSocket、Suspense、服務(wù)器動(dòng)作、測(cè)試、Tauri 2.x 等。
• 統(tǒng)一工具鏈：除了Brisa外，只需 Bun 來(lái)管理所有工具鏈。Brisa通過(guò)添加匹配器豐富了Bun的測(cè)試功能，并且無(wú)需Webpack、Vite，因?yàn)锽un也可以完成這些工作。盡管推薦 Bun 作為運(yùn)行時(shí)，但也可以使用Node.js作為運(yùn)行時(shí)。
• HTML 流式傳輸：Brisa 通過(guò) HTTP 傳輸 HTML，Web Components響應(yīng)其屬性的變化或新的“動(dòng)作信號(hào)”，服務(wù)器動(dòng)作可以觸發(fā) Web 組件的反應(yīng)，無(wú)需服務(wù)器重新渲染。
• 性能優(yōu)化：Brisa 旨在最小化客戶端的 JS 代碼，盡可能利用 Web 平臺(tái)，避免不必要的客戶端負(fù)載。
• 國(guó)際化：Brisa 提供了與框架完全集成的路由和翻譯，使用 ECMAScript Intl 以及一個(gè)僅在 Web 組件中使用時(shí)才添加到客戶端的 800 字節(jié)實(shí)現(xiàn)。

Github：https://github.com/brisa-build/brisa。

One

One 是一個(gè)基于 React 的跨平臺(tái)開(kāi)發(fā)框架，旨在簡(jiǎn)化 Web 和原生應(yīng)用開(kāi)發(fā)，其特點(diǎn)如下：

• 類型化的文件系統(tǒng)路由：One提供了基于文件系統(tǒng)的路由定義方式，支持嵌套布局和分組，并且完全類型化，增強(qiáng)了開(kāi)發(fā)時(shí)的類型安全和自動(dòng)補(bǔ)全功能，使得路由管理更加直觀和高效。
• 靈活的路由模式：One 支持單頁(yè)應(yīng)用（SPA）、服務(wù)端渲染（SSR）和靜態(tài)站點(diǎn)生成（SSG）等多種路由模式，允許全局設(shè)置或?yàn)槊總€(gè)頁(yè)面單獨(dú)設(shè)置。
• 類型化的加載器：One提供了類型化的加載器，簡(jiǎn)化了數(shù)據(jù)的引入和從其他框架遷移的過(guò)程。
• 跨平臺(tái)開(kāi)發(fā)：One支持同時(shí)為Web和Native平臺(tái)開(kāi)發(fā)應(yīng)用。
• 完全基于Vite：One完全基于Vite構(gòu)建，摒棄了Metro，使用一個(gè)Vite插件、一個(gè)Vite服務(wù)器和一個(gè)端口來(lái)支持三個(gè)平臺(tái)（Web、iOS、Android）的開(kāi)發(fā)。
• 集成Zero數(shù)據(jù)解決方案：One與Zero集成，提供了一個(gè)默認(rèn)的、可彈出的數(shù)據(jù)解決方案，以改善Web開(kāi)發(fā)中的數(shù)據(jù)管理問(wèn)題。
• 簡(jiǎn)化的代碼：One旨在通過(guò)簡(jiǎn)化代碼來(lái)提高開(kāi)發(fā)效率和應(yīng)用性能，減少不必要的代碼冗余和復(fù)雜性，讓開(kāi)發(fā)者能夠更專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)。
• 專注于本地開(kāi)發(fā)體驗(yàn)：One強(qiáng)調(diào)改善本地開(kāi)發(fā)體驗(yàn)，通過(guò)優(yōu)化開(kāi)發(fā)工具和流程，使得開(kāi)發(fā)過(guò)程更加直觀、高效和愉悅。

One 由 Tamagui 項(xiàng)目團(tuán)隊(duì)開(kāi)發(fā)：

Github：https://github.com/onejs/one。