CodeBuddy通过静态AST解析与模块引用追踪，精准识别React项目中组件过度嵌套（≥5层）和循环依赖闭环，并提供可视化图谱、依赖热力图及自动化解耦脚本。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在维护一个大型React项目时发现构建失败、热更新异常或组件状态不可预测，可能是由于组件间存在过度嵌套或循环依赖。CodeBuddy可通过静态AST解析与模块引用追踪，精准识别组件导入链中的深层嵌套层级与双向引用闭环。以下是CodeBuddy支持的具体分析路径：
一、静态扫描组件导入链并标注嵌套深度
CodeBuddy遍历所有.jsx/.tsx文件，提取import语句与JSX元素渲染路径，为每个组件计算从入口文件出发的调用层级，并标记超过5层的深度路径为“过度嵌套风险”。该过程不执行代码，仅依赖语法树结构，确保安全无副作用。
1、启动CodeBuddy CLI，在项目根目录运行codebuddy analyze --target=react-dependency --mode=nesting。
2、工具自动读取src/index.tsx或src/App.tsx作为根节点，递归解析所有import与React.createElement调用点。
3、生成嵌套路径报告，例如：src/pages/Dashboard.tsx → src/components/ChartWrapper.tsx → src/components/Renderer.tsx → src/utils/transform.tsx → src/hooks/useData.tsx → src/store/slices/dashboardSlice.tsx（共6层）。
4、对每条路径末尾组件进行高亮标注，提示“该组件被6层外调用，建议拆分中间层或改用context/props透传”。
二、检测模块级循环依赖闭环
CodeBuddy通过构建有向依赖图（Directed Dependency Graph），识别任意两个或多个模块之间存在的相互import关系。它不仅检查直接的A→B→A，还覆盖间接闭环如A→B→C→A，并定位具体触发该闭环的import语句位置。
1、运行codebuddy analyze --target=react-dependency --mode=cycle命令。
2、工具解析全部import声明，将每个文件视为图节点，每个import语句视为有向边。
3、使用Kosaraju算法遍历强连通分量（SCC），提取含2个及以上节点的闭环子图。
4、输出示例：src/components/ModalProvider.tsx ← src/components/ToastContext.tsx ← src/components/ModalProvider.tsx，并标出具体行号：ModalProvider第12行import ToastContext，ToastContext第8行import ModalProvider。
三、可视化交互式依赖图谱
CodeBuddy内置轻量Web服务，可本地启动图形化界面，以力导向图（Force-Directed Graph）形式展示组件间依赖关系。节点大小反映被引用频次，边粗细表示引用强度，红色环形边明确标识循环依赖路径，支持缩放、拖拽与点击下钻。
1、执行codebuddy serve --view=dependency-graph，服务默认监听http://localhost:3001。
2、浏览器打开该地址，加载自动生成的dependency-graph.json数据文件。
3、图中高亮显示所有入度+出度≥8的中心组件节点，例如src/contexts/AppContext.tsx，提示其可能成为耦合枢纽。
4、鼠标悬停任一红色边，弹出浮层显示双向import语句原文及所在文件路径。
四、按文件粒度输出依赖密度热力图
CodeBuddy统计每个组件文件的“外部依赖数”（import数量）与“被依赖数”（被其他组件import次数），计算其依赖密度比值，并按文件路径聚类排序，辅助识别高耦合低内聚的“坏味道”文件。
1、运行codebuddy report --format=heatmap --scope=component。
2、工具扫描src/**/*.{tsx,jsx}，排除index.ts与测试文件。
3、对每个组件文件生成二维坐标：横轴为外部依赖数，纵轴为被依赖数，气泡面积正比于二者乘积。
4、标出右上角区域（外部依赖≥7且被依赖≥5）的所有文件，例如：src/components/DataGrid/TableHeader.tsx（依赖9个模块，被12个模块引用）。
五、生成可执行的依赖解耦建议脚本
CodeBuddy不仅指出问题，还提供可落地的重构方案。它根据AST识别可安全迁移的导出项，自动生成类型保持、路径修正、命名空间调整三合一的迁移脚本，并附带验证步骤，确保解耦后功能不变。
1、在分析结果页点击“生成解耦方案”，或运行codebuddy fix --rule=dependency-coupling。
2、工具识别循环依赖中的非核心导出，例如ModalProvider中仅被ToastContext使用的useModalState钩子。
3、自动生成src/hooks/useModalState.ts新文件，将钩子逻辑抽离，并更新原文件export声明。
4、输出验证指令：npm run build && grep -r "useModalState" src/ | grep -v hooks，确认旧路径引用已清零。
