avatar 奔跑的Q丶

主题凑合用，样式即将改版...

踩坑对象解构赋值

对象的解构赋值为日常代码的开发提供了很大的便利，尤其适用 React 开发中对 state 中的引用数据类型 copy 一份再去操作的情况。在使用了如此久的情况下一直没有深究解构赋值或者 Object.assign 的浅拷贝会产生什么影响，于是终于踩到坑了。

由于浅拷贝的原因，上面所说的在 React 中的应用也就存在了问题。来看下面的代码：

1
2
3
4
5
6
7
var deepObj = {
    obj: {a: 1},
    num: 1
}
var copyObj = {...deepObj}
console.log(copyObj === deepObj)    // false
console.log(copyObj.obj === deepObj.obj)    // true

从代码中可清晰的发现浅拷贝仅影响被拷贝的第一层结构，而内部数据还是保持了与原数据的引用关系，即此时若操作 copyObj.obj 则会引发 deepObj.obj 数据的同步变更，这显然不是我们想要的结果。

因此，一定要注意在浅拷贝的时候如果要操作内部数据的话则需要再次对引用类型进行拷贝，或者一开始就使用 JSON.parse(JSON.stringify(deepObj)) 这种小技巧对原数据进行深拷贝，或是干脆使用 Immutable 来避免可变数据。

JavaScriptReact