如何在React中可视化Virtual DOM及Reconciliation阶段？

当然有办法！我自己在调试React组件意外卸载这类头疼问题时，这些可视化工具和技巧帮了大忙，给你整理几个实用的方案：

一、React官方内置工具 #

• React DevTools的Profiler面板：这是我日常调试的首选工具。打开浏览器的React DevTools后切换到Profiler标签，点击录制按钮，然后操作你的应用，结束录制后就能看到完整的渲染流程。重点看Commit阶段的详情，它会清晰展示前后两次渲染中哪些组件被挂载、卸载或更新，甚至能看到每个组件的渲染耗时。另外，在组件树面板里开启「Highlight Updates」选项，就能实时看到页面中哪些组件在触发重渲染，直观得很。
• 组件树快照对比：在React DevTools的组件树里，右键点击目标组件选择「Take Snapshot」，完成操作后再右键选「Compare with Snapshot」，就能看到两次快照之间组件的props、state变化，以及组件树的增减情况——比如哪个子组件突然消失（被卸载）了，一目了然。

二、第三方可视化工具 #

• React Virtual DOM Visualizer：这个工具能把虚拟DOM的结构以交互式树状图展示出来，每次Reconciliation阶段结束后都会实时更新视图，清晰标记出节点的新增、删除、修改。你只需要在项目中安装依赖后，用它包裹根组件即可：

import { Visualizer } from 'react-virtual-dom-visualizer';

ReactDOM.render(
  <Visualizer>
    <App />
  </Visualizer>,
  document.getElementById('root')
);

运行后页面侧边会出现一个控制面板，你可以展开节点查看详细属性，甚至能回溯之前的虚拟DOM状态，对比差异。

• Why Did You Render：虽然它主打追踪不必要的重渲染，但对排查组件卸载问题也很有用。它会在控制台精准输出组件重渲染或卸载的触发原因，比如props的具体变化、state的更新，还能对比前后props的差异，帮你快速定位“为什么这个组件突然被卸载了”。安装后只需简单配置：

import whyDidYouRender from '@welldone-software/why-did-you-render';

whyDidYouRender(React, {
  trackAllPureComponents: true,
});

三、手动调试小技巧 #

• 自定义日志高阶组件：如果你不想引入第三方依赖，可以自己写个简单的高阶组件，在组件的生命周期节点打印虚拟DOM信息：

const withVdomLog = (Component) => {
  return (props) => {
    useEffect(() => {
      console.log(`${Component.name} 挂载/更新，虚拟DOM:`, <Component {...props} />);
      return () => {
        console.log(`${Component.name} 已卸载`);
      };
    }, [props]);

    return <Component {...props} />;
  };
};

把需要调试的组件用这个高阶组件包裹，就能在控制台看到组件的虚拟DOM快照，以及卸载时的提示，方便对比前后状态变化。

• 用renderToString对比快照：在调试时，可以借助React的renderToString方法把虚拟DOM转换成字符串，对比前后两次的输出：

import { renderToString } from 'react-dom/server';

useEffect(() => {
  const currentVdomString = renderToString(<MyComponent {...props} />);
  console.log('当前虚拟DOM快照:', currentVdomString);
}, [props]);

虽然不如可视化工具直观，但能快速定位虚拟DOM的文本差异，帮你找到节点的变化点。

这些方案足够应对大部分调试场景，尤其是组件意外卸载的问题，通过对比前后快照，很容易就能找到触发卸载的根源。

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