1.4 Claude Code的应用场景

1.4.1 应用场景概述#

Claude Code作为一款智能代理系统，具有广泛的应用场景，涵盖了软件开发的各个阶段和多个领域。本节将详细介绍Claude Code在不同场景下的应用，包括使用案例、最佳实践和预期效果。

1.4.2 软件开发场景#

需求分析与设计#

Claude Code能够帮助开发者进行需求分析和设计，将自然语言需求转化为结构化的设计文档和实现方案：

• 需求分解：将模糊的自然语言需求分解为具体的功能点和技术需求
• 架构设计：基于需求生成架构设计方案，包括技术选型、模块划分和交互设计
• API设计：生成详细的API设计文档，包括接口定义、参数说明和返回值格式
• 数据库设计：根据业务需求设计数据库 schema，包括表结构、关系和索引

使用案例：

bash
复制
用户：我需要开发一个在线电商平台，支持用户注册、商品管理、订单处理和支付功能。

Claude Code：

1. 需求分析：
   - 用户系统：注册、登录、个人信息管理
   - 商品系统：商品发布、分类、搜索、详情展示
   - 订单系统：购物车、订单创建、订单管理、物流跟踪
   - 支付系统：多种支付方式集成、支付状态管理
   - 管理后台：商品管理、订单管理、用户管理、数据分析

2. 技术选型建议：
   - 前端：React + TypeScript + Next.js
   - 后端：Node.js + Express + MongoDB
   - 支付：集成Stripe或PayPal API
   - 认证：JWT + OAuth2.0

3. 架构设计：
   - 微服务架构，将用户、商品、订单、支付拆分为独立服务
   - 使用API Gateway统一管理接口
   - 采用事件驱动架构处理异步任务
   - 实现CI/CD流水线自动化部署

4. 实现计划：
   - 第1周：搭建基础架构，实现用户系统
   - 第2周：实现商品系统和搜索功能
   - 第3周：实现订单系统和购物车
   - 第4周：集成支付系统
   - 第5周：开发管理后台
   - 第6周：测试和优化

代码生成与实现#

Claude Code能够根据设计文档和需求生成高质量的代码，加速开发过程：

• 完整功能实现：根据需求生成完整的功能模块代码
• 跨文件代码生成：生成涉及多个文件的代码，保持一致性和完整性
• 设计模式应用：在生成代码中应用适当的设计模式和最佳实践
• 代码复用：识别和复用现有代码库中的组件和功能

使用案例：

bash
复制
用户：请帮我实现一个React组件，用于展示商品列表，支持分页、排序和筛选功能。
Claude Code：
1. 分析需求：
   - 商品列表展示
   - 分页功能
   - 排序功能（按价格、销量、上架时间）
   - 筛选功能（按分类、价格范围、品牌）

