React之浅拷贝与深拷贝

Posted yezi-dream

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 }) 

 

以上是关于React之浅拷贝与深拷贝的主要内容,如果未能解决你的问题,请参考以下文章

小tips:JS之浅拷贝与深拷贝

Java之浅拷贝与深拷贝

lua踩坑之浅拷贝与深拷贝

lua踩坑系列之浅拷贝与深拷贝

react中修改参数值没有重新渲染问题-关于浅拷贝与深拷贝

Python模块-copy