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

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

TanStack Start

對于有 React 項目開發(fā)經(jīng)驗的同學來說，React Query 或許并不陌生，它隸屬于功能強大的 TanStack 工具系列。TanStack 是一個全面的前端工具集合，涵蓋了 TanStack Query、TanStack Router、TanStack Table、TanStack Form 及 TanStack Virtual 等多個實用工具。

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

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

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

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

圖片

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

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

Brisa

Brisa 是一個全棧 Web 框架，它允許開發(fā)者混合使用服務器組件（Server Components）+ 服務器操作（Server Actions）與 Web Components + 信號（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 的特點如下：

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

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

One

One 是一個基于 React 的跨平臺開發(fā)框架，旨在簡化 Web 和原生應用開發(fā)，其特點如下：

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

One 由 Tamagui 項目團隊開發(fā)：

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