2. 生成组件代码：
```tsx
import React, { useState, useEffect } from 'react';
import { Product } from '../types';
import { Pagination, Select, Input, Button } from 'antd';

const { Option } = Select;
const { Search } = Input;

interface ProductListProps {
  initialProducts?: Product[];
  onProductClick?: (product: Product) => void;
}

const ProductList: React.FC = ({
  initialProducts = [],
  onProductClick
}) => {
  const [products, setProducts] = useState(initialProducts);
  const [filteredProducts, setFilteredProducts] = useState(initialProducts);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [sortBy, setSortBy] = useState('createdAt');
  const [sortOrder, setSortOrder] = useState('desc');
  const [filters, setFilters] = useState({
    category: '',
    minPrice: 0,
    maxPrice: Infinity,
    brand: '',
    search: ''
  });

  // Filter and sort products
  useEffect(() => {
    let result = [...products];

    // Apply filters
    if (filters.category) {
      result = result.filter(p => p.category === filters.category);
    }
    if (filters.brand) {
      result = result.filter(p => p.brand === filters.brand);
    }
    result = result.filter(p => p.price >= filters.minPrice && p.price 
        p.name.toLowerCase().includes(searchLower) ||
        p.description.toLowerCase().includes(searchLower)
      );
    }

    // Apply sorting
    result.sort((a, b) => {
      const aValue = a[sortBy as keyof Product];
      const bValue = b[sortBy as keyof Product];

      if (aValue  bValue) return sortOrder === 'asc' ? 1 : -1;
      return 0;
    });

    setFilteredProducts(result);
    setCurrentPage(1); // Reset to first page when filters change
  }, [products, filters, sortBy, sortOrder]);

  // Get current page products
  const indexOfLastProduct = currentPage * pageSize;
  const indexOfFirstProduct = indexOfLastProduct - pageSize;
  const currentProducts = filteredProducts.slice(indexOfFirstProduct, indexOfLastProduct);

  // Handle filter changes
  const handleFilterChange = (key: string, value: any) => {
    setFilters(prev => ({
      ...prev,
      [key]: value
    }));
  };

  // Get unique categories and brands for filters
  const categories = [...new Set(products.map(p => p.category))];
  const brands = [...new Set(products.map(p => p.brand))];

  return (
    

      {/* Filter section */}
      

        

           handleFilterChange('search', e.target.value)}
            width: 200, marginRight: 16 }}
          />
           handleFilterChange('category', value)}
          >
            All Categories
            {categories.map(category => (
              {category}
            ))}
          
           handleFilterChange('brand', value)}
          >
            All Brands
            {brands.map(brand => (
              {brand}
            ))}
          
           handleFilterChange('minPrice', parseFloat(e.target.value) || 0)}
          />
          -
           handleFilterChange('maxPrice', parseFloat(e.target.value) || Infinity)}
          />
        

        {/* Sort section */}
        

          Sort by:
          
            Created At
            Price
            Sales
          
          
            Ascending
            Descending
          
        
      

      {/* Product grid */}
      

        {currentProducts.map(product => (
          
 onProductClick && onProductClick(product)}
          >
            
            
{product.name}
            
{product.description}
            

              ${product.price.toFixed(2)}
              Sales: {product.sales}
            
          
        ))}
      

      {/* Pagination */}
      

         setPageSize(size)}
        />
      
    
  );
};

export default ProductList;

代码重构与优化#

Claude Code能够帮助开发者重构和优化现有代码，提高代码质量和性能：

• 代码重构：识别和重构坏味道代码，如重复代码、过长函数、过大类等
• 性能优化：分析代码性能瓶颈，提供优化建议和实现方案
• 架构优化：识别架构问题，提供架构重构建议
• 技术栈升级：帮助将代码从旧技术栈升级到新技术栈

使用案例：

bash
复制
用户：请帮我重构这段代码，提高其性能和可维护性：

function calculateTotalPrice(items) {
  let total = 0;
  for (let i = 0; i  0 && discountPercent  0 && taxRate } items - 商品列表
   * @returns {number} 商品总价
   */
  static calculateSubtotal(items) {
    if (!Array.isArray(items)) {
      throw new Error('Items must be an array');
    }

    return items.reduce((total, item) => {
      // 确保价格和数量是有效的数字
      const price = typeof item.price === 'number' && item.price > 0 ? item.price : 0;
      const quantity = typeof item.quantity === 'number' && item.quantity > 0 ? item.quantity : 0;

      return total + (price * quantity);
    }, 0);
  }

  /**
   * 计算折扣后的价格
   * @param {number} amount - 原始金额
   * @param {number} discountPercent - 折扣百分比 (0-100)
   * @returns {number} 折扣后的金额
   */
  static applyDiscount(amount, discountPercent) {
    // 验证输入
    if (typeof amount !== 'number' || amount } items - 商品列表
   * @param {number} discountPercent - 折扣百分比 (0-100)
   * @param {number} taxRate - 税率百分比 (0-100)
   * @returns {Object} 包含各项价格明细的对象
   */
  static calculateFinalPrice(items, discountPercent = 0, taxRate = 0) {
    const subtotal = this.calculateSubtotal(items);
    const discountedAmount = this.applyDiscount(subtotal, discountPercent);
    const tax = this.calculateTax(discountedAmount, taxRate);
    const finalPrice = discountedAmount + tax;

    return {
      subtotal: Number(subtotal.toFixed(2)),
      discount: Number((subtotal - discountedAmount).toFixed(2)),
      tax: Number(tax.toFixed(2)),
      finalPrice: Number(finalPrice.toFixed(2))
    };
  }
}

// 使用示例
const items = [
  { price: 19.99, quantity: 2 },
  { price: 9.99, quantity: 1 },
  { price: 29.99, quantity: 3 }
];

try {
  const result = PriceCalculator.calculateFinalPrice(items, 10, 8.25);
  console.log('Price breakdown:', result);
  // Output: { subtotal: 139.94, discount: 13.99, tax: 10.69, finalPrice: 136.64 }
} catch (error) {
  console.error('Error calculating price:', error.message);
}
```

