Vue → 2024 Vue 生態(tài)工具最能打的組合！

經(jīng)過多年的不斷演進(jìn)，React 已經(jīng)構(gòu)建了一個極為豐富且強(qiáng)大的生態(tài)系統(tǒng)，本文就來盤點2024 年 React 開發(fā)最能打的技術(shù)棧組合！

創(chuàng)建項目：Vite / Next.js / Astro

• Vite：適用于客戶端渲染的 React 應(yīng)用。
• Next.js：適用于服務(wù)端渲染的 React 應(yīng)用。
• Astro：適用于靜態(tài)生成的 React 應(yīng)用。

Vite

Vite 是一款現(xiàn)代的JavaScript構(gòu)建工具，旨在簡化前端開發(fā)流程，實現(xiàn)快速的開發(fā)體驗和熱更新功能。作為 create-react-app（CRA）的理想替代方案， Vite 的設(shè)計理念是不在功能層面對React產(chǎn)生干擾，讓開發(fā)者能夠更專注于 React 本身，而非框架的限制。

Vite 主要針對單頁面應(yīng)用和客戶端渲染進(jìn)行了優(yōu)化，因此，對于客戶端渲染的項目來說，使用 Vite 創(chuàng)建新項目是更為合適的選擇。

Next.js

Next.js 是一個成熟度很高的 React 框架，也是 React 官方推薦的創(chuàng)建新的 React 項目的首選方式。Next.js 憑借其豐富的內(nèi)置功能（如基于文件的路由）為 React 開發(fā)提供了強(qiáng)大的支持。

Next.js 將服務(wù)端渲染（SSR）作為其主要的渲染技術(shù)，因此，對于服務(wù)端渲染的項目來說，使用 Next.js 創(chuàng)建新項目是更為合適的選擇。

Astro

Astro 是一個多功能的 Web 框架，專為構(gòu)建快速、以內(nèi)容為中心的靜態(tài)網(wǎng)站而設(shè)計。它通過服務(wù)器優(yōu)先的API設(shè)計和默認(rèn)零JavaScript運(yùn)行時開銷，提供了出色的性能。其主要特性如下：

• 以內(nèi)容為中心：專為展示豐富的內(nèi)容而設(shè)計。
• 服務(wù)器優(yōu)先：在服務(wù)器上渲染HTML，提高運(yùn)行速度。
• 默認(rèn)零JS：減少客戶端資源消耗，加快加載速度。
• 可定制：提供Tailwind、MDX等超過100個集成選項。
• 框架無關(guān)：支持React、Preact、Svelte等多種框架。

使用場景：Astro 非常適合構(gòu)建博客、營銷網(wǎng)站、電子商務(wù)網(wǎng)站、文檔網(wǎng)站、個人作品集、著陸頁和社區(qū)網(wǎng)站等，特別是那些需要快速加載和良好SEO優(yōu)化的場景。

Github：https://github.com/withastro/astro

狀態(tài)管理：Zustand

Zustand 是一個現(xiàn)代 React 狀態(tài)管理庫，旨在簡化狀態(tài)管理，提供簡潔、可擴(kuò)展和高效的狀態(tài)管理解決方案。這兩年 Zustand 增長速度很快，越來越多的開發(fā)者選擇使用 Zustand 作為其首選的 React 狀態(tài)管理工具。

GitHub：https://github.com/pmndrs/zustand

路由：React Router

React Router 是一個用于構(gòu)建單頁面應(yīng)用(SPA)的流行 JavaScript 路由庫，也是官方推薦的路由庫。

Github：https://github.com/remix-run/react-router

構(gòu)建：Vite

Vite 是一個輕量級的、速度極快的下一代前端構(gòu)建工具，對 Vue SFC 提供第一優(yōu)先級支持。它最初是為 Vue 3 項目而創(chuàng)建的，但也可以用于其他框架，如 React、Svelte、Preact 等，目前已被多個前端框架作為默認(rèn)的構(gòu)建工具。

Github：https://github.com/vitejs/vite

調(diào)試：React DevTools

React DevTools 是一個用于檢查和分析React應(yīng)用程序的瀏覽器擴(kuò)展。它允許開發(fā)者深入了解React組件樹的結(jié)構(gòu)和狀態(tài)，以及組件之間的交互。

測試：Vitest / React Testing Library / Cypress

在 React 項目中，推薦使用以下框架進(jìn)行測試：

• 單元/集成測試：Vitest + React Testing Library
• 端到端測試（E2E）：Cypress

單元/集成測試

