React Hooks中直接修改嵌套对象的弊端及相关疑问

示例代码 #

import { useState } from "react";

function App() {
  const [form, setForm] = useState({
    usename: ``,
    password: ``,
    avatar: { id: 0, url: ``, deep: { id: 0 } },
  });
  return (
    <div>
      <h1>ID:{form.avatar.deep.id}</h1>
      <h2
        onClick={() => {
          form.avatar.deep.id += 1;
          setForm({ ...form });
        }}
      >
        Change-ID
      </h2>
    </div>
  );
}

export default App;

问题与解答 #

1. 为何该代码可以更新UI？

虽然直接修改了嵌套的form.avatar.deep.id，但最后调用setForm({ ...form })时，通过扩展运算符创建了新的顶层对象。React判断是否触发重新渲染的核心逻辑是比较新老状态的引用是否不同，这里顶层的form对象是全新的引用，所以React会触发组件重新渲染，UI也随之更新。

2. form.avatar.deep.id+=1;setForm({ ...form });存在哪些弊端？

• 违反了React状态不可变的设计原则，直接修改原状态的嵌套属性，会让状态变化的追踪变得混乱。
• 仅做了顶层对象的浅拷贝，嵌套的avatar、deep还是原引用，若有其他逻辑依赖这些嵌套对象的引用（比如useEffect的依赖数组、React.memo子组件的props），会因为引用未变而无法感知到内部属性的更新，导致优化逻辑失效。
• 代码可读性差，后续维护时容易忽略这里直接修改了原状态，增加bug排查的难度。

3. 直接修改嵌套对象的属性有哪些缺点？

• 破坏状态不可变性：React状态设计为不可变数据，直接修改会打破这一规则，无法通过引用变化快速判断状态是否更新。
• 优化机制失效：React.memo、useMemo、useEffect等依赖引用比较的优化逻辑，会因为嵌套对象引用未变而无法正确触发，导致组件不更新或意外更新。
• 调试难度提升：无法借助调试工具进行状态的时间旅行调试，因为原状态被直接覆盖，没有保留历史快照。
• 引发隐蔽bug：多个组件共享同一状态引用时，一个组件修改嵌套属性会直接影响其他组件的状态，导致不可预测的UI表现。

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