3. 重构改进点：
   - 封装为PriceCalculator类，提高可维护性和扩展性
   - 添加了详细的JSDoc注释，提高代码可读性
   - 添加了输入验证，提高代码健壮性
   - 使用reduce方法替代for循环，更简洁高效
   - 拆分了计算逻辑，每个方法只负责一个功能
   - 返回完整的价格明细，方便调用者使用
   - 添加了错误处理，提高代码可靠性
   - 使用toFixed方法格式化结果，避免浮点数精度问题

1.4.3 自动化测试场景#

Claude Code能够帮助开发者生成和运行测试用例，提高测试覆盖率和代码质量：

• 测试用例生成：根据代码自动生成单元测试、集成测试和端到端测试用例
• 测试数据生成：生成各种测试数据，包括边界情况和异常情况
• 测试执行：运行测试用例并分析测试结果
• 测试报告生成：生成详细的测试报告，包括覆盖率分析和失败原因

使用案例：

bash
复制
用户：请帮我为刚才重构的PriceCalculator类生成单元测试用例。
Claude Code：

1. 测试策略：
   - 测试正常情况
   - 测试边界情况
   - 测试异常情况
   - 测试各种组合情况

2. 生成的测试用例（使用Jest框架）：
```javascript
const PriceCalculator = require('./PriceCalculator');

describe('PriceCalculator', () => {
  describe('calculateSubtotal', () => {
    test('should return 0 for empty array', () => {
      expect(PriceCalculator.calculateSubtotal([])).toBe(0);
    });

    test('should return 0 for array with invalid items', () => {
      expect(PriceCalculator.calculateSubtotal([{ price: 'invalid', quantity: 'invalid' }])).toBe(0);
    });

    test('should calculate correct subtotal for valid items', () => {
      const items = [
        { price: 10, quantity: 2 },
        { price: 20, quantity: 3 }
      ];
      expect(PriceCalculator.calculateSubtotal(items)).toBe(80); // (10*2) + (20*3) = 20 + 60 = 80
    });

    test('should handle items with zero price or quantity', () => {
      const items = [
        { price: 10, quantity: 0 },
        { price: 0, quantity: 5 },
        { price: 20, quantity: 2 }
      ];
      expect(PriceCalculator.calculateSubtotal(items)).toBe(40); // Only, third item contributes
    });

    test('should throw error for non-array input', () => {
      expect(() => PriceCalculator.calculateSubtotal('invalid')).toThrow('Items must be an array');
    });
  });

  describe('applyDiscount', () => {
    test('should return original amount for 0% discount', () => {
      expect(PriceCalculator.applyDiscount(100, 0)).toBe(100);
    });

    test('should return 0 for 100% discount', () => {
      expect(PriceCalculator.applyDiscount(100, 100)).toBe(0);
    });

    test('should calculate correct discount for valid percentage', () => {
      expect(PriceCalculator.applyDiscount(100, 20)).toBe(80); // 100 - 20% = 80
    });

    test('should cap discount at 100%', () => {
      expect(PriceCalculator.applyDiscount(100, 150)).toBe(0); // Discount cannot exceed 100%
    });

    test('should floor discount at 0%', () => {
      expect(PriceCalculator.applyDiscount(100, -50)).toBe(100); // Discount cannot be negative
    });

    test('should throw error for negative amount', () => {
      expect(() => PriceCalculator.applyDiscount(-100, 20)).toThrow('Amount must be a non-negative number');
    });

    test('should throw error for non-number discount', () => {
      expect(() => PriceCalculator.applyDiscount(100, 'invalid')).toThrow('Discount percent must be a number');
    });
  });

  describe('calculateTax', () => {
    test('should return 0 for 0% tax rate', () => {
      expect(PriceCalculator.calculateTax(100, 0)).toBe(0);
    });

    test('should calculate correct tax for valid rate', () => {
      expect(PriceCalculator.calculateTax(100, 8.25)).toBe(8.25); // 8.25% of 100 is 8.25
    });

    test('should cap tax rate at 100%', () => {
      expect(PriceCalculator.calculateTax(100, 150)).toBe(100); // Tax rate cannot exceed 100%
    });

    test('should floor tax rate at 0%', () => {
      expect(PriceCalculator.calculateTax(100, -50)).toBe(0); // Tax rate cannot be negative
    });

    test('should throw error for negative amount', () => {
      expect(() => PriceCalculator.calculateTax(-100, 8.25)).toThrow('Amount must be a non-negative number');
    });

    test('should throw error for non-number tax rate', () => {
      expect(() => PriceCalculator.calculateTax(100, 'invalid')).toThrow('Tax rate must be a number');
    });
  });

  describe('calculateFinalPrice', () => {
    test('should return correct price breakdown for valid input', () => {
      const items = [
        { price: 19.99, quantity: 2 },
        { price: 9.99, quantity: 1 }
      ];
      const result = PriceCalculator.calculateFinalPrice(items, 10, 8.25);

      expect(result).toEqual({
        subtotal: 49.97,
        discount: 4.997, // 10% of 49.97
        tax: 3.648, // 8.25% of (49.97 - 4.997)
        finalPrice: 48.621 // (49.97 - 4.997) + 3.648
      });
    });

    test('should use default values when discount and tax rate are not provided', () => {
      const items = [{ price: 100, quantity: 1 }];
      const result = PriceCalculator.calculateFinalPrice(items);

      expect(result).toEqual({
        subtotal: 100,
        discount: 0,
        tax: 0,
        finalPrice: 100
      });
    });

    test('should handle empty items array', () => {
      const result = PriceCalculator.calculateFinalPrice([], 10, 8.25);

      expect(result).toEqual({
        subtotal: 0,
        discount: 0,
        tax: 0,
        finalPrice: 0
      });
    });

    test('should throw error for invalid items', () => {
      expect(() => PriceCalculator.calculateFinalPrice('invalid', 10, 8.25)).toThrow('Items must be an array');
    });
  });
});

1.4.4 数据分析场景#

数据处理与分析#

Claude Code能够帮助开发者处理和分析数据，提取有价值的信息：

• 数据清洗：识别和处理数据中的缺失值、异常值和重复值
• 数据转换：将数据从一种格式转换为另一种格式
• 数据分析：进行统计分析、趋势分析和关联分析
• 数据可视化：生成各种图表和可视化报告

使用案例：

bash
复制
用户：我有一个包含销售数据的CSV文件，请帮我分析销售趋势并生成可视化报告。
Claude Code：

1. 分析需求：
   - 读取CSV文件
   - 分析销售趋势（按时间、地区、产品类别）
   - 生成可视化图表
   - 输出分析报告

2. 实现代码：
```python
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
from datetime import datetime