Vitest 是一個基于 Vite 的下一代測試框架，旨在提供快速、高效的單元測試體驗。它支持多種測試運(yùn)行器、測試框架和覆蓋率報告工具，可以為組件提供即時響應(yīng)的測試反饋。值得一提的是，Vitest 僅用了兩年時間，每周下載量就達(dá)到了 500w+。

Github：https://github.com/vitest-dev/vitest

React Testing Library 是一個專門為 React 設(shè)計的測試庫，它提供了一套用于測試React組件的API。它遵循“以用戶為中心”的測試?yán)砟睿瑢Ｗ⒂跍y試組件的功能和交互，而不是內(nèi)部實現(xiàn)細(xì)節(jié)。

Github：https://github.com/testing-library/react-testing-library

Vitest 和 React Testing Library 的結(jié)合使用，可以實現(xiàn)對 React 組件的單元測試和集成測試。使用 Vitest 作為測試運(yùn)行器，結(jié)合 React Testing Library 的測試方法，可以構(gòu)建高效的測試流程。通過自動化的測試執(zhí)行和結(jié)果驗證，可以顯著提高測試的效率和準(zhǔn)確性。

單元測試可以針對組件的單個函數(shù)或模塊進(jìn)行測試，而集成測試則可以驗證組件之間的交互和整個應(yīng)用的行為。

端到端測試

Cypress 是一個用于編寫端到端測試的開源 JavaScript 測試框架，專注于提供簡單易用、可靠穩(wěn)定的測試環(huán)境，用于測試Web應(yīng)用。在 Vue 項目中，推薦其用于 E2E 測試，也可以通過 Cypress 組件測試運(yùn)行器來給 Vue SFC 作單文件組件測試。

Github：https://github.com/cypress-io/cypress

靜態(tài)站點生成器：Docusaurus

Docusaurus是 Facebook 開源的一個靜態(tài)站點生成器，旨在幫助用戶快速構(gòu)建美觀、易于維護(hù)的文檔站點。它提供了一套全面的工具和功能，使用戶能夠?qū)Ｗ⒂诰帉憙?nèi)容，而無需花費(fèi)大量時間和精力來構(gòu)建和設(shè)計網(wǎng)站。

GitHub：https://github.com/facebook/docusaurus

框架：Next.js / UmiJS

如果要做 SSR，Next.js 是非常好的選擇，而如果只做 CSR，Umi 會是更好的選擇：

• 客戶端渲染：Next.js
• 服務(wù)端渲染：UmiJS

Next.js

Next.js是一個輕量級的框架，用于構(gòu)建React應(yīng)用程序，它提供了許多增強(qiáng)功能，如服務(wù)器渲染、靜態(tài)生成、路由等，以簡化開發(fā)流程并提高性能和開發(fā)體驗。Next.js的核心目標(biāo)是通過使用React的服務(wù)端渲染功能，自動將JS代碼編譯成DOM元素，從而簡化SSR的開發(fā)過程，并提升應(yīng)用程序的性能。

目前，Next.js 的下載量在所有前端框架中排第二，僅次于 React。

Github：https://github.com/vercel/next.js

UmiJS

UmiJS 是螞蟻集團(tuán)開源的一個可擴(kuò)展的企業(yè)級 React 應(yīng)用框架，Umi 以路由為基礎(chǔ)，同時支持配置式路由和約定式路由，保證路由的功能完備，并以此進(jìn)行功能擴(kuò)展。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求。

相比于 Next.js，Umi 的擴(kuò)展性會更好；并且 Umi 做了很多更貼地氣的功能，比如配置式路由、補(bǔ)丁方案、Antd 的接入、微前端、國際化、權(quán)限等。

Github：https://github.com/umijs/umi

類型檢查：TypeScript / Zod

TypeScript

TypeScript 是 JavaScript 的一個超集，添加了靜態(tài)類型檢查和一些其他的語言特性?，F(xiàn)代前端項目基本標(biāo)配 TypeScript，目前 TypeScript 的周下載量高達(dá) 5200 萬。

React 官方文檔中提供了在 Vue 中使用 TypeScript 的指南：https://zh-hans.react.dev/learn/typescript

Zod

Zod 是一個基于 TypeScript 的模式驗證庫，提供簡潔的 API 和編譯時類型安全，用于在運(yùn)行時驗證 JavaScript 或 TypeScript 應(yīng)用中的輸入數(shù)據(jù)。它支持模式繼承、自定義錯誤信息、異步驗證，并能與 TypeScript 緊密集成，適用于需要嚴(yán)格數(shù)據(jù)驗證的各種場景。

Github：https://github.com/colinhacks/zod

工具函數(shù)：ahooks

