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