# 读取数据
df = pd.read_csv('sales_data.csv')

# 数据清洗销售趋势分析
def analyze_sales_trends(df):
    # 按时间分析按地区分析
    regional_sales = df.groupby('region')['revenue'].sum().sort_values(ascending=False)

    # 按产品类别分析
    category_sales = df.groupby('category')['revenue'].sum().sort_values(ascending=False)

    return monthly_sales, regional_sales, category_sales

# 生成可视化
def create_visualizations(df, monthly_sales, regional_sales, category_sales):
    fig, axes = plt.subplots(2, 2, figsize=(15, 12))

    # 1. 月度销售趋势地区销售分布产品类别销售销售热力图（按季度和地区）
    pivot_table = df.pivot_table(
        values='revenue',
        index='quarter',
        columns='region',
        aggfunc='sum'
    )
    sns.heatmap(pivot_table, annot=True, fmt='.0f', cmap='YlOrRd', ax=axes[1, 1])
    axes[1, 1].set_title('Sales Heatmap (Quarter vs Region)')

    plt.tight_layout()
    plt.savefig('sales_analysis_report.png', dpi=300, bbox_inches='tight')
    plt.show()

# 执行分析
monthly_sales, regional_sales, category_sales = analyze_sales_trends(df)
create_visualizations(df, monthly_sales, regional_sales, category_sales)

