天貓精靈Sound Pro體驗：智能音箱沒有音質？來聽聽我的
這幾年除了手機作為智能生活終端最主要的核心之外，第二個可以成為中心點的產品是什么？——是智能音箱。 手機在執行命令的時候有兩種操作方式，手和智能語音助手，而智能音箱只
React 已經經歷了相當長的發展歷程。與此同時，一個功能全面且復雜的庫生態系統在 React 的基礎上逐漸形成。本文就來深入探討一下 2024 年你可以 React 項目中使用的庫！
對于初學 React 的開發者，首先要面臨的問題就是如何搭建一個 React 項目。市面上的工具眾多，目前最受 React 社區歡迎的是 Vite。Vite 不僅支持多種庫（如 React）與TypeScript 的結合使用，還具備出色的性能。
如果你已經對 React 有所了解，那么可以考慮使用 Next.js 或 Remix 等其他（元）框架作為 Vite 的替代方案。Next.js 最初主要用于服務端渲染，但如今也支持靜態站點生成以及其他渲染模式。2023年，Next.js 引入了新的功能——React Server Components，這一功能將 React 組件從客戶端遷移到了服務端，從而實現了重大的范式轉變。
如果尋求性能卓越的靜態內容框架，那么 Astro 是一個理想的選擇。它不僅與各種框架兼容，而且能與 React 協同工作。在將內容發送到瀏覽器時，Astro 僅包含 HTML 和 CSS，即使使用了如 React 這樣的框架來創建組件。只有當這些組件變得交互式時，才會請求必要的 JavaScript。
如果你是 React 老手，并希望嘗試新的技術，Nitro 或 Waku都是不錯的選擇。Waku 由 Zustand 的創造者開發，并支持 React Server Components。
建議：
如果你正在尋找在 JavaScript 生態系統中（尤其是React）包管理工具，npm 無疑是首選，因為它與 Node.js 安裝捆綁在一起。然而，yarn 和 pnpm 也是值得考慮的優秀替代方案。特別是 pnpm，它提供了更高的性能。
如果有多個相互依賴或共享通用UI組件的React應用，monorepo 的概念可能值得探索。所有上述包管理器都支持使用其內部工作區功能創建 monorepo，但使用 yarn 或 pnpm 時可以獲得更好的開發體驗。結合諸如 Turborepo 之類的 monorepo 管道工具，可以使整個體驗更加順暢。
建議：
React 提供了兩個用于管理本地狀態的內置 Hooks：useState 和 useReducer。若要進行全局狀態管理，可以利用 React 的 useContext Hook，它能夠將屬性從頂級組件安全地傳遞至其子組件，從而避免了屬性傳遞的問題。
這三個 React Hooks 都賦予了開發者在 React 中實現強大狀態管理的能力。可以選擇在組件內部使用 useState/useReducer Hook 進行協同定位，或者將它們與 useContext Hook 結合進行全局管理。
如果頻繁地使用 React 的 Context 進行全局狀態管理，那么 Zustand 可能會是你需要的工具。Zustand 允許管理全局應用狀態，任何與 Zustand 存儲連接的 React 組件都可以讀取和修改這些狀態。
盡管 Zustand 已成為社區中的主流選擇，但當需要狀態管理庫時，Redux 仍然是市場上最受歡迎的 React 狀態管理工具庫。若你選擇使用Redux，推薦你一并查看 Redux Toolkit。如果對狀態機有特別的興趣，XState 和 Zag 也是不錯的選擇。如果需要一個全局存儲，但不滿意 Zustand 或 Redux，Jotai、Recoil 或 Nano Stores 等本地狀態管理解決方案值得考慮。
建議：
useState/useReducer。useContext。在處理 UI 狀態時，React 的內置 Hook 是非常適用的。然而，當涉及到遠程數據的狀態管理（包括數據獲取和緩存）時，建議使用專門的數據獲取庫，比如TanStack Query（前身為React Query）。
雖然 TanStack Query 本身并不是一個專門的狀態管理庫，主要用于從 API 獲取遠程數據，但它能夠處理所有與該遠程數據相關的狀態管理工作，包括緩存和樂觀更新。
如果在 React 中需要更專用的 GraphQL 庫，除了 TanStack Query，還可以考慮使用 Apollo Client（流行）、urql（輕量級）或 Relay（由Facebook開發）。
如果希望在 Redux 中集成數據獲取和狀態管理功能，那么可以考慮使用 RTK Query，它能夠將數據獲取功能與 Redux 無縫集成，簡化狀態管理流程。
此外，如果同時開發前端和后端（并且兩者都使用TypeScript），那么 tRPC 是一個值得考慮的選項。tRPC 提供端到端的類型安全 API，可顯著提高開發效率和用戶體驗。當需要從前端調用后端時，可以使用類型化的函數。
建議：
fetch 使用如果使用 Next.js 這樣的 React 框架，路由已經處理好了。然而，如果使用的是沒有框架的React，僅用于客戶端渲染（例如 Vite 無 SSR），那么最強大和最受歡迎的路由庫是React Router。另一個新的選擇是 TanStack Router，它特別考慮了 TypeScript 的支持。
當在 React 中通過 React Router 使用客戶端路由時，在路由級別上引入代碼分割并不復雜。如果進行此類優化，可以使用@loadable/component替換React.lazy()。
建議：
作為 React 的初學者，可以通過在 JSX 中使用樣式對象來從內聯樣式和簡單的 CSS 開始。然而，對于實際應用，應避免頻繁使用這種方法。
const Headline = ({ title }) => <h1 style={{ color: 'blue' }}> {title} </h1>在React 的 JSX 中，雖然可以使用 JavaScript 動態地添加內聯樣式，但為了保持代碼的整潔和可維護性，通常建議將大部分樣式放在外部 CSS 文件中。這樣，所有的樣式規則都可以集中在一個地方，便于管理和修改。
import './Headline.css';const Headline = ({ title }) => <h1 className="headline" style={{ color: 'blue' }}> {title} </h1>首先，建議了解一下 CSS 模塊。作為眾多 CSS-in-CSS 解決方案中的一種，它能夠將 CSS 封裝到與組件同源的模塊中。這樣一來，樣式就不用擔心會不小心泄露到其他組件中。
import styles from './style.module.css';const Headline = ({ title }) => <h1 className={styles.headline}> {title} </h1>其次，推薦使用 Styled Components，這是眾多 CSS-in-JS 解決方案中的一種，專門為 React 設計。Styled Components（或其替代品如 emotion）允許將使用 JavaScript 創建的樣式與 React 組件放在同一文件或相鄰文件中。這種方法有助于保持代碼的整潔和組織性，并減少樣式的意外泄露。
import styled from 'styled-components';const BlueHeadline = styled.h1` color: blue;`;const Headline = ({ title }) => <BlueHeadline> {title} </BlueHeadline>第三，推薦使用 Tailwind CSS，這是最流行的實用型 CSS 解決方案。它提供了預定義的 CSS 類，這使得開發人員更高效，并簡化了 React 應用的設計系統。然而，使用 Tailwind CSS 需要了解所有預定義的類，并且在某些情況下可能需要冗長的內聯樣式。
const Headline = ({ title }) => <h1 className="text-blue-700"> {title} </h1>最終選擇哪種樣式方案取決于你的具體需求和偏好。目前，實用類優先的 CSS（如Tailwind CSS）是主流趨勢。如果希望在 React 中根據條件應用樣式，可以考慮使用像 clsx 這樣的實用庫。
建議：
對于初學者來說，親手構建可復用的組件是極佳的學習經驗。無論需要創建一個下拉菜單、選擇框、單選按鈕還是復選框，都應該學會如何獨立地完成這些 UI 組件。
當然，如果你覺得創建所有組件的工作過于繁重，可以選擇使用現成的 UI 庫。這些庫已經準備了許多預先構建的組件，并且它們都遵循相同的設計原則、功能性和無障礙性標準：
不過，值得注意的是，UI庫的發展趨勢正朝向無樣式化轉變。這些新的庫沒有固定的樣式，但它們具備現代組件庫所必需的所有功能和無障礙性。它們經常與像Tailwind這樣的實用CSS解決方案配合使用：
盡管這些UI庫都自帶組件，但它們無法像專注于單一UI組件的庫那樣強大。例如，使用react-table-library 可以在 React 中創建功能強大的表格組件，同時它還提供各種主題（如Material UI），能夠輕松地與UI庫集成。
在 Web 應用中，所有動畫都始于 CSS。但隨著需求的發展，CSS 動畫可能無法滿足需求。這時，開發人員通常會尋求動畫庫的幫助，它使你能夠使用 React 組件進行動畫操作。一些廣受好評的 React 動畫庫包括：
在 React 中創建圖表時，開發人員通常會選擇一些預先構建的圖表庫，以換取更高的靈活性和可定制性。然而，如果希望從頭開始創建圖表，那么D3是一個無法回避的選擇。它是一個基礎的可視化庫，提供了創建精美圖表所需的所有工具。
然而，由于學習 D3 需要投入大量的時間和精力，許多開發人員更傾向于選擇一個React圖表庫。這些庫提供了現成的圖表、強大的可組合性，并且可以根據需要進行定制。一些流行的 React 圖表庫包括：
更傾向于低層次的 D3 而不是高層次的抽象
學習難度大
現成的圖表較多，定制難度較高
Victory
nivo
react-chartjs
在 React 中，最受歡迎的表單庫是 React Hook Form。它提供了所需的所有功能：驗證（最受歡迎的集成是 zod）、表單提交和表單狀態管理。作為替代方案，還有 Formik 和React Final Form 可供選擇。
建議：
React 自帶了一個名為 PropTypes 的內置屬性驗證功能。通過 PropTypes可以為 React 組件定義屬性。如果向組件傳遞了類型錯誤的屬性，將收到錯誤消息。
import PropTypes from 'prop-types';const List = ({ list }) => ( <div> {list.map((item) => ( <div key={item.id}>{item.title}</div> ))} </div>);List.propTypes = { list: PropTypes.array.isRequired,};盡管 PropTypes 曾經是 React 的一個重要組成部分，但現在它們已經不再包含在 React 中了。由于歷史原因，這里仍然提到了它們，但強烈建議不要使用它。
對于現代的 React 應用，行業標準是使用 TypeScript。如今，幾乎所有的新 React 項目都采用 TypeScript，因此建議你也嘗試在 React 中使用 TypeScript。
type Item = { id: string; title: string;};type ListProps = { list: Item[];};const List = ({ list }: ListProps) => ( <div> {list.map((item) => ( <div key={item.id}>{item.title}</div> ))} </div>);如果需要進行更高級的有類型表單驗證、API 驗證（例如使用 tRPC）等，可以考慮使用 Zod。
建議：
如果希望在 React 項目中采用統一且符合常識的代碼風格，強烈推薦使用 ESLint。ESLint是一個強大的代碼檢查工具，可以強制執行特定的編碼標準。例如，可以配置 ESLint 來遵循流行的風格指南（如Airbnb風格指南），以確保代碼的一致性和規范性。
同時，如果希望自動化地格式化代碼，Prettier 也是一個不錯的選擇。Prettier是一個無配置項的代碼格式化工具，可以輕松集成到編輯器中。每次保存文件時，它會自動格式化代碼，使代碼更易于閱讀和維護。
ESLint 和 Prettier 可以很好地協同工作。ESLint 主要用于檢查代碼中的錯誤和潛在問題，而 Prettier 則專注于使代碼格式更加一致和易于閱讀。因此，結合使用兩者可以大大提高代碼質量和開發效率。
另外，值得注意的是，隨著時間的推移，可能會有新的工具和技術出現并取代 ESLint 和 Prettier 的地位。Biome（前身為Rome）是一個值得關注的新興工具，它旨在提供一個快速且一體化的代碼檢查和格式化解決方案。
建議：
在 React 應用中實現身份驗證功能時，通常涉及到用戶注冊、登錄、注銷以及可能的密碼重置和密碼更改等功能。然而，這些功能超出了 React 本身的范圍，因為實際的身份驗證邏輯通常由后端應用程序處理。
建議使用這些身份驗證/后端即服務解決方案中的一種：
隨著 React 在服務端的應用日益普及，像 Next.js、Astro 或 Remix 這樣的元框架成為了 React 項目的理想選擇。這些框架提供了構建全棧應用所需的一切，同時充分發揮了React的優勢。
如果由于某些原因無法使用全棧框架，但仍然希望使用 JavaScript 或 TypeScript，那么可以考慮使用 tRPC 或 Hono。這兩者都是強大的后端解決方案，能夠與 React 前端無縫集成。
當然，我們也不能忽視那些傳統的后端框架。Express 框架仍然備受推崇，盡管它可能不是最前沿的技術，但其穩定性和成熟度使其成為許多項目的首選。其他值得考慮的選項包括 Fasitfy 和 Nest.js，它們都具有強大的功能和靈活性，能夠滿足各種后端需求。
盡管 React 本身并不直接與數據庫交互，但隨著全棧 React 應用的普及，它與數據庫的交互越來越緊密。在開發 Next.js 應用時，可能會遇到數據庫對象關系映射器（ORM）。目前最受歡迎的 ORM 是 Prisma。另一個值得考慮的選項是 Drizzle ORM。其他可用的選項包括 Kysely 和 database-js（僅適用于PlanetScale）。
選擇合適的數據庫時，Supabase 和 Firebase 是兩個流行的數據庫提供商。Supabase 提供 PostgreSQL，既可自托管也可作為付費服務使用。對于無服務器數據庫，PlanetScale、Neon 和 Xata 是值得考慮的替代方案。
測試 React 應用的核心是使用如 Jest 這樣的測試框架。Jest 提供了測試運行器、斷言庫以及其他實用的功能，滿足全面測試框架的需求。如果傾向于使用 Vite，Vitest 是一個值得考慮的 Jest 替代方案。
在測試框架中渲染 React 組件時，可以使用 react-test-renderer。這足以進行所謂的快照測試，這是通過 Jest 或 Vitest 進行的。快照測試的工作方式如下：一旦運行測試，會為 React 組件的渲染DOM元素創建快照。在未來的某個時間點再次運行測試時，將創建另一個快照，并使用它與前一個快照進行比較。如果差異不匹配，測試框架會發出警告，可以選擇接受快照或調整組件。
隨著時間的推移，你可能會發現自己在測試框架環境中使用React Testing Library（RTL）。RTL是一個全面的 React 測試庫，可以在測試框架環境中使用。它能夠渲染組件并模擬HTML元素上的事件。然后，可以使用測試框架進行斷言。
如果正在尋找用于 React 端到端（E2E）測試的測試工具，Playwright 和 Cypress 是最受歡迎的選擇。
建議：
在 JavaScript 中，原生提供了許多工具來處理數據結構，使其看似不可變。但如果有必要強制使用不可變數據結構，Immer 是一個廣受歡迎的選擇。
在為 React 應用進行國際化時，需要考慮的不僅是翻譯，還包括復數形式、日期和貨幣格式化等方面。以下是一些流行的庫，可用于處理這些問題：
當 React 應用需要處理大量日期、時間和時區時，引入一個專門管理這些內容的庫是很有用的。以下是一些可用的選項：
Electron 和 Tauri 是跨平臺桌面應用的框架。
如果想將 React 從 Web 移植到移動平臺，React Native 仍然是最佳選擇。Expo 作為最流行的框架，可以輕松創建 React Native 應用。而如果需要實現跨 Web 和移動端的統一組件，Tamagui 是一個值得考慮的方案。
react-beautiful-dnd 是最受歡迎的 React 拖拽庫。dnd kit 是一個流行的替代品，它提供了更多的靈活性和選項，但學習難度也更大。在該領域中，react-dnd 也是一個不錯的選擇。
React 也可以用于開發虛擬現實 (VR) 和增強現實 (AR) 的應用。大部分庫仍處于早期階段（實驗階段），但以下是與 React 相關的 AR/VR 庫：
在編寫組件文檔時，有許多優秀的 React 文檔工具可供選擇：
React 生態系統可以被視為 React 的一個框架，但它保持了對 React 的靈活性。這是一個靈活的框架，可以自行決定選擇加入哪些庫。可以從小處著手，只添加解決特定問題的庫。相反，如果 React 就是所需的全部，可以只使用它，保持輕量級。
本文鏈接：http://www.www897cc.com/showinfo-26-62796-0.html2024 年 React 生態系統一覽
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 人工智能和大語言模型 ( LLM )中常說的人工智能體 (AI Agent) 到底是什么？
下一篇： C# 登頂！超越 Java 或非空想
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號