React Core Concepts Roadmap

如果你想要真正精通 React，就少花時間在“學習更多函式庫”上，多花時間深入掌握核心概念.

這些才是真正重要的概念.

1. Components & Composition

React 的基礎.

理解：

• 可重用組件
• 屬性
• 組合模式
• 受控與非受控組件
• 將狀態提升

核心心態：

Small reusable pieces > giant components

這是初學者與進階 React 代碼之間最大的差異之一。

2. 狀態管理

你必須深入理解：

• 本地狀態
• 衍生狀態
• 共用狀態
• 伺服器狀態

而且特別是：

Not everything should go into state

一個巨大的初學者錯誤是過度使用狀態.

3. 渲染行為

這是極其重要的

學習：

• 什麼導致重新渲染
• 父/子重新渲染
• reconciliation
• React 渲染週期
• 批次處理
• 渲染與提交階段

這些知識解釋：

• 效能問題
• 奇怪的 UI 行為
• 不必要的重新渲染

4. 深入理解 Hooks

不僅僅是語法.

真正理解：

• useState
• useEffect
• useMemo
• useCallback
• useRef
• useContext

特別是：

useEffect

絕大多數 React 錯誤來自於對效果的理解錯誤.

學習：

• 依賴數組
• 過期的閉包
• 清理函數
• 同步思維

5. 伺服器狀態與客戶端狀態

這是現代 React 架構.

理解之間的差異：

客戶端狀態

僅限UI狀態.

範例:

• 模態視窗開啟
• 活動tab
• 輸入值

伺服器狀態

來自後端資料.

範例:

• 使用者
• 通知
• 產品

這引導出工具如:

• TanStack Query

6. 資料擷取& 快取

現代最重要的技能之一.

學習：

• 擷取生命週期
• 載入狀態
• 背景重新擷取
• 樂觀更新
• 快取無效
• 過期資料
• 重試

這在實際應用中至關重要

7. React 架構

學習如何構建應用

理解：

• 資料夾結構
• 關注點分離
• 可重用模式
• 基於功能的架構
• UI 與業務邏輯

這比花哨的函式庫更重要。

8. 表單

表單看似簡單，實則困難重重.

學習：

• 受控輸入
• 驗證
• 非同步提交處理
• 樂觀表單更新

最終：

• React Hook Form

9. 非同步UI思考

現代React主要是非同步的。

了解：

• 承諾
• 競態條件
• 並行請求
• 請求取消
• 樂觀式UI
• 懸置心態

10. 性能

後來非常重要。

學習：

• 記憶化
• 虛擬化
• 程式分割
• 延遲載入
• 避免不必要的渲染

但只有在深刻理解渲染之後

11. React 心智模型

這是最重要的事

React 不是:

"change DOM directly"

React 是:

UI = function(state)

你根據狀態描述 UI

React 處理更新

這種心智模型改變了一切

12. 以 React 思考

高級 React 開發者以：

• 狀態流
• 數據擁有權
• 同步思考
• 使用者介面過渡
• 組件邊界

非：

• “我應該把這段程式碼放在哪裡？”

React 學習中最大的里程碑

初級 React

• 學習語法

中級 React

• 建立功能

高級 React

• 理解渲染和狀態架構

高級 React

• 設計可預測的非同步 UI 系統

推薦學習順序

1. 組件
2. 狀態
3. 渲染
4. 鉤子深入
5. 非同步行為
6. 伺服器狀態
7. 快取
8. 建築
9. 性能
10. 先進模式

究竟是什麼讓 React 複雜

不是 JSX.

不是 hooks 語法.

困難之處是：

managing async state predictably

這才是 React 的真正技能上限。