如何追踪react-monaco-editor中触发componentDidUpdate的props/state变化？

我正在用react-monaco-editor开发网页，页面首次加载后componentDidUpdate被频繁触发，不符合预期。

我先在componentDidUpdate中添加日志排查：

componentDidUpdate(prevProps, prevState) {
  console.log("debugha, componentDidUpdate")
  for (var key in prevProps) {
    if (prevProps.hasOwnProperty(key)) {
        if (prevProps[key] !== this.props[key]) {
          console.log("debugha, componentDidUpdate, key", key, "prevProps[key]", prevProps[key]);
          console.log("debugha, componentDidUpdate, key", key, "this.props[key]", this.props[key])
        }
    }
  }

  for (var key in prevState) {
    if (prevState.hasOwnProperty(key)) {
        if (prevState[key] !== this.state[key]) {
          console.log("debugha, componentDidUpdate, key", key, "prevState[key]", prevState[key]);
          console.log("debugha, componentDidUpdate, key", key, "this.state[key]", this.state[key])
        }
    }
  }
  // ...其他代码
}

但日志显示没有发现props或state存在差异。

随后我调整日志逻辑，检查toString方法：

componentDidUpdate(prevProps, prevState) {
  console.log("debugha, componentDidUpdate")
  for (var key in prevProps) {
    if (prevProps.hasOwnProperty(key)) {
      if (prevProps[key] !== this.props[key]) {
          console.log("debugha, componentDidUpdate, key", key, "prevProps[key]", prevProps[key]);
          console.log("debugha, componentDidUpdate, key", key, "this.props[key]", this.props[key])
        }
    }
  }

  for (var key in prevState) {
    if (prevState.hasOwnProperty(key)) {
      if (prevState[key] !== undefined && this.state[key] !== undefined && prevState[key].toString !== this.state[key].toString) {
          console.log("debugha, componentDidUpdate, key", key, "prevState[key]", prevState[key]);
          console.log("debugha, componentDidUpdate, key", key, "this.state[key]", this.state[key])
        }
    }
  }
}

日志依然显示props或state的toString方法没有变化。

请问该如何追踪到底是哪个props或state的变化触发了componentDidUpdate？

1. 用React DevTools的Profiler精准定位 #

打开React DevTools，切换到Profiler标签，录制组件更新的过程。录制结束后，查看你的组件更新的触发原因：

• 能直接看到是props变化、state变化，还是父组件重渲染导致的更新
• 可以展开详情，查看具体哪些props/state发生了改变

2. 深度对比props/state #

之前的!==是浅比较，无法检测对象、数组的内部属性变化，改用深度对比：

// 可以用lodash的isEqual，或者自己实现简易深度对比
import isEqual from 'lodash/isEqual';

componentDidUpdate(prevProps, prevState) {
  console.log("debugha, componentDidUpdate");
  
  // 检查props的深度变化
  Object.keys(prevProps).forEach(key => {
    if (!isEqual(prevProps[key], this.props[key])) {
      console.log(`props[${key}] 发生变化:`, {
        prev: prevProps[key],
        current: this.props[key]
      });
    }
  });

  // 检查state的深度变化
  Object.keys(prevState).forEach(key => {
    if (!isEqual(prevState[key], this.state[key])) {
      console.log(`state[${key}] 发生变化:`, {
        prev: prevState[key],
        current: this.state[key]
      });
    }
  });
}

3. 排查父组件重渲染问题 #

如果你的组件没有props/state变化，但依然更新，大概率是父组件频繁重渲染导致的：

• 父组件每次render时，传递给子组件的props是新创建的对象/数组（比如props={{ value: 'test' }}），浅比较会认为props变化
• 给你的组件包裹React.memo，或者在父组件中用useMemo/useCallback缓存传递的props值，避免不必要的重渲染

4. 检查react-monaco-editor内部状态 #

react-monaco-editor本身可能存在内部状态更新（比如编辑器的光标位置、内容实时变化监听），导致触发组件更新。可以通过React DevTools查看组件的内部props和state，确认是否是组件自身的内部变化导致的。

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