[問題] 關於React.memo
各位大大好~
直接列我練習的範例
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,
3年前
, 1F
08/30 20:29, 1F
→
08/30 20:39,
3年前
, 2F
08/30 20:39, 2F
→
08/30 20:53,
3年前
, 3F
08/30 20:53, 3F
推
08/30 21:30,
3年前
, 4F
08/30 21:30, 4F
推
08/30 22:05,
3年前
, 5F
08/30 22:05, 5F
→
08/30 22:05,
3年前
, 6F
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,
3年前
, 7F
08/30 23:14, 7F
→
08/30 23:14,
3年前
, 8F
08/30 23:14, 8F
→
08/30 23:14,
3年前
, 9F
08/30 23:14, 9F
推
08/31 16:29,
3年前
, 10F
08/31 16:29, 10F
推
08/31 16:37,
3年前
, 11F
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
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