ahooks 是一個由阿里巴巴團(tuán)隊開發(fā)的 React Hooks 庫，提供了一系列高效、易用的鉤子函數(shù)，如數(shù)據(jù)請求、狀態(tài)管理、性能優(yōu)化等，旨在簡化 React 應(yīng)用開發(fā)，減少樣板代碼，并支持 TypeScript，適合用于構(gòu)建復(fù)雜和高效的前端應(yīng)用。

Github：https://github.com/alibaba/hooks

國際化：react-i18next

react-i18next 是一個用于 React 應(yīng)用的國際化（i18n）解決方案。它基于i18next庫，為React和React Native應(yīng)用提供了一種簡單且靈活的方式來實現(xiàn)多語言支持。

通過提供useTranslation Hook和withTranslation高階組件，react-i18next 使得在React組件中使用翻譯變得非常簡單。

Github：https://github.com/i18next/react-i18next

樣式：Tailwind CSS / Styled Components / CSS Modules

• CSS-in-CSS：CSS Modules
• CSS-in-JS：Styled Components
• 實用優(yōu)先：Tailwind CSS

CSS Modules

CSS Modules 是一種 CSS 文件組織技術(shù)，它通過局部作用域封裝和自動命名類名來避免樣式?jīng)_突，并提高組件的可維護(hù)性。它易于維護(hù)和組合，且與現(xiàn)代前端構(gòu)建工具和框架兼容，使得在大型應(yīng)用和組件庫開發(fā)中管理樣式變得更加安全和高效。

Styled Components

Styled Components 是一個用于 React 的 CSS-in-JS 庫，它通過標(biāo)記模板字面量提供了一種聲明式方式來編寫組件級的樣式，支持動態(tài)樣式、主題、服務(wù)器端渲染，并與 TypeScript 兼容，使得樣式編寫更直觀、組件更易于維護(hù)，同時避免了全局樣式?jīng)_突。

Github：https://github.com/styled-components/styled-components

Tailwind CSS

Tailwind CSS 是一個實用工具類優(yōu)先的 CSS 框架，它提供了一系列預(yù)定義的、高度可定制的工具類，使開發(fā)者能夠快速構(gòu)建響應(yīng)式和一致性用戶界面，而無需編寫傳統(tǒng)的 CSS。

Github：https://github.com/tailwindlabs/tailwindcss

UI 組件庫：Ant Design / shadcn-ui  /Ant Design Mobile

• Web 端：Ant Design、shadcn/ui
• 移動端：Ant Design Mobile

Ant Design

Ant Design 是一個基于 React 的企業(yè)級 UI 組件庫，由螞蟻金服體驗技術(shù)部開發(fā)。它提供了一系列高質(zhì)量的 React 組件，幫助開發(fā)者快速構(gòu)建美觀、易用的界面和應(yīng)用。

Github：https://github.com/ant-design/ant-design

**shadcn/ui **

shadcn/ui 是一個基于React的現(xiàn)代UI組件庫，它提供了豐富的可復(fù)用組件集合，允許開發(fā)者通過簡單的復(fù)制和粘貼操作將組件集成到 Web 應(yīng)用中。

Github：https://github.com/shadcn-ui/ui

Ant Design Mobile

Ant Design Mobile 是由螞蟻金服體驗技術(shù)部開發(fā)的一套移動端 UI 組件庫，專為移動應(yīng)用設(shè)計。這些組件遵循 Ant Design 的設(shè)計語言和開發(fā)模式，確保了在移動端應(yīng)用中的一致性和用戶體驗。

Github：https://github.com/ant-design/ant-design-mobile

桌面應(yīng)用開發(fā)：Electron??Vite

Electron??Vite 致力于提供 Electron 與 Vite 結(jié)合的最佳社區(qū)實踐方案！它使得基于 Vite 開發(fā)的 Electron 工程變得十分簡單！

Github：https://github.com/electron-vite/electron-vite-react

跨端應(yīng)用開發(fā)：Taro / React Native / Expo

Taro

Taro 是一個由京東凹凸實驗室開發(fā)的跨平臺多端統(tǒng)一開發(fā)框架，支持使用 React/Vue/Nerv 等框架來開發(fā)微信/京東/百度/支付寶/字節(jié)跳動/ QQ 小程序/H5/React Native 等應(yīng)用。

Github：https://github.com/NervJS/taro

React Native

React Native 是 Facebook 開發(fā)的一個跨平臺框架，允許使用 JavaScript 和 React 技術(shù)棧來構(gòu)建高性能的原生移動應(yīng)用。它支持一次編寫代碼，然后編譯到 iOS 和 Android 平臺，提供接近原生應(yīng)用的性能和訪問設(shè)備原生功能的能力。

