作者heavenbetula (綠草)
看板Web_Design
標題[問題] 關於React.memo
時間Mon Aug 30 20:21:33 2021
各位大大好~
直接列我練習的範例
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://webptt.com/m.aspx?n=bbs/Web_Design/M.1630326096.A.18A.html
1F：推 BugofBook: 因為你使用setCount時，都是回傳一個新的物件 08/30 20:29
2F：→ BugofBook: 對不起，我看錯問題了... 08/30 20:39
3F：→ sevenHEAD: 這樣沒錯阿，setValue時沒有動到count阿 08/30 20:53
4F：推 AJ56: 雖然改了obj上的屬性 不過傳的都是同一個object地址值都一樣 08/30 21:30
5F：推 AJ56: 看錯了 return是不同的obj 08/30 22:05
6F：→ AJ56: input改變的時候 ,count沒變所以不會重新render沒錯 08/30 22:05
不好意思不太懂，input改變的時候整個App會在render一次，這時候我的count的obj
不是重新產生了一次，所以雖然obj值一樣，但是是產生新的地址吧?
而既然是新的地址，表示prop傳入的obj跟上一個prop的obj地址不同，
不是應該就要再次render嗎?
※ 編輯: heavenbetula (118.163.105.90 臺灣), 08/30/2021 22:19:59
7F：→ at5lp6andy: sum宣告在fc定義域內，這會導致每次rerender時，第3 08/30 23:14
8F：→ at5lp6andy: 9行都會重新呼叫，也就是sum會先再次被宣告、定義為 08/30 23:14
9F：→ at5lp6andy: 0，再去加count 08/30 23:14
10F：推 AJ56: 因為傳給子的只有count,所以value變動不影響count還是同一個 08/31 16:29
11F：推 AJ56: input變的時候，count沒變，count是在按add的時候才會變 08/31 16:37
好像明白了，我一直以為count沒變是object內的值沒變而已，
但其實object是"址"也沒變
因為input更改的時候沒有執行setCount所以，count的"址"是不變的
而既然"址"不變，對於子層React.memo比對後發現"址"沒有更新
因此就不會去執行render
應該是這樣吧~感謝各位大大！
※ 編輯: heavenbetula (115.43.143.26 臺灣), 09/01/2021 22:40:29