文档命令库代码优化重构

代码优化重构

使用 Claude Code 识别代码中的性能瓶颈、重复逻辑和设计问题，进行智能重构以提升代码质量和运行效率。

适用场景

  • 代码性能需要优化提升
  • 重复代码过多需要抽象
  • 函数过于复杂需要拆分
  • 准备大版本重构前的代码整理

复制命令

# 全面代码分析和重构
分析并重构当前项目中存在的性能问题和代码异味
 
# 针对特定文件重构
重构 src/components/DataTable.jsx，优化性能和代码结构
 
# 性能导向重构
识别并优化项目中的性能瓶颈，重点关注渲染和计算性能
 
# 可读性重构
重构复杂函数，提升代码可读性和可维护性

执行步骤

1. 代码质量分析

Claude Code 会自动识别：

  • 性能问题：不必要的重复计算、低效算法
  • 代码异味：长函数、重复代码、过度耦合
  • 架构问题：循环依赖、职责不清
  • 可维护性问题：魔法数字、硬编码、命名不当

2. 重构策略制定

根据分析结果制定重构计划：

性能优化重构

// 重构前：每次渲染都重新计算
function ExpensiveComponent({ data, filter }) {
  const filteredData = data.filter(item => 
    item.name.toLowerCase().includes(filter.toLowerCase())
  );
  const processedData = filteredData.map(item => ({
    ...item,
    displayName: `${item.name} (${item.category})`
  }));
  
  return <DataList items={processedData} />;
}
 
// 重构后：使用 memoization 优化
import { useMemo } from 'react';
 
function ExpensiveComponent({ data, filter }) {
  const processedData = useMemo(() => {
    const filteredData = data.filter(item => 
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
    return filteredData.map(item => ({
      ...item,
      displayName: `${item.name} (${item.category})`
    }));
  }, [data, filter]);
  
  return <DataList items={processedData} />;
}

代码结构重构

// 重构前：职责不清的大函数
function processUserData(userData) {
  // 验证数据
  if (!userData.email || !userData.name) {
    throw new Error('Invalid user data');
  }
  
  // 格式化数据
  const formattedData = {
    ...userData,
    email: userData.email.toLowerCase(),
    name: userData.name.trim(),
    createdAt: new Date().toISOString()
  };
  
  // 保存到数据库
  database.users.create(formattedData);
  
  // 发送欢迎邮件
  emailService.sendWelcome(formattedData.email);
  
  // 记录日志
  logger.info(`User created: ${formattedData.id}`);
  
  return formattedData;
}
 
// 重构后：单一职责原则
class UserService {
  validateUserData(userData) {
    if (!userData.email || !userData.name) {
      throw new Error('Invalid user data');
    }
  }
  
  formatUserData(userData) {
    return {
      ...userData,
      email: userData.email.toLowerCase(),
      name: userData.name.trim(),
      createdAt: new Date().toISOString()
    };
  }
  
  async createUser(userData) {
    this.validateUserData(userData);
    const formattedData = this.formatUserData(userData);
    
    const user = await database.users.create(formattedData);
    
    // 异步处理后续任务
    this.handlePostCreation(user);
    
    return user;
  }
  
  async handlePostCreation(user) {
    await emailService.sendWelcome(user.email);
    logger.info(`User created: ${user.id}`);
  }
}

3. 算法优化重构

// 重构前：O(n²) 复杂度
function findDuplicates(arr) {
  const duplicates = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j] && !duplicates.includes(arr[i])) {
        duplicates.push(arr[i]);
      }
    }
  }
  return duplicates;
}
 
// 重构后：O(n) 复杂度
function findDuplicates(arr) {
  const seen = new Set();
  const duplicates = new Set();
  
  for (const item of arr) {
    if (seen.has(item)) {
      duplicates.add(item);
    } else {
      seen.add(item);
    }
  }
  
  return Array.from(duplicates);
}

4. 重构执行和验证

# 运行测试确保功能不变
npm test
 
# 性能测试对比
npm run benchmark
 
# 代码质量检查
npm run lint

验证命令

# 运行完整测试套件
npm test -- --coverage
 
# 性能基准测试
npm run test:performance
 
# 代码复杂度分析
npx complexity-report src/
 
# ESLint 质量检查
npm run lint -- --format=table

重构类型和策略

性能优化重构

React 组件优化

  • 使用 React.memo 避免不必要渲染
  • useMemo 和 useCallback 缓存昂贵计算
  • 组件懒加载和代码分割
  • 虚拟化长列表渲染

算法和数据结构优化

  • 选择更高效的算法和数据结构
  • 减少循环嵌套和复杂度
  • 使用缓存避免重复计算
  • 异步操作并行化

代码结构重构

设计模式应用

// 策略模式重构
class PaymentProcessor {
  constructor(strategy) {
    this.strategy = strategy;
  }
  
  process(amount) {
    return this.strategy.process(amount);
  }
}
 
class CreditCardStrategy {
  process(amount) {
    // 信用卡处理逻辑
    return this.chargeCreditCard(amount);
  }
}
 
class PayPalStrategy {
  process(amount) {
    // PayPal 处理逻辑
    return this.chargePayPal(amount);
  }
}

函数式编程重构

// 重构前：命令式风格
function processUsers(users) {
  const result = [];
  for (let i = 0; i < users.length; i++) {
    if (users[i].active) {
      const processed = {
        id: users[i].id,
        displayName: users[i].name.toUpperCase(),
        hasPermissions: users[i].permissions.length > 0
      };
      result.push(processed);
    }
  }
  return result;
}
 
// 重构后：函数式风格
const processUsers = (users) =>
  users
    .filter(user => user.active)
    .map(user => ({
      id: user.id,
      displayName: user.name.toUpperCase(),
      hasPermissions: user.permissions.length > 0
    }));

💡 渐进重构：大型重构应该分步进行，每次重构后都要运行完整的测试套件确保功能正确性。

重构最佳实践

重构前准备

  1. 完备的测试覆盖：确保有足够的测试保护
  2. 性能基准建立：记录重构前的性能指标
  3. 代码备份：使用版本控制保护现有代码
  4. 团队沟通：确保团队理解重构目的和计划

重构过程中

  1. 小步快走：每次只做一个小的重构
  2. 频繁测试：每次修改后立即运行测试
  3. 保持功能不变：重构不应改变外部行为
  4. 及时提交：完成一个重构点就提交代码

重构后验证

  1. 功能测试：确保所有功能正常工作
  2. 性能测试：验证性能是否有改善
  3. 代码审查：团队审查重构质量
  4. 文档更新：更新相关文档和注释

风险控制

风险识别：

  • 重构可能引入新的bug
  • 性能优化可能降低代码可读性
  • 大范围重构可能影响其他功能模块

风险控制措施：

# 创建重构分支
git checkout -b refactor/optimize-performance
 
# 分步提交，便于回滚
git add -p  # 选择性添加修改
git commit -m "refactor: optimize data processing algorithm"
 
# 如果出现问题，快速回滚
git revert HEAD

重构效果评估

量化指标：

  • 代码行数减少比例
  • 函数复杂度降低程度
  • 性能提升百分比
  • 测试覆盖率变化

质量指标：

  • 代码可读性提升
  • 维护难度降低
  • 扩展性改善
  • 团队开发效率提升

相关卡片

参考来源

命令库概览依赖安全更新
关于我