[問題] 關於React.memo

看板Web_Design作者 (綠草)時間10月前 (), 10月前編輯推噓5(506)
留言11則, 4人參與, 10月前最新討論串1/1
各位大大好~ 直接列我練習的範例 https://stackblitz.com/edit/react-y311mj 是這樣的,這是一個可以計數的按鈕,然後範例中有個Expensive的component 會傳一個count進去,Expensive會根據這個count變化, 因此按下按鈕會render這不意外。 而input欄位由於只會修改本身的input值,不會動到count,因此 對於Expensive而言是不需要render的,所以這邊試著加入React.memo 來防止Expensive 重新render,這邊都沒有問題。 但是我想說因為文件上寫說React.memo是shallow compare的淺比較 因此上面這個範例,我故意將count用成deep好幾層的方式,想試試看 是否就會rerender無效,但意外的是,React.memo卻依然正常防止了 Expensive重新render。 請問這是為什麼呢? 我傳入的prop是{count:{count:0}},這不是shallow了吧 那為什麼在input欄位輸入值的時候,Expensive卻不會重新render? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.163.105.90 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1630326096.A.18A.html

08/30 20:29, 10月前 , 1F
因為你使用setCount時,都是回傳一個新的物件
08/30 20:29, 1F

08/30 20:39, 10月前 , 2F
對不起,我看錯問題了...
08/30 20:39, 2F

08/30 20:53, 10月前 , 3F
這樣沒錯阿,setValue時沒有動到count阿
08/30 20:53, 3F

08/30 21:30, 10月前 , 4F
雖然改了obj上的屬性 不過傳的都是同一個object地址值都一樣
08/30 21:30, 4F

08/30 22:05, 10月前 , 5F
看錯了 return是不同的obj
08/30 22:05, 5F

08/30 22:05, 10月前 , 6F
input改變的時候 ,count沒變所以不會重新render沒錯
08/30 22:05, 6F
不好意思不太懂,input改變的時候整個App會在render一次,這時候我的count的obj 不是重新產生了一次,所以雖然obj值一樣,但是是產生新的地址吧? 而既然是新的地址,表示prop傳入的obj跟上一個prop的obj地址不同, 不是應該就要再次render嗎? ※ 編輯: heavenbetula (118.163.105.90 臺灣), 08/30/2021 22:19:59

08/30 23:14, 10月前 , 7F
sum宣告在fc定義域內,這會導致每次rerender時,第3
08/30 23:14, 7F

08/30 23:14, 10月前 , 8F
9行都會重新呼叫,也就是sum會先再次被宣告、定義為
08/30 23:14, 8F

08/30 23:14, 10月前 , 9F
0,再去加count
08/30 23:14, 9F

08/31 16:29, 10月前 , 10F
因為傳給子的只有count,所以value變動不影響count還是同一個
08/31 16:29, 10F

08/31 16:37, 10月前 , 11F
input變的時候,count沒變,count是在按add的時候才會變
08/31 16:37, 11F
好像明白了,我一直以為count沒變是object內的值沒變而已, 但其實object是"址"也沒變 因為input更改的時候沒有執行setCount所以,count的"址"是不變的 而既然"址"不變,對於子層React.memo比對後發現"址"沒有更新 因此就不會去執行render 應該是這樣吧~感謝各位大大! ※ 編輯: heavenbetula (115.43.143.26 臺灣), 09/01/2021 22:40:29
文章代碼(AID): #1XBCrG6A (Web_Design)
文章代碼(AID): #1XBCrG6A (Web_Design)