能否通过解构赋值复制React state？以下两种写法作用是否相同？

如果我需要复制一份state以便在函数中进行修改操作，请问以下两种写法的作用是否一致？

const { mana } = this.state;
const mana = { ...this.state.mana };

这两种写法的作用完全不一致，核心差异如下：

• 第一种写法const { mana } = this.state;
  属于ES6对象解构赋值，本质是把this.state中mana的引用直接赋值给新变量mana。如果mana是引用类型（对象、数组等），你修改这个新mana的属性时，会直接修改原this.state.mana的内容，完全达不到「复制后修改不污染原state」的需求。只有当mana是基本数据类型（数字、字符串、布尔值等）时，因为基本类型是按值赋值，修改才不会影响原state。
• 第二种写法const mana = { ...this.state.mana };
  是通过扩展运算符对this.state.mana做浅拷贝，会创建一个全新的独立对象，新对象的第一层属性和原mana的第一层属性值完全相同，但两个对象本身的内存地址不同。此时修改新mana的第一层属性，不会影响原this.state中的内容，符合你要复制修改的需求。要注意的是这种拷贝只作用在第一层，如果mana内部还有嵌套的引用类型，嵌套层级的内容依旧共享引用，修改嵌套内容还是会影响原state。

如果你需要完全拷贝嵌套层级的对象，可以根据业务场景选择深拷贝方案，比如JSON.parse(JSON.stringify())（注意不能处理函数、Symbol、循环引用等场景）或者手写深拷贝逻辑。

内容的提问来源于stack exchange，提问作者Taouen