Github：https://github.com/facebook/react-native

Expo

Expo是一個基于 React Native 的框架，專為構(gòu)建可以在Android、iOS和Web上運(yùn)行的統(tǒng)一原生應(yīng)用程序而設(shè)計。它基于 React Native，但提供了更多的上層封裝和擴(kuò)展功能，使得開發(fā)者能夠更輕松地構(gòu)建和擴(kuò)展跨平臺應(yīng)用。Expo 是目前 React Native 官方推薦的創(chuàng)建 React Native 項目的方式。

Github：https://github.com/expo/expo

數(shù)據(jù)請求：Axios / TanStack Query

Axios

Axios 是一個靈活且基于 Promise 的 HTTP 客戶端，廣泛用于瀏覽器和 Node.js 環(huán)境中進(jìn)行異步的 HTTP 請求，支持請求/響應(yīng)攔截、數(shù)據(jù)轉(zhuǎn)換、取消請求等功能，簡化了前端數(shù)據(jù)交互的復(fù)雜性。Axios 目前每個月有超過 2 億次下載，是目前使用最多的數(shù)據(jù)請求工具庫。

Github：https://github.com/axios/axios

TanStack Query

TanStack Query，也就是 React Query，它是一個用于 React 應(yīng)用的數(shù)據(jù)獲取和狀態(tài)管理庫，它通過自動緩存、查詢重發(fā)、取消請求等功能，簡化了從服務(wù)器獲取和管理數(shù)據(jù)的過程，提供了一種高效且易于使用的 API 來處理異步數(shù)據(jù)。

可以將 React Query 與 Axios 結(jié)合使用。React Query 本身是一個數(shù)據(jù)獲取和狀態(tài)管理庫，并不直接執(zhí)行 HTTP 請求，而是可以與任何數(shù)據(jù)獲取庫一起工作，包括 Axios。通過將 Axios 作為數(shù)據(jù)獲取函數(shù)傳遞給 React Query 的 useQuery 或 useMutation 等 Hooks，可以利用 Axios 發(fā)送 HTTP 請求，并由 React Query 處理數(shù)據(jù)的緩存和狀態(tài)更新。

Github：https://github.com/tanstack/query

可視化：ECharts / AntV

ECharts

ECharts 是一個基于 JavaScript 的開源數(shù)據(jù)可視化圖表庫，最初由百度團(tuán)隊開發(fā)并于2018年捐贈給 Apache 基金會。它提供了直觀、生動、可交互、可個性化定制的數(shù)據(jù)可視化圖表，廣泛應(yīng)用于Web開發(fā)中，支持多種圖表類型和豐富的配置選項。

Github：https://github.com/apache/echarts

AntV

AntV 是由螞蟻金服推出的數(shù)據(jù)可視化解決方案，它包括了一系列的可視化庫和工具，用于幫助開發(fā)者和數(shù)據(jù)分析師快速構(gòu)建高質(zhì)量的數(shù)據(jù)可視化應(yīng)用。AntV 的目標(biāo)是提供一套簡單、專業(yè)、可擴(kuò)展的可視化工具集，以滿足不同場景下的數(shù)據(jù)可視化需求。

Github：https://github.com/antvis

表單：React Hook Form

React Hook Form 是一個用于 React 應(yīng)用的表單處理庫，它通過 React Hooks 提供了簡單直觀的 API 來管理表單狀態(tài)、進(jìn)行驗證和處理提交，非常適合需要快速開發(fā)和高度定制表單的場景。

Github：https://github.com/react-hook-form/react-hook-form

代碼格式化：ESLint / Prettier

ESLint

ESLint 是一個 JavaScript 代碼檢查工具，它可以幫助開發(fā)者發(fā)現(xiàn)代碼中的問題，保證代碼質(zhì)量。它基于插件化的架構(gòu)，允許開發(fā)者自定義規(guī)則和配置，以適應(yīng)不同的項目需求。

推薦使用以下 ESLint 規(guī)則集：

• eslint-plugin-react：https://www.npmjs.com/package/eslint-plugin-react
• eslint-plugin-react-hooks：https://www.npmjs.com/package/eslint-plugin-react-hooks
• eslint-config-react-app：https://www.npmjs.com/package/eslint-config-react-app

Prettier

Prettier 是一個代碼格式化工具，它通過解析代碼并使用自己的規(guī)則重新打印代碼，從而實現(xiàn)風(fēng)格一致。它支持多種編程語言，包括JavaScript、TypeScript、CSS、HTML等，并且可以與大多數(shù)編輯器集成。

Github：https://github.com/prettier/prettier。