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 })