React.js中检测复杂嵌套对象状态变更的最简方法是什么

首先明确核心前提：判断对象是否存在变更，必须持有变更前的基准快照，原仅传入单个对象的函数结构无法完成比对，需补充旧对象作为入参。

方案1：纯原生无依赖实现（适配你当前的对象结构） #

你的示例对象仅包含字符串、数字、普通嵌套对象/数组，全部支持JSON序列化，直接用序列化比对是成本最低的方案。如果是React state更新场景，旧的state值就是天然的基准快照，不需要额外手动存储副本（前提是你遵循React不可变更新规则修改状态）：

1. 比对前先做快速引用判断，避免无意义的序列化开销
2. 最终通过序列化结果的差异判断是否有属性变更

// 比对时传入旧快照/旧state、最新的对象
function isObjectUpdated(oldObj, newObj) {
  // 引用完全一致说明没有任何修改，直接返回未变更
  if (oldObj === newObj) return false
  // 序列化结果不一致即代表有属性变更
  return JSON.stringify(oldObj) !== JSON.stringify(newObj)
}

注意：该方案仅适用于无函数、undefined、Symbol、循环引用的纯数据对象；另外如果存在「键顺序变更但实际键值对完全一致」的情况，会被误判为变更，这种场景请换用深比对方案。

方案2：复杂场景通用实现 #

如果后续你的嵌套结构会包含上述特殊类型，或存在键顺序乱序的情况，不需要自己手写递归深遍历，直接使用成熟的深比对工具即可：

• 传入旧对象、新对象两个参数即可直接返回比对结果，适配所有可深遍历的JS对象类型
• 该逻辑可直接复用在React.memo的自定义对比参数、useEffect的自定义依赖比对等React场景中

性能优化注意点 #

• 优先做引用相等判断：只要新旧对象是同一个内存引用，直接判定未变更，跳过后续深比对步骤，大幅提升性能
• 快照要存不可变副本：如果不是React state场景，存储基准快照时要做深拷贝，避免原对象被修改后快照同步变化，失去比对基准

内容的提问来源于stack exchange，提问作者Nilupul Heshan Kodikara