第一組讀書會 5-1 ~ 5-2

[ywcheng1207]

導讀人： Vita
筆記工： Willy

---

Review

這兩個章節主要是介紹副作用及useEffect，釐清對於useEffect常見的誤解。

副作用：

常見的副作用包像是操作DOM、修改函式外面的變數等行為。副作用的壞處就是可能導致程式可預測性降低，造成開發及維護上的困難。因此框架需要一個工具來區隔副作用的處理，以方便管理，而React使用的就是useEffect。

關於5-2提到的觀念釐清：useEffect 其實不是 function component 的生命週期 API：

在釐清這個觀念以前，需要先知道程式設計有分為宣告式與指令式。過去React使用的class component是指令式的，也就是說，需要特別指定在元件渲染的各個階段 (生命週期)，需要對應做什麼事情。但function component與useEffect是宣告式的設計，開發者不會去控制時機這件事情。有了這個觀念之後，進一步看到useEffect的dependencies，常見的誤解就是以為它的意義是「何時執行」，但其實是「何時跳過」。

---

QA

5-1 React 中的副作用處理：effect 初探

- 什麼是副作用？為什麼我們需要透過 useEffect 在 React component function 中處理副作用？

副作用表示函式在執行過程中影響到其外部狀態。用useEffect來管理副作用可以隔離component function 的其他操作與副作用處理

- 以 useEffect 來處理一段副作用的三大步驟是什麼？

1.定義effect function，裡面放要處理的副作用邏輯
2.定義cleanup function (如果有需要)，裡面放清除或逆轉副作用的邏輯，避免記憶體洩漏
3.定義dependencies，跳過不必要的副作用處理

- 解釋「每次 render 都有其自己版本的 effect 與 cleanup 函式」是什麼意思？

effect function, cleanup function在每次render過程都會重新被建立一次，並且他們會取得的也是該次render版本的props與state的snapshot

- 一次 render 中的 effect 函式與 cleanup 函式會在什麼時間點被執行？

在瀏覽器完成本次 render 的 DOM 繪製之後，會先執行上一次 render 定義的 cleanup function（如果有定義），然後再執行當次 render 定義的 effect function。

5-2 useEffect 其實不是 function component 的生命週期 API

- useEffect 是 function component 的生命週期 API 嗎？為什麼？

不是，useEffect的用途是將原始資料同步化到React element以外的東西上，也就是副作用處理

- 為什麼 React 要以 useEffect 的資料流同步化這種設計來取代生命週期 API？

這是一種宣告式的程式設計，只需要宣告這次要處理的操作函式，不需要指定執行的時機，會自動在每次render完成副作用處理，不需要逐一指定在元件生命週期的各階段進行什麼操作

- useEffect 的 dependencies 機制的設計目的與用途是什麼？

這是一種效能優化，useEffect的預設情況是會在每次render都執行effect function，添加dependencies可以避免不必要的副作用處理 (也許某些render的情況不需要該副作用處理)

- 我們可以用 dependencies 參數來模擬 function component 生命週期 API 的效果嗎？

雖然effect function的執行時機與class component的生命週期API相似，但useEffect的功能不是用來指定時機進行callback function的。也就是說, useEffect是宣告式的不是指令式的，它描述的是副作用，而不是具體的生命週期。

---

補充問題

1. 請告訴我初次渲染時， console 會印出的順序為何 ?
2. 跟按下 Button 時， console 會印出的順序為何 ?

const FinalExample = () => {
  const [count, setCount] = useState(0);
  console.log("A");
  
  useEffect(() => {
    console.log("B");
    return () => {
      console.log("C");
    };
  }, [count]);

答案

1. ADEB
2. ADECB