React之浅拷贝与深拷贝

  最近发现的一个bug让我从react框架角度重新复习了一遍浅拷贝与深拷贝。

浅拷贝,就是两个变量都是指向一个地址,改变了一个变量,那另一个变量也随之改变。这就是浅拷贝带来的副作用,两个变量会相互影响到,因为它们指向同一个地址。

深拷贝,就是互相独立,指向的是不同的地址,一个变量改变了,另一个变量不会被影响到。

react角度:

父组件传给子组件的attr,在子组件通过props.attr直接复制给childAttr,这就是浅拷贝,父组件的attr与子组件的childAttr指向同一个地址,在子组件中改变childAttr,那么父组件中的attr也会随之改变。这时再将attr传入这个子组件,attr的值就是被改变之后的值。所以要想数据源头attr不会被改变,这时就需要在父组件中深拷贝attr,然后再一一传入子组件;或者在子组件中将props.attr深拷贝给childAttr。

对于数组的浅拷贝与深拷贝的数据格式:

浅拷贝: newArray = array

深拷贝: newArray = _.map(array,  (a) => { return a })

点赞
收藏

评论区

加载中...

相关推荐

ES6的解构赋值是深拷贝or浅拷贝?

面试时候有面试官问到ES6的解构赋值是深拷贝还是浅拷贝?,这里做一个总结.ES6的解构赋值,大家应该都清楚,就是可以快速取出数组或者对象中的值;我们先来看一个使用案例:更多的解构赋值知识可以查看:https://es6.ruanyifeng.com/docs/destructuring那么,ES6的解构赋值到底是深拷贝还是浅拷贝呢?我们先来看一下深拷贝和浅

java 复制Map对象(深拷贝与浅拷贝)

java复制Map对象(深拷贝与浅拷贝)CreationTime2018年6月4日10点00分Author:Marydon1.深拷贝与浅拷贝  浅拷贝:只复制对象的引用,两个引用仍然指向同一个对象

仔细看看,会有收获。js深浅拷贝

好好理解深浅拷贝和赋值(针对引用类型)赋值:两个对象指向同一内存地址。结果,无论是修改基本类型还是引用类型,两个对象的值都会改变。浅拷贝:两个对象指向不同的内存地址,但是他们中的引用类型数据指向同一内存地址。结果,修改引用类型,两个对象的值都会改变;修改基本类型,互不影响。深拷贝:两个对象指向不同的内存地址,他们中的引用类型也指向不同的内存地址。结果,均互不

也谈JavaScript浅拷贝和深拷贝

网上关于这个话题,讨论有很多了,根据各路情况我自己整理了一下,最后还是能接近完美的实现深拷贝,欢迎大家讨论。javascript中的对象是引用类型,在复制对象的时候就要考虑是用浅拷贝还是用深拷贝。直接赋值对象是引用类型,如果直接赋值给另外一个对象,那么只是赋值一个引用,实际上两个变量指向的同一个数据对象,如果其中一个对象的属性变更,那么另外一个也会变更。示

带你了解JS对象的浅拷贝和深拷贝

以下主要介绍了正常情况下的拷贝、浅拷贝、深拷贝三种方式的区别。正常拷贝:复制一个对象,它们的内存地址是相同的浅拷贝:拷贝对象的第一层属性深拷贝:拷贝对象多层的属性正常拷贝假设我们要复制一个对象,如果不对其进行深拷贝,那么改变其中一个对象后,另外一个对象也会

python 赋值引用 浅拷贝 深拷贝

一、基础概念1、直接赋值:其实就是对象的引用(别名)。2、浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象。3、深拷贝(deepcopy):copy模块的deepcopy方法,完全拷贝了父对象及其子对象。二、代码示例importcopya1,2,3,4,'a','b'原始对象ba