# 生成文本报告
def generate_report(df, monthly_sales, regional_sales, category_sales):
    report = f"""
    销售数据分析报告
    =================

    数据概览：
    - 总销售额: ${df['revenue'].sum():,.2f}
    - 总订单数: {len(df):,}
    - 平均订单金额: ${df['revenue'].mean():,.2f}
    - 数据时间范围: {df['date'].min()} 至 {df['date'].max()}

    地区销售排名：
    """

    for i, (region, revenue) in enumerate(regional_sales.items(), 1):
        report += f"{i}. {region}: ${revenue:,.2f}\n"

    report += "\n产品类别销售排名：\n"
    for i, (category, revenue) in enumerate(category_sales.items(), 1):
        report += f"{i}. {category}: ${revenue:,.2f}\n"

    return report

report = generate_report(df, monthly_sales, regional_sales, category_sales)
print(report)

# 保存报告
with open('sales_analysis_report.txt', 'w', encoding='utf-8') as f:
    f.write(report)

1.4.5 文档编写场景#

Claude Code能够帮助开发者编写各种技术文档：

• API文档：根据代码自动生成API文档
• 用户手册：编写用户使用手册和教程
• 技术博客：生成技术博客文章和教程
• 代码注释：为代码添加和完善注释

使用案例：

bash
复制
用户：请帮我为刚才的PriceCalculator类生成完整的API文档。
Claude Code：

生成的API文档：

# PriceCalculator API 文档

## 概述

PriceCalculator 是一个用于计算商品价格的工具类，支持商品总价计算、折扣应用、税费计算和最终价格计算。

## 方法

### calculateSubtotal(items)

计算商品列表的总价。

**参数：**
- `items` (Array): 商品列表，每个商品包含价格和数量

**返回值：**
- `number`: 商品总价

**异常：**
- `Error`: 当输入不是数组时抛出

**示例：**
```javascript
const items = [
  { price: 19.99, quantity: 2 },
  { price: 9.99, quantity: 1 }
];
const subtotal = PriceCalculator.calculateSubtotal(items);
// 返回: 49.97
```

### applyDiscount(amount, discountPercent)

计算折扣后的金额。

**参数：**
- `amount` (number): 原始金额
- `discountPercent` (number): 折扣百分比，范围 0-100

**返回值：**
- `number`: 折扣后的金额

**异常：**
- `Error`: 当金额为负数或折扣百分比不是数字时抛出

**示例：**
```javascript
const discounted = PriceCalculator.applyDiscount(100, 20);
// 返回: 80
```

### calculateTax(amount, taxRate)

计算税费。

**参数：**
- `amount` (number): 计税金额
- `taxRate` (number): 税率百分比，范围 0-100

**返回值：**
- `number`: 税费金额

**异常：**
- `Error`: 当金额为负数或税率不是数字时抛出

**示例：**
```javascript
const tax = PriceCalculator.calculateTax(100, 8.25);
// 返回: 8.25
```

### calculateFinalPrice(items, discountPercent, taxRate)

计算最终价格，包含所有明细。

**参数：**
- `items` (Array): 商品列表
- `discountPercent` (number, 可选): 折扣百分比，默认为 0
- `taxRate` (number, 可选): 税率百分比，默认为 0

**返回值：**
- `Object`: 包含价格明细的对象
  - `subtotal` (number): 商品总价
  - `discount` (number): 折扣金额
  - `tax` (number): 税费金额
  - `finalPrice` (number): 最终价格

**异常：**
- `Error`: 当商品列表不是数组时抛出

**示例：**
```javascript
const items = [
  { price: 19.99, quantity: 2 },
  { price: 9.99, quantity: 1 }
];
const result = PriceCalculator.calculateFinalPrice(items, 10, 8.25);
// 返回: { subtotal: 49.97, discount: 4.997, tax: 3.648, finalPrice: 48.621 }
```

