iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0

如果有錯誤,歡迎留言指教~ Q_Q 沒寫完啦

子元件通常會接收父元件的 state 或 event,如果父元件的狀態改變了,即使 props 的結果沒有變,子元件依然會 re-render

在需要減少渲染的元件外面再包一層 React.memo ,就可以讓 React 幫我們記住原本的 props。

但是!React.memo 只會自動檢查 Props,不會管 State!

React.memo 可以接收第二個 CallBack 函式,只要回傳 false 就會 Render,true 就不會,和之前的 shouldComponentUpdate 相反,然後它只能取到 Props 來判斷,沒有 State。

用 shallowly compare 的方法確認 props 的值是否一樣, shallowly compare 在 props 是 Number 或 String 比較的是數值,當 props 是 Object 時,比較的是記憶體位置 (reference)。

因此,當父元件重新渲染時,在父元件宣告的 Object 都會被重新分配記憶體位址!


上一篇
Day 19 - 效能優化,避免過度 render state
下一篇
Day 21 - Memorized Hook: useCallback
系列文
以 React 為主的那些前端事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言