状态应该嵌套还是扁平化？

Question

例如，

constructor(props) {
  super(props);
  this.state = {
    interactions: {
      liked: [],
      saved: [],
      receivedLikeRecently: null
  }
}

我正在努力理解不可变性，所以如果我现在想要更新receivedLikeRecently为true，我需要这样做：

this.setState({
  interactions: {
    receivedLikeRecently: true
  }
});

其他值该怎么办？我也需要把它们包含进来吗？

根据文档，setState执行的是浅层合并，所以我认为其他嵌套属性不会被复制过来，对吗？或者我有什么误解吗？

谢谢

- 568798ausdf 7fa6tuysihdfk

---

可能是重复的问题：this.setState不像我期望的那样合并状态。 - jakeehoffmann

好的，我只是想理解一下，但我猜这个问题以前已经被问过了。那我应该删除这个帖子吗？ - 568798ausdf 7fa6tuysihdfk

Answer 1

为了避免深度合并，您应该保持状态的平面化，这必须手动完成，如果频繁执行还会导致性能下降，而且非常麻烦。

Component.setState 使用简单的 === 来测试属性是否已更改，这将导致它始终更新状态对象的对象值属性。

- Pedro Castilho

Answer 2

你是正确的，嵌套状态更新需要更复杂的合并。

有一个状态规范化的概念，适用于Redux，但也适用于React状态。 http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html 思考一下，将状态视为关系数据存储以便更容易地处理它。

- Tomáš Hübelbauer

---

谢谢。那么对于Redux，我也应该牢记这一点吗？如果我正确理解了assign（或spread运算符），那么只要我使用其中任何一个，我就可以返回具有任何深度更改的新对象，对吗？我还没有接触过Redux，如果听起来很愚蠢，请原谅..只是在短时间内阅读到的内容。 - 568798ausdf 7fa6tuysihdfk

使用扩展运算符非常简单和美观，可以返回状态的浅拷贝。对于嵌套状态，像Normalizr这样的库很有帮助，但不要急于在转向Redux之前解决React问题。 - Tomáš Hübelbauer