?一、核心概念

1.?組件化開發

• 核心思想：將 UI 拆分為獨立、可復用的組件（函數組件/類組件）。
• 組件特性：props（接收參數）、state（組件狀態）、生命周期（類組件特有）。

2、虛擬 DOM

（1）什么是虛擬DOM?

Virtual DOM是一種編程概念。通俗點理解，虛擬DOM是一顆虛擬的JavaScript對象樹，畫重點，”虛擬的“、”JS對象“，指的是它把真實的網頁文檔節點，虛擬成一個個的js對象，并以樹型結構，保存在內存中。

（2）React虛擬DOM的實現原理。

React虛擬DOM的實現原理，通過JS模擬網頁文檔節點，生成JS對象樹(虛擬DOM)，然后再進一步生成真實的DOM樹，再繪制到屏幕。如果后面有內容發生改變，React會重新生成一棵全新的虛擬DOM樹，再與前面的虛擬DOM樹進行比對diff，把差異的部分打包成patch，再應用到真實DOM，然后渲染到屏幕瀏覽器。

（3）Virtual DOM具體步驟可具體表現為：

• 構建虛擬DOM
• 通過虛擬DOM構建真正的DOM
• 內容更改，生成新的虛擬DOM
• 比較1和3兩棵虛擬DOM樹，得到patch
• 把patch應用到真正的DOM上

3、單向數據流

數據從父組件通過 props 流向子組件，子組件通過回調函數向父組件傳遞數據。

二、關鍵特性

1.?狀態管理

• useState（函數組件）：管理組件內部狀態。
• useEffect：處理副作用（如異步請求、DOM 操作）。
• 復雜場景：Redux、Recoil、 Zustand 等狀態管理庫。、

2、組件通信

• 父子組件：props / 回調函數。
• 跨組件：Context API（避免多層嵌套傳參）、狀態管理庫。
• 兄弟組件：通過共同父組件通信。

3、Hook 機制

• 常用 Hook：?useState?、?useEffect?、?useContext?、?useRef?、?useCallback?、?useMemo?。
• 自定義 Hook：復用組件邏輯（如數據請求邏輯）。

三、開發流程與工具

1、創建項目

使用 ?create-react-app??或 Vite 快速搭建項目。

2、路由管理

React Router（配置前端路由，實現單頁應用）。

3、狀態與副作用

• 異步請求：Axios / Fetch API，配合 ?useEffect??或 SWR / React Query 優化。
• 表單處理：受控組件（通過 ?useState??管理表單狀態）。

4、構建與部署

• 打包工具：Webpack（ CRA 內置）、Vite。
• ?部署：靜態服務器（如 Netlify、Vercel）、服務器渲染（Next.js）。

四、高級主題

1、性能優化

• 避免不必要的重新渲染：?useMemo?（緩存計算值）、?useCallback?（緩存函數）、?React.memo?（ memoize 組件）。
• 虛擬列表：處理大數據量渲染（如 react-window）。

2、服務器端渲染（SSR）

框架：Next.js（支持 SSR、靜態站點生成（SSG）、API 路由）。

?3、TypeScript 支持

類型定義：React 內置類型聲明，提升代碼健壯性。

4、測試

庫：Jest（單元測試）、React Testing Library（組件測試）。?

五、生態與周邊

• UI 庫：Ant Design、Material-UI、Chakra UI。
• 狀態管理：Redux Toolkit、Jotai、Pinia（Vue 生態類似庫，可類比理解）。
• 跨平臺開發：React Native（開發移動端應用）。
• 構建工具：Babel（轉譯 JSX）、ESLint（代碼規范檢查）。