Javascript 使用此.state中的嵌套对象的最佳方法是什么？

我正在阅读react文档，当我们设置这样的对象时，其中有一部分是这样写的：

this.setState（{comments}）

它完全替换了

this.state.comments

因此，我想知道在事件

onChangeText

上更改

user

对象的

name

的方法是否有效，因为每次调用

onChangeText

时都会替换它的整个对象

这是一个好的做法，还是有像糟糕的表现这样的副作用

示例代码：

this.state={
用户：{
姓名：“，
姓：“，
},
孤岛加载：false
};
/***/
onChangeText={name=>this.setState({
用户：{
…用户，
名称
}
})}

可变性是一个方面，性能是另一个方面

不可变意味着不应该使用相同的引用来更新对象，而应该使用新的引用来替换。在React中，建议这样做，因为大量更新仅在对象是新对象时发生。如果在状态中重复使用

用户

，更改名称，然后使用名称更新状态，则可能会产生问题。这就是为什么这是一个建议，在大多数情况下，React magic会对其他人起作用，但它无法区分两者之间的区别。所以你必须

const copy = Object.assign({}, this.state.user);

你可以在这里看到这个解释

本例中的性能与您有关，因为React是一个文本侦听器，不管它是什么，它都会跟踪虚拟DOM中的UI，因此它只能更新不同的内容。这意味着除了新的或删除的字符外，所有内容都将保持不变

---

您可以试试。

我推荐

set

来自

lodash/fp

：

---

如果

用户

变量是最新的，则您的示例完全有效。 为了确保这一点，您可能需要使用

setState

的函数arg形式。这将使用当前值

This.state

调用函数，并将state设置为返回值

onChangeText={
  name => 
    this.setState(
      ({ user }) => ({
        user: { ...user, name }
      })
    )
}

---

看一看：我明白，但我不认为每次调用

onChangeText

时都替换整个对象是一个好做法。您需要替换顶级对象，否则React将无法检测到更改并重新渲染。这是免疫兼容性和变化检测的前提。使用该代码，您可以将

user

对象替换为新对象，但保留对其键值的相同引用，只保留更改的名称。实际上，我考虑的是PureComponent/Memo属性检查。我认为不管怎样，

setState

都会触发重新渲染。但是，如果将这些状态值传递给连接到Redux的子组件，或者是PureComponents，或者是memoned，那么根据它们在组件道具中的位置，改变对象可能意味着不总是在应该的时候重新渲染。