React useState更新class实例状态不触发UI 需复制对象才生效

三种写法失效/存在缺陷的核心原因和React状态更新机制、类的特性直接相关：

• 直接修改原实例push元素后返回：React对状态做浅引用比较判断是否需要重渲染，新旧状态指向同一个对象时，React会判定状态无变化，直接跳过UI更新，这种写法完全违反React状态不可变的核心规则。
• 展开实例返回普通对象的写法：对象展开运算符只会复制源对象自身的可枚举属性，返回结果是普通Object类型，不再是Form类的实例，原类原型链上的方法、自身的不可枚举属性都会全部丢失，既会导致后续调用类方法报错，也不符合你使用类实例作为状态的初始预期。
• JSON序列化深拷贝的写法：虽然能触发更新，但缺陷非常明显：一是性能差，每次更新都要全量遍历序列化整个对象；二是会破坏特殊类型的值，类方法、函数、Symbol、undefined、Date、正则、循环引用等内容在序列化过程中会丢失或出错，仅适用于纯JSON数据的简单场景，完全不适合类实例状态。

方案1：在Form类内部封装更新方法（最推荐） #

把状态更新的逻辑封装到类自身，外部调用不需要关心内部拷贝逻辑，符合面向对象的封装原则，后续维护成本最低：

class Form {
  constructor(initialValue = {}) {
    this.elements = initialValue.elements || [];
    // 其余Form类自身的属性初始化逻辑
  }

  // 定义追加元素的方法，返回全新的Form实例
  appendElement(newElement) {
    return new Form({
      // 复用当前实例的所有属性
      ...this,
      // 替换elements为追加后的新数组
      elements: [...this.elements, newElement]
    })
  }
}

更新状态时只需要极简的调用：

setForm(currentForm => currentForm.appendElement(element))

所有修改逻辑收敛在类内部，后续调整Form数据结构时，不需要修改组件里的状态更新代码。

方案2：更新时构造新实例，仅复制修改路径上的属性 #

如果不方便修改Form类的源码，更新状态时直接传入新的Form实例即可，完全不需要全量深拷贝：

setForm(currentForm => {
  return new Form({
    // 未修改的属性直接复用原实例的值，不需要额外拷贝
    ...currentForm,
    // 仅对需要修改的elements属性创建新数组
    elements: [...currentForm.elements, element]
  })
})

React的不可变更新从来不需要全量深拷贝整个对象，只需要满足两个条件即可：

• 顶层状态的引用是新的（返回新的Form实例自然满足这个要求）
• 被修改的嵌套属性对应的引用是新的（这里elements是新创建的数组，满足要求）
  其余未修改的属性完全可以复用原来的引用，不会有任何问题，性能远高于全量深拷贝，也不会丢失类实例的方法。

• 永远不要直接修改原状态对象的属性后返回原对象，React的浅比较机制无法识别这种修改，必然会导致更新不触发。
• 不要把类实例展开为普通对象作为新状态，会丢失原型链，后续调用类的方法会直接报错。
• 非必要不要使用JSON.parse(JSON.stringify())做状态拷贝，除了性能问题，还会破坏特殊类型的值，存在隐性bug。

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