这里主要用
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
})
}
useEffect(() => {
console.warn(filterList) // 触发setFilterList后不会有反应
},[filterList])
也就是说，更新复杂state的时候必须传给它一个全新的对象，而不是复制了它引用地址再修改的对象。
两种解决办法：
- 结合展开运算符返回一个新对象，后面这个链接也有和我类似的示例：
setState的函数式更新形式
setFilterList(prevList => {
prevList[i].checked = !prevList[i].checked // 这里数据引用地址的值同样被修改
return [...prevList] // 数据最外层的引用地址不同即可触发组件更新
})
- 深拷贝对象，用全新的副本更新数据。
一般情况像这样非单个层级的对象，比如我的filterList是对象数组，用slice()方法并不能实现里面每个对象的深拷贝。实现真正的深拷贝我们可以封装遍历方法或者借助lodash.cloneDeep那些库来实现。但组件state的更新我们本来就要修改原来的数据，复杂对象内层数据同时被改变在这种情况不属于bug。只要最外层引用地址不同，能触发组件更新就可以了。
setFilterList(prevList => {
const list = prevList.slice() // 数组里面的每个对象没有实现深拷贝但对我们没有影响
list[i].checked = !list[i].checked
return list // list指向一个全新的地址
})
额外：
const arrCopy = sourceArr.slice() 深拷贝简单数组
const objCopy = Object.assign({}, sourceObj) 深拷贝简单Object
注意：当对象中只有一级属性，没有二级属性的时候，Object.assign()方法为深拷贝，但是对象中有对象的时候，此方法在二级属性以后就是浅拷贝。
再引申一下，一些所谓不会改变原数组的方法，比如
map、forEach。针对的是简单数组(只有一层数据)，如果是非单层的比如对象数组，在方法内修改了对象内部的数据，原数组的相应的数据也会改变。另外map和forEach的区别就是forEach没有返回值(undefined)。所以基本功一定要扎实，我就是吃了没有打好基础的亏😂
在这种情况如何不改变原数组引用地址内的数据，那就是在修改的时候新开辟一个引用地址，是不是和我们更新复杂类型state很像😄？
let arr = [{ name: 'Anna', age: 16 }, { name: 'James', age: 18 }]
let newArr = array.map((item) => {
// item.like = 'eat'; // 像这样会改变原数组内部数据
const obj = { ...item, like:'eat'};
return obj;
})
console.log(arr); // [{ name: 'Anna', age: 16},{ name: 'James', age: 18}]
console.log(newArr);//[{ name: 'Anna', age: 16,like: "eat"},{ name: 'James', age: 18,like: "eat"}]
当然我们也可以直接整上lodash
对象数组深拷贝总结示例 ：
const _ = require('lodash');
let arr = [{ name: 'Anna', age: 16 }, { name: 'James', age: 18 }]
// 方法一
let arr1 = arr.map(o => Object.assign({}, o));
// 方法二
let arr2 = arr.map(o => ({...o}));
// 方法三（推荐）
let arr3 = _.cloneDeep(arr);
网友评论