第三組讀書會 5-6 ~ 5-7

[siouyu]

• 簡報連結：https://hackmd.io/@2xvCmtgMTB-Pd5BrM0V4ZQ/Sy60-vR8C#/
• 導讀人：Isla
• 筆記工：Ohtani

《React 思維進化》讀者回饋問卷

歡迎大家填寫，Zet 感恩讚嘆🌟🌟
https://forms.gle/Kzr8mtn8nLFqa7QWA

自我檢測討論

5-6 useCall 與 useMemo 的正確使用時機

Q1: useCall 的正確用途及適當的使用情境是什麼？

• 正確用途：
  讓函式能夠正確反應資料流的變化。
• 使用情境：

1. 維持 hooks 依賴鏈的連動反應。
2. 配合 memo 快取 component render 的畫面結果，協助 memo 機制能正確感知資料流變化。

Q2: useMemo 的正確用途及適當的使用情境是什麼？

• 正確用途：
  也是用來正確反應資料流的變化，主要使用在陣列和物件資料的處理上。
• 使用情境：
  也能維持 hooks 依賴鏈的連動反應、配合 memo 快取 component render 的畫面結果並重用以減省效能成本，幫助複雜計算的效能優化。

Q3: memo 正確用途及適當的使用情境是什麼？

主要適用於不頻繁變動的 props；能夠防止不必要的重新渲染，當傳遞給組件的 props 沒有改變時，React.memo 會使組件跳過重新渲染的過程

---

5-7 Hooks 的運作原理與設計思維

Q1: Hooks 的資料本體到底存放在何處？

Fiber node, 其工作主要保存並維護hooks資料的實際載體。React element 一旦經建立就不會再被修改，是在表達特定歷史時刻。Fiber node 是在保存最新的狀態。

fiber 架構的延伸閱讀可以參考 kyle mo 的這篇：https://medium.com/starbugs/react-開發者一定要知道的底層架構-react-fiber-c3ccd3b047a1

Q2: 為什麼 hooks 的運作依賴於固定呼叫的順序？

為了不要多命名一個 key 而導致其他非預期情況產生，讓 component 中的 hook 被呼叫的順序在每次 render 之間都是維持固定不變的，以保證內部的狀態資料存取機制正確的運作。

Q3: Hooks 如何透過順序式的資料結構設計，來避免巢狀呼叫時的鑽石問題？

純粹的函式呼叫不會有鑽石問題，會自然形成樹狀結構。component 只需要透過這些自定義 hook 展開後的整體呼叫順序來區分並追蹤 hooks 的狀態資料即可。

其他討論

Q1. useState 要盡量寫在最上面？

主要是習慣問題，跟 React 本身的運作機制無關。通常會寫在最上面通常是因為 effect 會使用到這些 state 定義出來的資料，如果寫在後面會吃不到資料。

Q2. useMemo 不只單純用來處理複雜計算，會在 component 裡面會寫一個 form 表單、form 表單裡面再包一個 useMemo 嗎？

不是函式，而是 useMemo 包了一個命名奇怪的陣列。在 useMemo 裡面包大量的 react element 不是一個常見的寫法，應該寫成一個 component。

Q3. 以後 React 可以完全不使用 compiler？

在 build 的時候自動幫你包好 useCallback 等 hook，但還是可以自己手動寫。
這些 Library 和框架的設計就是一種權衡，如果要效能最好就是全部手動去改，但通常能接受用犧牲效來換取開發者認知負擔的降低。