📌 项目地址：millionco/react-doctor | ⭐ 10,083 颗星 | 🔧 TypeScript | 📜 未标注
问题：代码逻辑没毛病，但组件被重挂了
先看一段代码。这是 react-doctor 仓库 README 里给出的示例：
const COMPONENT_MAP = {
header: Header,
footer: Footer,
};
const Page = ({ name }: { name: string }) => {
const Component = COMPONENT_MAP[name];
return <Component />;
};
这段代码的逻辑完全正确——按 name 取组件，然后渲染。问题出在 React 内部的 reconciliation 机制上。
React 在 diff 的时候，比较的是元素类型（element type）的引用是否一致。如果 Component 这个变量在两次 render 之间拿到的引用不一致，React 就认为组件类型变了，直接卸载旧实例、挂载新实例。结果是：组件内所有 state 被清空，useEffect 重新执行，DOM 状态（输入框焦点、滚动位置）全部丢失。
关键点是：COMPONENT_MAP[name] 拿到的引用稳不稳定，取决于 COMPONENT_MAP 的声明位置。
- 如果
COMPONENT_MAP是模块顶层常量，COMPONENT_MAP[name]每次返回的是同一个函数引用，React 不会重建组件。这种情况是安全的。 - 如果映射表定义在组件内部，每次 render 都会新建一个对象——但对象的 key 指向的还是原来的组件函数，引用没变，其实也还算安全。
- 真正危险的是在 render 里对组件做了一层包裹，比如
() => Component、useMemo(() => Component, [])但依赖没写对、或者用工厂函数动态生成组件。这些场景下，每次 render 拿到的都是全新引用，React 无脑重建。
这种问题靠代码审查非常难抓，因为一眼看过去”没啥毛病”。我见过更隐蔽的版本：映射表在模块顶层，但渲染时套了一层回调——比如 <SomeComponent render={() => <Header />} />，每次 render 都创建新函数，子组件因此重复挂载。
react-doctor 的定位：运行时观测工具
react-doctor 不做静态分析。它不是一个 lint 插件，不会在构建阶段给你警告。它的工作方式是：把 react-doctor 装进项目，跑起来，然后在浏览器里正常操作页面，它记录每个组件的实际渲染行为——渲染次数、耗时、触发来源。最后产出一份可视化报告，渲染数据的分布、多余渲染的位置，都标在组件树里。
安装和运行命令只有两条：
npm i -D react-doctor
npx react-doctor
需要明确的一点：这个工具依赖你手动操作页面，把问题场景复现出来，它才有数据可抓。它不是自动巡检，也没有静态规则来推断”哪里可能有问题”。它给的是运行时证据，不是预测。
哪类问题能抓，哪类不能抓
react-doctor 擅长的事情很具体：找出那些”不该发生但实际发生了”的渲染。
前面说的组件映射引用问题、render 里内联函数导致的重挂载、动态组件没有 memo 导致的重复渲染，这些场景下，报告里能直接看到组件的挂载次数远大于预期，一眼定位到是哪次状态更新带来的。
但有几类问题是它管不到的：
- 单次渲染耗时过高的组件——如果某个组件每帧都正常渲染一次，但每次耗时 200ms，报告里能看出”总耗时”很高，但工具本身不会给你分析为什么这个组件慢，这是 DevTools Profiler 的活。
- 生产构建下的性能瓶颈——react-doctor 跑的是开发模式，生产构建的行为（比如 lazy loading、concurrent rendering 的调度差异）它观测不到。
- 服务端渲染的耗时——它只跑在浏览器侧，SSR 不归它管。
它的专注点很窄：不该发生的渲染。不碰”所有渲染的性能优化”，也不做 profiling 那样的火焰图分析。
使用体验：一次典型的诊断闭环
我实际用下来，流程大概是这样的：
装包、运行 npx react-doctor，浏览器里多了个调试面板。然后我正常操作页面——切 tab、点按钮、填表单。操作完之后，面板里会有每个组件的渲染次数和触发来源。
最直接的价值：修完一个问题之后，再跑一遍同样的操作，能看到渲染次数确实降下来了。这个反馈闭环比”改完代码凭感觉觉得快了”靠谱得多。
回到开头那段代码。如果项目里有”后端字段映射到组件”的场景——比如根据接口返回的 type 字段选择不同的渲染组件——这种代码大概率就是重挂载的重灾区。因为映射逻辑通常会写在 render 函数内部，或者通过函数动态返回组件。
用 react-doctor 扫一遍，哪个组件挂载了两次、是哪一行代码触发的状态更新，报告里都有。你按图索骥去改代码就行。
值不值得装
一个 10083 个 star 的 TypeScript 项目，做的是件很具体的事：用运行时观测替代代码审查来定位多余的渲染。它不解决所有性能问题，但解决的那一类——组件重挂载、重复渲染——恰恰是代码审查最容易漏掉的。
如果你的项目里没有频繁切换的 tab、没有动态表单、没有字段映射组件，那它对你可能没太大用处。但反过来，如果你的页面总觉得”卡”、”操作起来不跟手”，但又说不出是哪里的问题，装上它跑一遍，至少能排掉一类常见嫌疑。
这就是它的价值：不靠猜，给你看数据。