为何打印MobX Observable会改变组件行为？如何修复？

问题场景 #

以下是简化后的代码：

组件代码 #

const TimelineTable = observer(() => {
  const [timeline] = useState(() => getTimeline())

  console.log(timeline.pointsInTime.length)
  return (
    <DataTable
      records={timeline.pointsInTime}
      columns={...}
    />
  )
})

export default TimelineTable

Timeline类代码 #

export class Timeline {
  pointsInTime: PointInTime[] = []

  constructor() {
    makeAutoObservable(this)
  }

  addPointInTime = (pointInTimeToWrite: PointInTimeWriteOnly) => {
    PointInTimeAPI.post(pointInTimeToWrite)
      .then(
        action("postPointInTimeSuccess", pointInTime => {
          this.pointsInTime.push(pointInTime)
        }))
  }

  deletePointInTime = (id: number) => {
    PointInTimeAPI.delete(id)
      .then(
        action("deletePointInTimeSuccess", () => {
          const pointInTimeIndex = this.findPointInTimelineIndex(id)
          this.pointsInTime.splice(pointInTimeIndex, 1)
        }))
  }
  ...
}

原本代码运行正常，修改pointsInTime数组时表格会更新，但移除console.log(timeline.pointsInTime.length)后，TimelineTable不再响应数组变化。

原因分析 #

MobX的observer组件依赖渲染阶段访问的Observable属性来建立订阅关系：

• 保留console.log(timeline.pointsInTime.length)时，渲染过程中主动访问了pointsInTime这个Observable数组的length属性，MobX会自动将TimelineTable订阅到该数组的变化上，数组更新时组件会重新渲染。
• 移除该语句后，组件仅将pointsInTime传递给DataTable，但如果DataTable未被observer包裹，或其内部未访问数组的Observable属性（如遍历元素、读取length），MobX就无法检测到TimelineTable对pointsInTime的依赖，因此数组变化时不会触发组件更新。

解决方案 #

方法一：在组件渲染阶段主动访问Observable数组属性 #

无需console.log，只需在渲染过程中明确访问数组的Observable属性（如length），让MobX收集依赖：

const TimelineTable = observer(() => {
  const [timeline] = useState(() => getTimeline())
  
  // 主动访问length，触发MobX的依赖收集
  timeline.pointsInTime.length;
  
  return (
    <DataTable
      records={timeline.pointsInTime}
      columns={...}
    />
  )
})

方法二：将子组件DataTable用observer包裹 #

如果DataTable是自定义组件，给它加上observer装饰器，这样它内部访问records数组时会自行订阅变化，触发自身更新：

const DataTable = observer(({ records, columns }) => {
  // 组件内部逻辑，如遍历records渲染行
  return <table>...</table>
})

方法三：使用MobX工具显式追踪依赖（可选） #

如果场景复杂，可使用useLocalObservable或autorun手动管理订阅，但前两种方法更简洁高效。

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