review？

一、代码规范与可读性审查

1. ‌变量命名与代码风格‌

// ❌ 问题代码：模糊的命名和冗余结构
function a(b) {
  let c = b * 10;
  return c + 5;
}

// ✅ 优化后：语义化命名 + 简化逻辑
function calculateTotalPrice(basePrice) {
  const TAX_RATE = 0.1;
  return basePrice * (1 + TAX_RATE) + 5;
}

‌审查重点‌：

• 使用 TAX_RATE 替代魔术数字，增强可维护性
• 函数名明确表达意图（calculateTotalPrice）
• 使用 const 声明常量（ESLint规则校验）

---

2. ‌组件结构合理性‌

// ❌ 问题代码：混合业务逻辑与UI的巨型组件
function UserPage() {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    fetch('/api/users').then(res => res.json()).then(data => setUsers(data));
  }, []);

  return (
    <div>
      {users.map(user => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
          <button onClick={() => deleteUser(user.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

// ✅ 优化后：拆分逻辑与UI层
// UserListContainer.js（逻辑层）
function UserListContainer() {
  const { users, deleteUser } = useUserAPI(); // 封装数据层
  return <UserListView users={users} onDelete={deleteUser} />;
}

// UserListView.js（UI层）
function UserListView({ users, onDelete }) {
  return users.map(user => (
    <UserCard key={user.id} user={user} onDelete={onDelete} />
  ));
}

‌审查重点‌：

• 违反单一职责原则（逻辑与UI耦合）
• 未封装数据请求层（重复代码风险）
• 未拆分原子组件（UserCard）

---

二、性能与安全审查

1. ‌内存泄漏风险‌

// ❌ 问题代码：未清理的副作用
useEffect(() => {
  const timer = setInterval(() => {
    updateData();
  }, 1000);
  return () => clearInterval(timer); // ✅ 必须添加清理逻辑
}, []);

‌审查要点‌：

• 组件卸载时需清除定时器/事件监听
• 使用 ESLint exhaustive-deps 规则检查依赖数组

---

2. ‌XSS 安全漏洞‌

// ❌ 危险代码：直接渲染用户输入
function Comment({ text }) {
  return <div>{text}</div>; // 用户可能注入恶意脚本
}

// ✅ 安全方案：消毒处理
import DOMPurify from 'dompurify';

function Comment({ text }) {
  const sanitizedText = DOMPurify.sanitize(text);
  return <div dangerouslySetInnerHTML={{ __html: sanitizedText }} />;
}

‌审查要点‌：

• 用户输入必须经过消毒（如 DOMPurify 或自定义过滤）
• 避免直接使用 innerHTML 或 dangerouslySetInnerHTML 未消毒内容

---

三、代码重复与重构审查

1. ‌重复逻辑合并‌

// ❌ 问题代码：重复的金额格式化逻辑
function ProductA() {
  const price = 99.9;
  return <div>${price.toFixed(2)}</div>;
}

function ProductB() {
  const price = 199.9;
  return <div>${price.toFixed(2)}</div>;
}

// ✅ 优化后：提取工具函数
// utils/currency.js
export function formatCurrency(value) {
  return `$${value.toFixed(2)}`;
}

// 组件中统一调用
import { formatCurrency } from '../utils/currency';
function Product({ price }) {
  return <div>{formatCurrency(price)}</div>;
}

‌审查要点‌：

• 识别重复代码块（如金额、日期格式化）
• 通过工具函数或自定义 Hook 抽象（如 useFormatCurrency）

---

四、Git 提交与工具链集成

1. 自动化检测配置（.eslintrc.js）

module.exports = {
  extends: ['airbnb', 'plugin:react/recommended'],
  rules: {
    'react/jsx-uses-react': 'error',
    'no-unused-vars': 'warn', // 未使用变量警告
    'react/prop-types': 'off' // 根据团队规范配置
  },
  settings: {
    react: {
      version: 'detect' // 自动检测 React 版本
    }
  }
};

2. Husky 提交拦截（package.json）

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": ["eslint --fix", "prettier --write"]
  }
}

‌作用‌：提交前自动格式化代码并检查 ESLint 规则。

---

五、审查沟通技巧示例

1. 避免指责性语言

❌ "你的代码写得这么乱，根本看不懂"
✅ "这个函数的嵌套层级较多，是否可以考虑拆分成 `validateInput` 和 `formatData` 两个辅助函数？"

2. 明确修改建议

❌ "这里可能有性能问题"
✅ "高频滚动事件建议增加防抖：
```javascript
import { debounce } from 'lodash';
window.addEventListener('scroll', debounce(handleScroll, 200));
```"

---

六、总结：关键审查清单表格

审查类别	典型问题	工具/方案
代码规范	变量命名模糊、缺少注释	ESLint + Prettier
组件设计	逻辑与UI耦合、状态管理混乱	拆分容器组件/使用 Redux Toolkit
性能优化	无防抖/节流、未清理副作用	Chrome DevTools Performance 分析
安全性	XSS漏洞、敏感信息硬编码	DOMPurify + 环境变量加密
可维护性	重复代码、函数超200行	SonarQube 重复检测 + 重构