今天遇到一个问题,我更新了数组里面的数据,但是页面并没有检测到数组里面数据的改变,而导致这个原因是,就是浅拷贝和深拷贝的问题。
当我们针对数组对象嵌套比较深时,采用浅拷贝的方式就会出现上述情况。一般也是针对数据结构毕竟深时,采用深拷贝

深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。
如何判断浅拷贝和深拷贝在于:
假设B复制了A,修改A的时候,看B是否发生变化:
如果B跟着也变了,说明是浅拷贝,我们只是使用的他的引用而不是一个全新的数据,因为用的同一个数据!(他们在内存中实际上是同一个地址)
如果B没有改变,说明是深拷贝,因为B是一个全新的数据有,在内存中自己的地址!
具体深拷贝三种方式可以参考一下其他博主的写法,我这里分享一个我自己的写法
下面举个针对多层嵌套数组对象的栗子

           const arr = [
			 [{a:'1'},{b:'2'},{c:'3'}],
			 [{a:'1'},{b:'2'},{c:'3'}],
			 [{a:'1'},{b:'2'},{c:'3'}]
			arr.map(data =>{
			 data.map(content => {
				content.a = '33'
		    }) //浅拷贝的方式对arr里面的数据赋值
			const res = arr.map(data =>{
				return data.map(content => {
					return {a:'2222',...content}
			 }) //深拷贝的方式对arr里面的数据赋值
			 arr = res;
                    今天遇到一个问题,我更新了数组里面的数据,但是页面并没有检测到页面的改变。而导致这个原因是,就是浅拷贝和深拷贝的问题。当我们针对数组对象嵌套比较深时,采用浅拷贝的方式就会出现上述情况。一般也是针对数据结构毕竟深时,采用深拷贝下面举个针对多层嵌套数组对象的栗子           const arr = [			 [{a:'1'},{b:'2'},{c:'3'}],			 [{a:'1'},{b:'2'},{c:'3'}],			 [{a:'1'},{b:'2'},{c:'3'}]			]		
				
react hook中使用到深拷贝( let tempBlockData = […blockData]; ),是将state值重新赋值,再进行操作。之所以使用到深拷贝,是为了解决useState定义的state值无法直接更新和操作,所以,为了直接操作state的blockData,先进行深拷贝,然后再用对应的setState进行更新。 什么是深拷贝,什么是浅拷贝? 假设将A复制给B,即B=A,如果B的改变,A也会改变,就是浅拷贝,如果A没有改变,就是深拷贝,(其实深拷贝只针对较为复杂的object类型数据
最近发现的一个bug让我从react框架角度重新复习了一遍浅拷贝深拷贝浅拷贝,就是两个变量都是指向一个地址,改变了一个变量,那另一个变量也随之改变。这就是浅拷贝带来的副作用,两个变量会相互影响到,因为它们指向同一个地址。 深拷贝,就是互相独立,指向的是不同的地址,一个变量改变了,另一个变量不会被影响到。 react角度: const obj = { a: { b: 1 } }; const newObj = deepClone(obj); console.log(newObj); // { a: { b: 1 } } console.log(obj === newObj); // false 注意:使用 `lodash` 的深拷贝方法可能会影响性能。如果对象的层级比较浅,可以使用 `Object.assign()` 或展开运算符来实现浅拷贝。但如果对象包含嵌套对象或数组,就需要使用深拷贝