React中处理this.state嵌套对象的最优方式及相关性能疑问

Great question! Let's break down your concerns one by one:

1. 这种方式是否有效？ #

绝对有效！React的setState采用浅合并机制：当你调用setState({ user: { ...user, name } })时，并没有直接修改原有的this.state.user对象，而是通过展开运算符...复制原user对象的所有属性，再替换掉name属性生成一个全新的对象。React会用这个新的user对象替换掉state中的旧user，同时保留state里的其他属性（比如示例中的isLoading），完全不会丢失surname这类未修改的属性，完全符合React状态更新的规则。

2. 这是否属于最佳实践？ #

在绝大多数场景下，这都是推荐的最佳实践。React要求状态更新必须遵循不可变性原则——永远不要直接修改this.state中的对象/数组，而是返回新的引用。展开运算符是ES6提供的简洁、直观的实现不可变更新的方式，相比旧的Object.assign写法（Object.assign({}, user, { name })）更易读、更简洁。

如果你的状态嵌套层级更深（比如user.address.city），手动展开的方式会变得繁琐，这时可以考虑使用immer这类库简化不可变更新，但对于示例中这种浅嵌套的对象，展开运算符完全够用，是标准的最佳实践。

3. 是否会引发性能下降等副作用？ #

一般来说，不会有明显的性能问题。每次onChangeText触发时生成的新user对象非常小，React的diff算法会高效对比新旧状态的引用，只有当引用发生变化时才会触发组件重新渲染——而这正是我们需要的：当用户输入名字时，组件理应重新渲染以展示最新的输入内容。

如果你的组件结构比较复杂，担心频繁的状态更新导致不必要的子组件渲染，可以通过以下方式优化：

• 用React.memo包裹接收user作为props的子组件，让子组件仅在user的属性真正变化时才重新渲染
• 在类组件中使用shouldComponentUpdate生命周期钩子，手动控制渲染时机

但对于普通的表单输入场景，这种级别的性能开销完全可以忽略，属于React的正常使用方式。

反面提醒：千万别这么做 #

不要直接修改原状态对象后再调用setState，比如：

// 错误做法！违反不可变性原则，可能导致React不触发渲染
this.state.user.name = name;
this.setState({ user: this.state.user });

因为你修改的是同一个对象引用，React会认为状态没有变化，可能跳过重新渲染，引发难以排查的bug。

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