[Behind React] Components updates and React.memo

組件的更新與 Props 關係、以及 memo 的功用

這邊用的是很簡單的 count 例子 App 底下有一個每按一次就會數字 +1 Button 組件
顯示標題的 Title 組件
以及準備用來展示當前數字的 ShowCount 組件

• -- 我並沒有把任何值當作 props 給 Title，即使如此，當我點擊 Button 時，仍然會重新 render App 、 Title -> 但其實 Title，根本沒有改變，重新 render Title 會浪費效能，這時就可以考慮用 React.memo()
• -- React.memo() : 花費一些效能，先比較新 props 跟前一個 props 是否不同，再決定要不要 run 重新渲染。而在 Title 裡，沒有接收任何 props，代表比較時得到結果會是相同，就不會再重新 render
• -- 因此，當使用 memo() 包裝組件時，React 會做兩件事：
• -- 1. 儲存先前的 props values
• -- 2. 進行比對 -> 不同時才 render
• -- 以上面這個例子來說，雖然可以用 memo 包裝 Title 來避免不需要的render。但還是得看 Title 本身及其底下的複雜度，若很單純，其實搞不好不使用 memo 還更有效率，像這個例子就很單純，不使用 memo ，影響也不大。

提示

因為比對 props 也會耗效能，需思考該組件有沒有真的需要 memo
可以思考幾個參照依據：

1. props 的數量
2. child components 的數量
3. 組件樹的複雜度

---

避免使用 memo 的時機：

1. 已經預知幾乎會隨著每次的重新計算而改變
2. 非常小型的組件樹