19. AI时代的前端开发

// 提示词: "Create a responsive card component with image, title, and description"
const Card = ({ image, title, description, onClick }) => {
  return (
    <div className="max-w-sm rounded-lg shadow-lg overflow-hidden cursor-pointer hover:shadow-xl transition-shadow" 
         onClick={onClick}>
      <img src={image} alt={title} className="w-full h-48 object-cover" />
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-800 mb-2">{title}</h3>
        <p className="text-gray-600 text-sm">{description}</p>
      </div>
    </div>
  );
};

创建一个React组件，要求：
- 组件名称：[ComponentName]
- 功能描述：[具体功能]
- Props接口：[参数列表]
- 样式方案：[CSS方案]
- 状态管理：[状态管理方式]
- 可访问性：包含ARIA属性
- TypeScript：使用严格类型定义

请审查以下代码，重点关注：
1. 代码质量和可读性
2. 性能优化机会
3. 安全性问题
4. 最佳实践遵循
5. 潜在的bug

[粘贴代码]

请创建一个SearchInput组件，要求如下：
- 功能：带搜索建议的智能输入框
- 技术栈：React + TypeScript + Tailwind CSS
- 特性：防抖搜索、键盘导航、可访问性
- 状态管理：使用useState Hook

// 优化前的代码
function UserList({ users }) {
  const [filteredUsers, setFilteredUsers] = useState([]);
  
  useEffect(() => {
    const filtered = users.filter(user => user.active);
    setFilteredUsers(filtered);
  }, [users]);
 
  return (
    <div>
      {filteredUsers.map(user => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <p>{user.email}</p>
        </div>
      ))}
    </div>
  );
}
 
// ChatGPT优化后的代码
const UserList = memo(({ users }) => {
  const filteredUsers = useMemo(
    () => users?.filter(user => user.active) || [],
    [users]
  );
 
  if (!filteredUsers.length) {
    return <div>暂无活跃用户</div>;
  }
 
  return (
    <div className="user-list">
      {filteredUsers.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
});

"分析这个React项目的组件架构，找出可以优化的地方"
"检查所有使用useState的组件，是否有性能问题"
"找到项目中所有的API调用，统一错误处理方式"

"将这个类组件重构为函数组件，保持功能不变"
"优化这个组件的性能，减少不必要的重渲染"
"为这些函数添加TypeScript类型定义"

✅ 好的提示词：
"在这个React电商项目中，我需要创建一个产品搜索组件。
项目使用TypeScript、Tailwind CSS和React Query。
组件需要支持实时搜索、筛选和分页功能。
请参考现有的ProductCard组件的设计风格。"

❌ 不好的提示词：
"创建一个搜索组件"

✅ 好的提示词：
"重构UserProfile组件，要求：
1. 将类组件改为函数组件
2. 使用TypeScript严格模式
3. 添加loading和error状态
4. 实现数据缓存机制
5. 保持现有的API接口不变"

❌ 不好的提示词：
"优化这个组件"

// Claude生成的代码通常包含完善的错误处理
const fetchUserData = async (userId: string): Promise<User | null> => {
  try {
    if (!userId || typeof userId !== 'string') {
      throw new Error('Invalid user ID provided');
    }
 
    const response = await fetch(`/api/users/${userId}`);
 
    if (!response.ok) {
      if (response.status === 404) {
        return null; // User not found
      }
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
 
    const userData = await response.json();
    return validateUserData(userData) ? userData : null;
  } catch (error) {
    console.error('Failed to fetch user data:', error);
    throw error;
  }
};

// Claude会自动添加安全性考虑
const sanitizeInput = (input: string): string => {
  return input
    .replace(/[<>]/g, '') // 移除潜在的HTML标签
    .trim()
    .slice(0, 1000); // 限制长度
};
 
const handleUserInput = (userInput: string) => {
  const sanitized = sanitizeInput(userInput);
  // 进一步处理...
};

设计一个前端状态管理方案，项目要求：
- 项目类型：[电商/管理后台/社交应用]
- 数据复杂度：[简单/中等/复杂]
- 用户交互：[基础/丰富/实时]
- 性能要求：[标准/高性能/极致优化]
- 团队规模：[个人/小团队/大团队]

请提供：架构设计、数据流、状态策略、性能方案、类型定义、测试策略

分析以下前端代码的性能问题：
[粘贴代码]

请从以下角度分析：
1. 渲染性能 2. 内存使用 3. 网络优化
4. 代码分割 5. 缓存策略 6. 用户体验

并提供具体的优化建议和实现方案。

对以下前端代码进行安全审计：
[粘贴代码]

检查项目：XSS漏洞、CSRF防护、输入验证、数据泄露、依赖安全、认证授权
请提供详细的安全报告和修复建议。

// 创建一个React Hook用于管理购物车状态
// 包含添加商品、删除商品、更新数量、计算总价等功能
// 使用localStorage持久化数据
const useShoppingCart = () => {
  // Copilot会自动生成完整的Hook实现
};

// 先写测试用例，Copilot会根据测试生成实现
describe('UserService', () => {
  it('should validate user email format', () => {
    expect(UserService.validateEmail('test@example.com')).toBe(true);
    expect(UserService.validateEmail('invalid-email')).toBe(false);
  });
});
 
// Copilot会根据测试用例生成UserService的实现

// 先定义TypeScript接口，Copilot会生成符合类型的实现
interface UserRepository {
  findById(id: string): Promise<User | null>;
  create(userData: Omit<User, 'id' | 'createdAt' | 'updatedAt'>): Promise<User>;
  update(id: string, userData: Partial<User>): Promise<User>;
  delete(id: string): Promise<void>;
}
 
// Copilot会生成符合接口的实现
class DatabaseUserRepository implements UserRepository {
  // 实现会自动生成
}

{
  "aiTools": {
    "cursor": {
      "model": "claude-3.5-sonnet",
      "temperature": 0.7,
      "maxTokens": 4000
    },
    "copilot": {
      "suggestions": "contextual",
      "autoComplete": true,
      "codeReview": "on-save"
    },
    "claude": {
      "reviewLevel": "strict",
      "securityFocus": true,
      "performanceAnalysis": true
    }
  }
}