在react中我们有的时候会遇到这样的问题,当我们在使用一个数组数据的时候,当这个数组数据嵌套特别深时,比如树形结构数据,我们在修改了一个比较深的那一层的值时,会发现render没有重新执行,这个就是嵌套太深,我们修改的时候没有进行深拷贝,react没有监听到数据发生变化,所以这个时候就需要深拷贝。
我们看下以下代码:
const arr1 = [1,2,3,4,5];
const arr2 = [...arr1];
console.log('result',arr2);
console.log('111111',arr1 === arr2); //输出true
const arr3 = [[1,2],2,2,3,4,5];
const arr4 = [...arr3];
console.log('result',arr4);
console.log('111111',arr3[0] === arr4[0]); //输出false
我们会发现当正常的数据结构我们直接重新创建一个数组或者对象然后使用剩余运算符将之前的数据解构出来就完成了深拷贝,但是当数组或者对象里面存在嵌套的时候就不行了。所以这个时候我们就需要使用递归的方法,去完成相关嵌套内容的深拷贝。如下:
/**
* 传入一个数据,进行深拷贝,返回深拷贝后的结果
* @param value 传入参数
*/
const deepClone = (value: any) => {
if(Array.isArray(value)){ //判断是否是数组
let cloneArr:any = []; //定义深拷贝后的数组
for(let i = 0; i < value.length; i++){
cloneArr.push(deepClone(value[i])); // cloneArr[i] = deepClone(value[i]);
}
return cloneArr;
}else if(value !== null && typeof value === 'object'){ //判断是否是对象
let obj:any = {};
for(let key in value){
obj[key] = deepClone(value[key]);
}
return obj;
}
return value;
}
const arr1 = [[1,2],2,3];
const arr2 = deepClone(arr1);
const obj1 = {a:1,b:{a:1,b:2},c:[1,2]};
const obj2 = deepClone(obj1);
console.log('arr2--->',arr2);
console.log('result',arr1[0] === arr2[0]);
console.log('obj2--->',obj2);
console.log('result',obj2.c === obj1.c);


1102

被折叠的 条评论
为什么被折叠?



