作者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/cn.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