組件化思想

組件

組件是構建 React 應用的獨立、可複用的代碼塊。它接收輸入（稱為 props），並返回描述UI的 React 元素。

函數組件 vs 類組件

• 函數組件：一個接受輸入，並輸出JSX的函數。
• 類組件：使用class定義，並繼承React.Component的類，必須包含一個render()方法。

為什麼函數組件成為主流

1、代碼簡潔：函數組件的語法更簡單，沒有this綁定問題。

2、Hooks的引入：引入Hooks後，函數組件也能擁有狀態和生命週期等能力。

受控組件 vs 非受控組件

• 受控組件：表單數據由React組件管理的組件。表單元素（input、textarea等）的值由state控制，並通過onChange事件來更新。
• 非受控組件：表單數據由DOM本身進行管理，可以使用ref從DOM節點中獲取表單值。

狀態和屬性

state（狀態）

• 組件內部管理的數據，狀態改變會觸發組件的重新渲染。
• 如何更新：
  • 類組件：使用this.setState()
  • 函數組件：使用useState Hook 返回更新函數
  • 狀態的更新是異步的，React會對同一個事件處理函數中的多個狀態更新進行批處理
  • 狀態不可變，每次狀態更新都會產生新的狀態對象，直接修改狀態不會重渲染

props（屬性）

• 從組件外部傳入的數據，類似函數的參數，只讀，不能修改。
• 實現父組件向子組件通信（傳遞數據、回調函數等）

Hooks

1、useState

• 作用：在函數組件中添加內部狀態
• 語法：const [state,setState] = useState(初始值)
• 關鍵點：初始值可以是一個值，也可以是一個函數。調用setState會替換狀態對象

2、useEffect

• 作用：在函數組件中執行副作用操作（數據獲取，訂閲，手動修改DOM等一些異步操作）
• 執行時機：默認情況下，在每次渲染後（包括首次渲染）都會執行。
• 依賴數組（第二個參數）的控制：
  • 不提供依賴數組（null）：每次渲染後都執行
  • 依賴數組為空（[]）：僅在組件掛載後執行一次（類似於componentDidMount）
  • 依賴數組有值（[dep1,dep2]）：在組件掛載後以及dep1或dep2發生改變時執行
• 清除效應：如果useEffect的回調函數返回一個函數，這個函數會在組件卸載前和執行下一個副作用之前被調用，可以用於清理（取消訂閲、清除定時器等)

3、useContext

• 作用：接受一個Context對象（由React.createContext()創建）並返回該Context的當前值
• 實現與後代組件單向通信

4、useCallback和useMemo

• useCallback：緩存函數本身，用於優化性能。
  • 在進行重新渲染時，
    • 如果依賴項沒有發生變化，返回的是相同的函數，從而跳過重新渲染。
    • 當依賴項改變時，會更新函數，並重新渲染。
• useMemo：緩存計算結果，用於優化性能
  • 避免每次重新渲染時都進行高開銷的計算任務
  • 僅在依賴項改變時重新計算。

在JS中每次運行function(){}和()=>{}都會生成新的函數對象。

父組件中定義了一個回調函數，子組件中調用了這個函數。當父組件狀態改變時，會重渲染父組件，父組件中子組件也會重渲染，其中父組件重新生成了一個新的函數對象（雖然它的功能不變，但函數的引用變了，是一個新的對象），傳入子組件的回調函數變了，所以子組件也要重新生成。

如果使用useCallback緩存該回調函數，只要依賴數組中的元素不變，當父組件重渲染時，它會返回緩存好的函數對象，而不是生成一個新的函數對象，傳入子組件的回調函數不變，子組件跳過重新渲染。

5、useRef

• 訪問DOM元素
• 存儲一個可變的值
  • ref的current屬性可以在組件的整個生命週期內持久存在，而且改變它不會觸發組件重新渲染，可以用來存儲定時器ID，上一次屬性或狀態等。

生命週期和Hooks

• componentDidMount：組件掛載後回調

  • 使用 useEffect 並提供一個空依賴數組 []。

• componentDidUpdate：組件狀態更新時回調

  • 使用 useEffect 並不提供依賴數組或提供一個非空的依賴數組
    • 使用 useRef 來保存一個在組件生命週期內持久存在的值（isMounted），它不會觸發重渲染。
    • 首次渲染時，isMounted.current 為 false，將其設為 true 但不執行更新邏輯。
    • 後續渲染時，isMounted.current 為 true，執行更新邏輯。

• componentWillUnmount ：組件卸載之前回調

  • 在 useEffect 中返回一個清理函數並提供一個空依賴數組。

虛擬DOM

一個輕量級的Javascript對象，是真實DOM的抽象，當組件狀態改變時，React會先在虛擬DOM上進行比較計算，而不是直接操作DOM。

• 工作流程：

  1. 當狀態改變時，會創建一個新的虛擬DOM樹。
  2. 使用Diffing算法比較新舊兩個虛擬DOM樹，找出需要更新的最小部分
  3. 將計算出來的差異批量地應用到真實DOM上

• 減少對真實DOM樹的操作，極大提高性能。開發者無需關心如何高效地更新UI，只需要關心數據狀態。