如何查找React组件对应的存储文件？陌生冗余代码库快速上手方法求推荐

• 开启React Dev Tools内置显示功能
  你当前截图展示的组件树可以直接通过配置实现文件路径显示：首先确保项目以开发环境模式启动（生产环境打包会剔除源文件映射信息），打开React Dev Tools的设置面板，在「Components」分类下勾选Show component location when available，配置后组件树的每个组件条目旁会直接展示对应的源文件相对路径，点击可直接跳转至本地编辑器。
• 用babel插件补全源信息
  如果项目配置默认关闭了源文件映射，安装babel-plugin-transform-react-jsx-source插件并加入babel配置的开发环境插件列表，重新编译后所有组件会携带__source属性，包含具体文件路径与行号信息，可在组件实例中直接查看。

• 优先走通业务流程再碰代码
  先将项目在本地成功运行，反复走3次以上你需要调整的功能全流程，记录下交互对应的唯一特征：比如按钮文案、页面标题、特殊样式类名、调用的接口路径，这些都可以作为全局搜索的关键词，直接定位关联代码文件，效率远高于逐目录翻找。
• 从路由/入口文件切入梳理结构
  第一步先找到项目的路由配置文件、页面入口文件，所有页面对应的组件挂载逻辑都在这类文件中定义，你只需要确定要修改的页面对应的路由路径，就能直接定位到页面级组件的存储位置，不需要梳理全量目录结构。
• 增量梳理避免无效工作
  不需要一开始就全量清理冗余文件，每处理一个需求，仅梳理该需求关联的代码链路，确认无用的文件可以临时标记注释或者删除，逐步迭代清理即可，全量梳理会消耗大量不必要的时间。
• 小成本埋点辅助定位
  遇到无法确定对应的组件时，可以在你怀疑的组件代码中临时加一行特殊样式（比如style={{border: '2px solid red'}}）或者console.log标记，刷新页面后如果对应位置出现标记即可确认找对文件。

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