Question

我正在阅读反应文档State Updates are Merged，当我们设置这样的对象时，它说了一部分，例如：this.setState({comments})，它完全替代了this.state.comments。

因此，我想知道在事件name上更改user对象的onChangeText的方法是否有效，因为每次onChangeText被替换时，整个对象都会被替换叫。

这是一种好习惯还是有不良表现等副作用？

示例代码：

this.state = {
    user:{
        name: "",
        surname: "",
    },
    isLoading: false
};
/***/
onChangeText={name => this.setState({
  user: {
    ...user,
    name
  }
})}

Answer 1

不变性是一方面，性能是另一点。

不变性意味着您不应使用相同的引用来更新对象，而应使用新的引用进行替换。在React中推荐这样做，因为仅当对象是新对象时才会进行大量更新。如果在状态中重复使用user，更改名称，然后使用状态更新状态，则可能会造成问题。这就是为什么它是一个建议的原因，在大多数情况下，React magic可以在其他无法区分的情况下起作用。所以你必须

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

您可以在the power of not mutating data

中看到此说明。

在这种情况下，性能与您有关，因为它是文本侦听器，没关系，React在虚拟DOM中跟踪UI，因此它只能更新不同的内容。这意味着除了新的或删除的字符外，其他所有内容都将保持不变。

您可以尝试使用clock example in the doc for that。

Answer 2

我推荐set中的lodash/fp： https://gist.github.com/jfmengels/6b973b69c491375117dc#_setpath-value-object

Answer 3

您的示例是完全有效的，只要user变量是最新的。为了确保这一点，您可能需要使用setState的函数arg形式。这将使用this.state的当前值调用您的函数，并将状态设置为返回值。

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

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

3 个答案: