React之浅拷贝与深拷贝

时间:2022-10-27 19:56:43

       最近发现的一个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 })