react usestate 更新_React Hook useState复杂数据更新机制踩坑

这里主要用Hook来讲述和做示范(大部分人应该已经全面拥抱Hook了吧)。class组件用setState更新state中某个复杂数据类型，理论上也是差不多的。

很多时候我们某个state数据不是简单数据类型(值类型)，而是数组、对象之类(引用类型)。而React组件的更新机制对state只进行浅对比，也就是更新某个复杂类型数据时只要它的引用地址没变，那就不会重新渲染组件。

因此，尤其当被更新的引用类型数据需要依赖之前的数据，我们可能会疏忽而犯下以下低级错误(真的不是我本人😂)：

// 简单示范，看个意思就好，就不把完整组件放出来了

const [filterList, setFilterList] = useState([])

const changeFilter = (key, val, mulit, i) => { // 关键值

setFilterList(prevList => {

prevList[i].checked = !prevList[i].checked

console.warn(prevList === filterList) // true

return prevList // prevList和filterList指向同一个地址

})

// 或者

setFilterList(prevList => {

let list = prevList // 仍然是同一个引用地址

list[i].checked = !list[i].checked

return prevList

})

}