MobX替换Observable对象数据的性能问题及优化方案问询

我需要在从Socket获取新数据快照时替换Observable对象中的数据，代码示例如下：

class Store { 
  @observable data = { foo: 'bar' } 
  replaceFromDump(newData) { 
    this.data = newData 
  } 
} 
const store = new Store() 
store.replaceFromDump({ foo: 'bar' }) 
// { foo: 'bar' } 可能是体积庞大的JSON数据

但我发现当数据对象规模扩大时会出现性能问题，推测原因是即使部分属性/值完全相同，MobX仍会触发所有响应。请问是否存在更“智能”的处理方式？

你遇到的这个问题非常典型——直接替换整个observable对象会让MobX认为整个数据结构都发生了变化，进而触发所有依赖该对象的响应，哪怕大部分属性值都没改动。下面给你几个经过实践验证的、更高效的处理方案：

1. 手动浅对比，只更新变化的属性 #

最直观的优化就是先对比新旧数据的差异，只对真正改变的属性执行更新操作。这样MobX只会针对修改的属性触发响应，避免不必要的重渲染或计算。

示例代码：

class Store { 
  @observable data = { foo: 'bar', baz: 'qux' } 

  replaceFromDump(newData) {
    // 更新新增或修改的属性
    Object.keys(newData).forEach(key => {
      // 简单的浅对比，适合基础类型值
      if (this.data[key] !== newData[key]) {
        this.data[key] = newData[key]
      }
    })

    // 可选：移除旧数据中存在但新数据没有的属性
    Object.keys(this.data).forEach(key => {
      if (!(key in newData)) {
        delete this.data[key]
      }
    })
  } 
}

如果你的属性值是引用类型（比如嵌套对象），浅对比就不够用了，需要用到下面的深度对比方案。

2. 使用MobX的extendObservable合并数据 #

MobX内置的extendObservable方法可以帮你智能合并新旧数据，它只会对新增或修改的属性进行Observable化和更新，不会触发无关属性的响应。不过它不会自动移除旧属性，需要的话得手动处理。

示例代码：

import { extendObservable } from "mobx"

class Store { 
  @observable data = { foo: 'bar' } 

  replaceFromDump(newData) {
    // 合并新数据，只更新变化的部分
    extendObservable(this.data, newData)

    // 手动移除不再存在的属性（按需选择）
    Object.keys(this.data).forEach(key => {
      if (!(key in newData)) {
        delete this.data[key]
      }
    })
  } 
}

3. 改用observable.map替代普通Observable对象 #

如果你的数据是键值对结构，直接用observable.map会更高效。它的replace方法内部会自动对比新旧数据，只增删改差异部分，完全不需要你手动处理对比逻辑。

示例代码：

import { observable } from "mobx"

class Store { 
  // 初始化为observable.map
  @observable data = observable.map({ foo: 'bar' }) 

  replaceFromDump(newData) {
    // 智能替换，只更新变化的键值对
    this.data.replace(newData)
  } 
}

这个方案是处理大规模键值对数据的最优解，observable.map的replace方法经过MobX内部优化，性能表现非常好。

4. 深度对比+局部更新（针对嵌套对象） #

如果你的数据是深层嵌套的复杂结构，上面的浅处理方案就失效了。这时候可以用深度对比工具（比如手写递归对比，或者lodash的isEqual）定位到真正变化的嵌套节点，只更新那些节点。

示例代码（结合lodash的isEqual）：

import { isEqual } from "lodash"

class Store { 
  @observable data = { foo: { nested: 'original' } } 

  replaceFromDump(newData) {
    const updateNested = (oldObj, newObj) => {
      Object.keys(newObj).forEach(key => {
        const oldValue = oldObj[key]
        const newValue = newObj[key]

        if (typeof newValue === 'object' && newValue !== null) {
          // 递归处理嵌套对象
          if (!oldValue) oldObj[key] = {}
          updateNested(oldValue, newValue)
        } else if (!isEqual(oldValue, newValue)) {
          // 基础类型值不同才更新
          oldObj[key] = newValue
        }
      })

      // 移除旧数据中不存在的属性
      Object.keys(oldObj).forEach(key => {
        if (!(key in newObj)) {
          delete oldObj[key]
        }
      })
    }

    updateNested(this.data, newData)
  } 
}

注意：深度对比本身会有一定的性能开销，所以要根据你的数据规模和变化频率权衡使用，适合嵌套深但变化少的场景。

总结一下，优先推荐observable.map（键值对场景）或手动浅对比更新（简单对象场景），这两个方案在大多数情况下都能解决性能问题。如果是复杂嵌套结构，再考虑深度对比的方案。

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