useState 使用问题

Question

新手提问

1. const [selectList, setSelectList] = useState(new Set());
2.  useEffect(() => {
3.     console.log(selectList, selectList.size)
4.   }, [selectList]);


----------
正确写法
1. <Checkbox  onChange={(e) => {
2.     if (e.target.checked) {
3.       selectList?.add(item.id)
4.     } else {
5.       selectList?.delete(item.id)
6.     }
7.     setSelectList(
8.       new Set(selectList)
9.     )
10.   }} />

----------
错误写法：
setSelectList( selectList )

第7-9行如果用错误写法更新，useEffect检测不到selectList 更新，请问下这个是什么原因，或者能指明下源码位置，我可以自己看下，多谢

Answer 1

可以这么理解：
setSelectList(x)等价于selectList = x
你的selectList是一个Set，是引用类型，引用类型赋值是赋的引用地址，所以setSelectList(selectList)就是相当于selectList的引用又重新赋给selectList变量，引用地址没变，所以useEffect不会触发

而setSelectList(new Set(selectList))，是新生成了一个Set，新的set有新的引用地址，useEffect发现两者不相等了就会触发