react 深拷贝和浅拷贝

最新推荐文章于 2025-05-25 23:21:08 发布

qianduan@5

最新推荐文章于 2025-05-25 23:21:08 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react js

本文链接：https://blog.csdn.net/qq_38980408/article/details/116023651

React 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了JavaScript中的深拷贝和浅拷贝概念，特别是它们在React应用中的重要性。浅拷贝会导致原始数据改变，而深拷贝则可以保护源数据不受影响。在React中，当子组件需要修改从父组件接收到的数据时，必须使用深拷贝以避免意外变更。示例中展示了如何使用扩展运算符进行浅拷贝和深拷贝，并强调了在React Hooks中深拷贝的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是深拷贝，什么是浅拷贝？
假设将A复制给B，即B=A，如果B的改变，A也会改变，就是浅拷贝，如果A没有改变，就是深拷贝，（其实深拷贝只针对较为复杂的object类型数据，此时只是拷贝object中的引用地址，而不是堆内存中的值）

对于实现深拷贝的方式：
参考：
js浅拷贝与深拷贝的区别和实现方式

1、扩展运算符实现深拷贝

    let obj={a:1,b:2,c:{name:"world"}}
    let obj1={...obj}
    obj1.a=5;
    console.log(obj)//{ a: 1, b: 2, c: { name: 'world' } }
    console.log(obj1)//{ a: 5, b: 2, c: { name: 'world' } }

此时，扩展运算符拷贝的对象a 是基本数据类型，所以，对obj1的修改不会改变obj

    let obj={a:1,b:2,c:{name:"world"}}
    let obj1={...obj}
    obj1.c.name="hello";
    console.log(obj)//{ a: 1, b: 2, c: { name: 'hello' } }
    console.log(obj1)//{ a: 1, b: 2, c: { name: 'hello' } }

此时，对obj1 的修改会改变obj对象的值，因为obj中的c是一个对象，此时拷贝的对象是引用数据类型c，实际拷贝的是对象的引用地址，所以，属于浅拷贝

react中关于深拷贝和浅拷贝：
在react中，父组件传值给子组件的数据data，在子组件中通过props 直接复制给childData，利用浅拷贝的方式，childData=data，此时childData和data指向同一个地址，在子组件中改变childData，父组件中的data会随着改变。
所以，为了避免修改源数据，可以在子组件中通过深拷贝（childData=[…props.data]）或者在父组件中通过深拷贝的方式，将拷贝的对象传给子组件。

在react hook中使用到深拷贝（ let tempBlockData = […blockData]; ），是将state值重新赋值，再进行操作。之所以使用到深拷贝，是为了保持对新数组的操作不改变 useState定义的state值，所以，为了保持state的blockData不改变，先进行深拷贝，然后再用对应的setState进行更新。