## 使用示例
```javascript
const items = [
  { price: 19.99, quantity: 2 },
  { price: 9.99, quantity: 1 },
  { price: 29.99, quantity: 3 }
];

try {
  const result = PriceCalculator.calculateFinalPrice(items, 10, 8.25);
  console.log('Price breakdown:', result);
} catch (error) {
  console.error('Error calculating price:', error.message);
}
```

## 注意事项

1. 所有金额值都会被格式化为两位小数
2. 折扣百分比和税率会被限制在 0-100 的范围内
3. 无效的价格或数量会被视为 0
4. 所有方法都是静态方法，不需要实例化类

1.4.6 学习与教学场景#

Claude Code可以作为学习和教学的有力工具：

• 代码解释：解释复杂代码的逻辑和工作原理
• 概念讲解：讲解编程概念、设计模式和最佳实践
• 练习生成：生成编程练习题和答案
• 学习路径规划：为学习者制定个性化的学习路径

使用案例：

bash
复制
用户：请帮我解释一下React中的useEffect钩子是如何工作的。
Claude Code：
useEffect 是 React 中最重要的 Hooks 之一，它让你能够在函数组件中执行副作用操作。

## 基本概念

副作用（Side Effect）是指函数外部可观察到的操作，例如：
- 数据获取（API调用）
- 订阅事件
- 手动修改 DOM
- 设置定时器
- 记录日志

## useEffect 的工作原理

### 1. 基本语法
```javascript
useEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数（可选）
  };
}, [依赖项数组]);
```

### 2. 执行时机

useEffect 在以下时机执行：
- 组件首次渲染后
- 依赖项数组中的值发生变化后

### 3. 依赖项数组的作用

依赖项数组控制 useEffect 的执行频率：

```javascript
// 每次渲染后都执行
useEffect(() => {
  console.log('每次渲染都执行');
});

// 只在首次渲染后执行一次
useEffect(() => {
  console.log('只执行一次');
}, []);

// 当 count 变化时执行
useEffect(() => {
  console.log('count 变化了:', count);
}, [count]);

// 当 count 或 name 变化时执行
useEffect(() => {
  console.log('count 或 name 变化了');
}, [count, name]);
```

### 4. 清理函数

清理函数在以下时机执行：
- 组件卸载时
- 下一次 useEffect 执行之前

```javascript
useEffect(() => {
  const timer = setInterval(() => {
    console.log('定时器执行');
  }, 1000);

  // 返回清理函数
  return () => {
    clearInterval(timer);
    console.log('清理定时器');
  };
}, []);
```

## 实际应用示例

### 1. 数据获取
```javascript
useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  };

  fetchData();
}, []); // 空依赖数组，只执行一次
```

### 2. 监听窗口大小变化
```javascript
useEffect(() => {
  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);
```

### 3. 表单验证
```javascript
useEffect(() => {
  if (email && password) {
    setIsValid(validateEmail(email) && password.length >= 8);
  } else {
    setIsValid(false);
  }
}, [email, password]);
```

## 常见陷阱

### 1. 遗漏依赖项
```javascript
// 错误：遗漏了依赖项
useEffect(() => {
  console.log(count);
}, []); // 应该包含 [count]

// 正确
useEffect(() => {
  console.log(count);
}, [count]);
```

### 2. 无限循环
```javascript
// 错误：在 useEffect 中修改依赖项
useEffect(() => {
  setCount(count + 1); // 这会导致无限循环
}, [count]);
```

### 3. 过度使用清理函数
```javascript
// 不必要：没有副作用不需要清理
useEffect(() => {
  const result = calculateSomething();
  return () => {
    // 不需要清理
  };
}, []);
```

## 最佳实践

1. **明确依赖项**：始终在依赖项数组中列出所有使用的变量
2. **合理使用清理函数**：只在需要时使用清理函数
3. **拆分 useEffect**：将不同的副作用拆分到不同的 useEffect 中
4. **避免过度优化**：不要为了性能而过度拆分 useEffect

## 总结

useEffect 是处理副作用的强大工具，理解它的工作原理和最佳实践对于编写高质量的 React 应用至关重要。通过合理使用 useEffect，你可以：
- 管理组件的生命周期
- 处理异步操作
- 响应状态变化
- 清理资源

记住：useEffect 的核心是"响应式"——它响应依赖项的变化，并在适当的时候执行副作用。