何时在React中深度克隆对象

Question

最近我通过艰难而漫长的方式学习了对象的浅克隆和深克隆以及在进行此类操作后浅克隆对象之间存在的关系，就像这样：

this.state = {
  obj: props.obj,
}

let { obj } = this.state

obj.x = event.target.value

if (obj !== this.props.obj) {
  this.setState({obj})
}

将props.obj的深度克隆分配给state.obj后，它就能正常工作。我开始四处寻找，并发现我的代码中存在这种模式：

let obj = this.state.obj
obj.x = 'test'
this.setState({obj});

我之前一直以为我的代码是正常工作的，但实际上我一直在直接修改this.state，这并没有造成问题，因为我几乎总是紧接着使用setState进行更改。我遵循这种模式以避免直接修改状态。

1. 在不直接更改状态对象的情况下，最好的修改状态的方法是什么？
2. 何时深度克隆对象有规则/指南/最佳实践吗？
3. 始终使用深度克隆来避免直接更改对象是否有任何缺点？

也许这些问题可以归结为一个问题，但我不知道该如何表达。

- Donovan Hiland

---

这里有一个很好的解释：为什么我不能直接修改组件的状态？ - pumbo

Answer 1

我不是100%确定

this.setState({
  obj: { ...this.state.obj,
    x: event.target.value
  }
});

- Mandeep