React 最佳实践技能

审计 React 应用程序在性能、包体积以及 React 18+ 最佳实践方面的表现。

使用说明

在审查或审计 React 代码时，请遵循以下步骤：

1. 对指定的代码或仓库运行审计
2. 根据 40 多条可审计规则进行检查（详见下方）
3. 报告发现的问题，并标注严重程度（错误、警告、提示）
4. 提供可操作的修复建议，并附上修复前后的代码示例
5. 针对性能问题，识别根本原因并提出优化建议
6. 针对包体积问题，建议使用代码分割或懒加载策略

可审计规则（示例）

性能

• no-missing-deps：Hook 的依赖项必须完整
• avoid-inline-objects-in-jsx：内联对象会导致不必要的重新渲染
• prefer-useMemo：耗时计算应使用 useMemo
• prefer-useCallback：传递给子组件的回调应使用 useCallback

React 18+

• prefer-use client directive：符合 Server Components 规范
• no-unnecessary-fragments：避免不必要的片段包装
• require-useTransition：长时间渲染应使用 useTransition

包体积

• no-bare-imports：使用命名导入而非命名空间导入
• avoid-default-imports：默认导入会阻碍树摇（tree shaking）
• check-duplicate-packages：检测重复的包版本，防止包体积膨胀

可访问性

• require-aria-labels：交互元素需要 ARIA 标签
• require-keyboard-handlers：点击事件处理需提供键盘等效操作

输出格式

{
  "file": "src/components/UserProfile.tsx",
  "rules": [
    {
      "rule": "no-missing-deps",
      "severity": "error",
      "line": 42,
      "message": "useEffect 中缺少 'userId' 依赖项",
      "fix": "将 userId 添加到依赖数组中"
    }
  ],
  "summary": { "errors": 2, "warnings": 5, "info": 1 }
}

示例

用户：“请审计我们的 React 代码库中的性能问题”

→ 执行审计 → 报告：3 个错误（缺失依赖项、内联对象），7 个警告 → 为每项问题提供修复方案

依赖要求

需要：Node.js，项目中包含 React 16+（如需使用 React 18+ 规则，需 React 18+）