React 資源

元件級樣式

雖然我們在本教程中將所有 CSS 儲存在一個 index.css 檔案中，但 React 應用程式通常會定義每個元件的樣式表。在由 Vite 提供支援的應用程式中，這可以透過建立 CSS 檔案並將其匯入到相應的元件模組中來完成。

例如：我們可以編寫一個專門的 Form.css 檔案來存放與 <Form /> 元件相關的 CSS，然後將樣式匯入到 Form.jsx 中，如下所示

import Form from "./Form";
import "./Form.css";

這種方法可以輕鬆識別和管理屬於特定元件的 CSS，並將其與應用程式範圍的樣式區分開來。然而，它也會將樣式表分散在整個程式碼庫中，這種分散可能不值得。對於擁有數百個獨立檢視和大量移動部件的更大應用程式，使用元件級樣式並因此限制一次傳送給使用者的無關程式碼量是有意義的。

您可以在 Smashing Magazine 的文章 Styling Components In React 中閱讀更多關於此方法和其他樣式化 React 元件的方法。

React DevTools

在本教程中，我們使用 console.log() 來檢查應用程式的狀態和 props，您還會看到 React 在 CLI 和瀏覽器的 JavaScript 控制檯中給出的一些有用的警告和錯誤訊息。但我們可以在這裡做更多的事情。

React DevTools 工具允許您直接在瀏覽器中檢查 React 應用程式的內部。它會在您瀏覽器的開發人員工具中新增一個新面板，允許您檢查各種元件的狀態和 props，甚至可以編輯狀態和 props 以對應用程式進行即時更改。

此螢幕截圖顯示了我們的最終應用程式在 React DevTools 中的顯示方式

在左側，我們看到構成應用程式的所有元件，包括從陣列渲染的專案的唯一鍵。在右側，我們看到 App 元件使用的 props 和 hooks。另請注意，Form、FilterButton 和 Todo 元件向右縮排——這表示 App 是它們的父級。此檢視非常適合一目瞭然地理解父/子關係，對於理解更復雜的應用程式來說是無價的。

React DevTools 有多種形式可用

• Chrome 瀏覽器擴充套件程式。
• Firefox 瀏覽器擴充套件程式。
• Microsoft Edge 瀏覽器擴充套件程式。
• 您可以使用 npm 或 Yarn 安裝的獨立應用程式。

嘗試安裝其中一個，然後使用它來檢查您剛剛構建的應用程式！

您可以在 React 文件中閱讀更多關於 React DevTools 的資訊。

useReducer() Hook

在本教程中，我們使用 useState() hook 來管理一小部分事件處理函式的狀態。這對於學習目的來說很好，但它使我們的狀態管理邏輯與元件的事件處理程式（尤其是 <Todo /> 元件的事件處理程式）緊密繫結。

useReducer() hook 為開發人員提供了一種將不同但相關的狀態管理邏輯整合到單個函式中的方法。它比 useState() 複雜一些，但它是您工具箱中一個很好的工具。您可以在 React 文件中閱讀更多關於 useReducer() 的資訊。

Context API

我們在本教程中構建的應用程式利用元件 props 將資料從其 App 元件傳遞給需要它的子元件。大多數情況下，props 是共享資料的合適方法；但是，對於複雜、深度巢狀的應用程式，它們並不總是最好的。

React 提供了 Context API，作為一種無需透過元件樹傳遞 props 即可向需要資料的元件提供資料的方法。還有一個 useContext hook 促進了這一點。

如果您想親自嘗試此 API，Smashing Magazine 撰寫了一篇 關於 React context 的入門文章。

類元件

儘管本教程沒有提及它們，但可以使用 JavaScript 類 來構建 React 元件——這些被稱為類元件。在 hooks 出現之前，類是將狀態引入元件或管理渲染副作用的唯一方法。它們仍然是處理某些邊緣情況的唯一方法，並且在舊版 React 專案中很常見。官方 React 文件保留了 Component 基類的參考，但建議使用 hooks 來管理 狀態 和 副作用。

測試

諸如 React Testing Library 之類的庫使得為 React 元件編寫單元測試成為可能。有許多方法可以執行這些測試。測試框架 Vitest 構建在 Vite 之上，是您的 Vite 驅動的 React 應用程式的絕佳伴侶。Jest 是另一個流行的測試框架，可以與 React 一起使用。

路由

雖然路由傳統上由伺服器而不是使用者計算機上的應用程式處理，但可以配置 Web 應用程式以讀取和更新瀏覽器的位置，並渲染某些使用者介面。這稱為客戶端路由。可以為您的應用程式建立許多唯一的路由（例如 /home、/dashboard 或 /login）。

React Router 是最流行、最強大的 React 客戶端路由庫。它允許開發人員定義應用程式的路由，並將元件與這些路由關聯起來。它還提供了許多有用的 hooks 和元件來管理瀏覽器的位置和歷史記錄。

• 上一頁
• 概述：JavaScript 框架和庫
• 下一頁