二十七,前端开发特供：AI生成React组件的高级技巧

本文链接：https://blog.csdn.net/2401_88760782/article/details/146288218

前端开发特供：AI生成React组件的高级技巧

“不是所有的React组件都值得手写，但每一个组件都值得精心设计。” —— 一位资深前端架构师的洞察

引言：当AI遇上React开发

周一早晨，张工打开电脑，面对着一个紧迫的任务：为公司的电商平台开发一套全新的产品详情页组件。这个组件需要支持多种布局、响应式设计、性能优化，还要兼容各种浏览器和设备。按照以往的经验，这至少需要三天时间。

他打开了AI编程助手，输入了简短的需求描述。几秒钟后，AI生成了一个基础的React组件。张工复制粘贴，做了一些调整，然后继续让AI帮他完善功能。到下午三点，整个产品详情页已经完成，包括所有边缘情况处理和性能优化。

与此同时，同部门的李工也在使用AI开发一个购物车组件。然而，他生成的代码充满了不必要的复杂性，性能表现差强人意，还存在多个用户体验问题。

这两位开发者之间的关键区别是什么？

根据2024年Stack Overflow的开发者调查，89%的前端开发者现在使用AI编程助手，但只有27%的人认为它显著提高了组件开发的质量和效率。核心问题不在于AI工具本身，而在于开发者如何引导AI生成高质量的React组件。

本文将揭示顶尖前端开发者如何利用AI生成优质React组件的系统方法，从根本上改变你与AI编程助手的协作方式。无论你是经验丰富的React专家还是刚入行的前端新手，这些方法都将帮助你大幅提升组件开发效率，同时保持代码质量和可维护性。

第一部分：理解AI生成React组件的基础

当前AI在React开发中的能力边界

在深入高级技巧之前，首先需要清晰认识当前AI在React组件生成方面的能力和局限：

AI的强项：

生成标准化的组件结构
实现常见UI模式和交互逻辑
应用基本的React最佳实践
生成CSS/样式代码
处理简单的状态管理

AI的弱项：

理解特定业务领域的复杂需求
优化复杂组件的性能
实现高度定制化的UI/UX
处理复杂的状态管理和数据流
确保跨浏览器和设备的兼容性

根据OpenAI的研究，当前的AI模型在生成基础React组件时准确率可达90%以上，但在处理复杂组件时，准确率下降到60%左右。

React组件的复杂性维度

React组件的复杂性通常体现在五个关键维度：

结构复杂性：组件的DOM结构和嵌套层次
交互复杂性：用户交互和事件处理逻辑
状态复杂性：组件内部状态和全局状态管理
样式复杂性：CSS样式、动画和响应式设计
性能复杂性：渲染优化和资源管理

AI在处理这些不同类型的复杂性时表现各异。例如，当前的AI模型在处理结构和样式复杂性方面相对擅长，但在处理状态和性能复杂性时可能表现不佳。

关键洞察：成功使用AI生成React组件的核心在于理解这些复杂性维度，并据此调整与AI的协作策略。

第二部分：准备工作——设置AI成功的基础

组件需求的结构化描述

与AI协作开发React组件的第一步是提供结构化的组件需求描述。许多开发者的错误在于提供过于笼统或不完整的需求描述。

有效的组件需求描述应包含六个关键要素：

功能目标：组件的核心功能和用途
UI/UX规范：视觉设计和用户体验要求
数据结构：组件需要处理的数据格式
交互行为：用户交互和响应逻辑
技术约束：框架版本、依赖库和兼容性要求
性能期望：加载时间、渲染性能等指标

实例对比：

低效需求描述：

"我需要一个产品卡片组件，显示产品信息，可以添加到购物车。"

高效需求描述：

组件：产品卡片(ProductCard)

功能目标：
- 展示单个产品的关键信息
- 支持用户快速添加产品到购物车
- 显示产品库存和折扣信息

UI/UX规范：
- 卡片式设计，圆角8px，阴影效果
- 产品图片在上，信息在下
- 悬停时显示快速操作按钮
- 库存不足时视觉提示
- 支持响应式布局（移动端、平板、桌面）

数据结构：
{
  id: string,
  name: string,
  price: number,
  discountPrice?: number,
  imageUrl: string,
  rating: number,
  reviewCount: number,
  stock: number,
  isNew?: boolean,
  tags?: string[]
}

交互行为：
- 点击卡片进入产品详情页
- 点击"添加到购物车"按钮直接添加（无需跳转）
- 添加成功显示简短反馈
- 库存不足时"添加到购物车"按钮禁用

技术约束：
- React 18 + TypeScript
- 使用Styled Components或Tailwind CSS
- 支持主题切换（暗/亮模式）
- 兼容主流浏览器（Chrome, Firefox, Safari, Edge）

性能期望：
- 首次渲染时间<100ms
- 支持懒加载产品图片
- 最小化不必要的重渲染

专业洞见：需求描述的结构化程度直接影响AI生成组件的质量。根据Vercel的一项研究，结构化需求描述可以将AI生成组件的可用性提高42%，减少后续修改的时间成本达58%。

技术栈和依赖的明确说明

除了组件需求，还需要明确指定技术栈和依赖库，这对于生成兼容且高效的代码至关重要：

技术栈详情：
- React 18.2.0
- TypeScript 5.0+
- 样式解决方案：Tailwind CSS 3.3.0
- 状态管理：React Context API（小型组件）或 Redux Toolkit（复杂组件）
- UI组件库：使用公司内部组件库@company/ui-kit@2.5.0
- 图标库：使用React Icons（ri-icons）
- 动画：使用Framer Motion 10.12.0
- 表单处理：React Hook Form 7.45.0
- 数据获取：React Query 4.28.0

开发规范：
- 使用函数组件和React Hooks
- 遵循ESLint公司规范（extends: ['@company/eslint-config']）
- 组件文件使用.tsx扩展名
- 样式文件使用.module.css或styled-components
- 测试框架：Jest + React Testing Library

专业洞见：明确的技术栈说明不仅帮助AI生成兼容代码，还能确保生成的组件符合团队的开发规范和最佳实践。

第三部分：组件结构设计——从骨架到细节

组件分层策略

高质量的React组件通常遵循清晰的分层结构。与AI协作时，明确的分层策略可以显著提升组件质量：

四层组件结构模型：

展示层(Presentation)：纯UI渲染，无状态或极简状态
逻辑层(Logic)：处理组件内部状态和业务逻辑
数据层(Data)：处理数据获取、转换和持久化
集成层(Integration)：处理与外部系统和全局状态的交互

实例：电商产品列表的分层实现

// 1. 展示层组件 - ProductCard.tsx
const ProductCard = ({ product, onAddToCart, isInCart }) => (
  <div className="product-card">
    <img src={product.imageUrl} alt={product.name} />
    <h3>{product.name}</h3>
    <div className="price">${product.price}</div>
    <button 
      onClick={onAddToCart} 
      disabled={isInCart || product.stock <= 0}
    >
      {isInCart ? 'In Cart' : 'Add to Cart'}
    </button>
  </div>
);

// 2. 逻辑层组件 - ProductCardContainer.tsx
const ProductCardContainer = ({ product, cartItems, addToCart }) => {
  const isInCart = cartItems.some(item => item.id === product.id);
  
  const handleAddToCart = () => {
    if (product.stock > 0 && !isInCart) {
      addToCart(product);
      // 可以添加其他逻辑，如分析事件触发
    }
  };
  
  return (
    <ProductCard 
      product={product}
      onAddToCart={handleAddToCart}
      isInCart={isInCart}
    />
  );
};

// 3. 数据层组件 - ProductCardWithData.tsx
const ProductCardWithData = ({ productId }) => {
  const { data: product, isLoading, error } = useQuery(
    ['product', productId],
    () => fetchProductById(productId)
  );
  
  const { cartItems, addToCart } = useCart(); // 自定义hook获取购物车数据
  
  if (isLoading) return <ProductCardSkeleton />;
  if (error) return <ErrorDisplay error={error} />;
  
  return (
    <ProductCardContainer 
      product={product}
      cartItems={cartItems}
      addToCart={addToCart}
    />
  );
};

// 4. 集成层组件 - ConnectedProductCard.tsx
const ConnectedProductCard = ({ productId }) => {
  // 处理全局主题、国际化、特性开关等
  const { theme } = useTheme();
  const { language } = useI18n();
  const { isFeatureEnabled } = useFeatureFlags();
  
  // 条件渲染或功能调整
  if (!isFeatureEnabled('product-cards')) {
    return null;
  }
  
  return (
    <ThemeProvider theme={theme}>
      <I18nProvider language={language}>
        <ProductCardWithData productId={productId} />
      </I18nProvider>
    </ThemeProvider>
  );
};

与AI协作的分层策略：

先让AI生成展示层组件（纯UI）
然后添加逻辑层处理交互和状态
再添加数据层处理数据流
最后添加集成层处理全局关注点

专业洞见：分层设计不仅提高组件的可维护性，还使AI生成的代码更加模块化和可测试。根据Facebook工程团队的研究，分层设计的组件比单体组件平均减少47%的bug，并提高35%的代码复用率。

组件接口设计

与AI协作开发React组件时，清晰定义组件接口（props和事件）至关重要：

组件接口设计原则：

最小化必需props：减少必需的props数量，增加可选props
使用合理默认值：为可选props提供合理的默认值
类型严格定义：使用TypeScript或PropTypes严格定义类型
单一职责：每个prop应该服务于单一目的
命名一致性：遵循一致的命名约定（如onXxx表示事件处理器）

实例：产品卡片组件的接口设计

// 不良接口设计
interface BadProductCardProps {
  productData: any; // 类型不明确
  clickHandler: Function; // 过于宽泛
  style: object; // 不具体
  mode: string; // 不明确的枚举
}

// 优良接口设计
interface ProductImage {
  src: string;
  alt: string;
  width?: number;
  height?: number;
}

type ProductCardSize = 'small' | 'medium' | 'large';
type ProductCardVariant = 'default' | 'featured' | 'compact';

interface ProductCardProps {
  // 核心数据
  id: string;
  title: string;
  price: number;
  discountPrice?: number;
  image: ProductImage;
  
  // 可选显示内容
  description?: string;
  rating?: number;
  reviewCount?: number;
  tags?: string[];
  badge?: React.ReactNode;
  
  // 样式和变体
  size?: ProductCardSize;
  variant?: ProductCardVariant;
  className?: string;
  
  // 状态
  isInStock?: boolean;
  isInCart?: boolean;
  isFavorite?: boolean;
  isLoading?: boolean;
  
  // 事件处理
  onAddToCart?: (id: string) => void;
  onAddToFavorite?: (id: string) => void;
  onClick?: (id: string) => void;
  
  // 自定义渲染
  renderFooter?: (product: {id: string, price: number}) => React.ReactNode;
}

// 默认值
const defaultProps: Partial<ProductCardProps> = {
  size: 'medium',
  variant: 'default',
  isInStock: true,
  isInCart: false,
  isFavorite: false,
  isLoading: false
};

与AI协作定义接口的技巧：

先定义核心数据props
添加UI控制props（大小、变体等）
添加状态相关props
添加事件处理props
添加自定义渲染props（高级用例）

专业洞见：良好的接口设计是组件可重用性和可维护性的基础。根据Airbnb前端团队的经验，投入10%的时间在接口设计上可以减少30%的后期修改和重构工作。

第四部分：状态管理——复杂交互的核心

组件状态设计模式

React组件的状态管理是最具挑战性的方面之一，也是AI生成代码常见的薄弱环节。掌握状态设计模式可以显著提升AI生成组件的质量：

五种核心状态设计模式：

单一状态源：将相关状态合并为单一对象
状态提升：将共享状态提升到最近的共同父组件
状态下推：将非共享状态下推到子组件
状态机模式：使用有限状态机管理复杂UI状态
派生状态模式：从主状态派生计算次要状态

实例：购物车项目组件的状态设计

// 1. 单一状态源模式
// 不良实践
const CartItem = () => {
  const [quantity, setQuantity] = useState(1);
  const [isEditing, setIsEditing] = useState(false);
  const [error, setError] = useState(null);
  
  // 状态更新分散，容易导致不一致
};

// 良好实践
const CartItem = () => {
  const [state, setState] = useState({
    quantity: 1,
    isEditing: false,
    error: null
  });
  
  const updateState = (newState) => {
    setState(prev => ({ ...prev, ...newState }));
  };
  
  // 状态更新集中，保持一致性
};

// 2. 状态机模式
const CartItem = () => {
  const [state, send] = useReducer(cartItemReducer, {
    status: 'idle', // 'idle' | 'editing' | 'updating' | 'error'
    quantity: 1,
    error: null,
    previousQuantity: 1
  });
  
  const cartItemReducer = (state, event) => {
    switch (state.status) {
      case 'idle':
        if (event.type === 'EDIT') {
          return { ...state, status: 'editing', previousQuantity: state.quantity };
        }
        break;
      case 'editing':
        if (event.type === 'SAVE') {
          return { ...state, status: 'updating' };
        }
        if (event.type === 'CANCEL') {
          return { 
            ...state, 
            status: 'idle', 
            quantity: state.previousQuantity 
          };
        }
        break;
      case 'updating':
        if (event.type === 'SUCCESS') {
          return { ...state, status: 'idle' };
        }
        if (event.type === 'ERROR') {
          return { 
            ...state, 
            status: 'error', 
            error: event.error 
          };
        }
        break;
      case 'error':
        if (event.type === 'RETRY') {
          return { ...state, status: 'updating', error: null };
        }
        if (event.type === 'CANCEL') {
          return { 
            ...state, 
            status: 'idle', 
            quantity: state.previousQuantity, 
            error: null 
          };
        }
        break;
    }
    return state;
  };
};

// 3. 派生状态模式
const ProductCard = ({ product, cartItems }) => {
  // 主状态
  const [quantity, setQuantity] = useState(1);
  
  // 派生状态
  const isInStock = product.stock > 0;
  const isInCart = cartItems.some(item => item.id === product.id);
  const canAddToCart = isInStock && !isInCart && quantity <= product.stock;
  const totalPrice = product.price * quantity;
  const discount = product.discountPrice 
    ? (product.price - product.discountPrice) * quantity 
    : 0;
  
  // 使用派生状态而非额外的useState
};

与AI协作的状态设计策略：

明确定义组件的所有可能状态
确定状态之间的转换规则和触发条件
选择适合复杂度的状态管理模式
为AI提供状态转换的具体示例

专业洞见：状态设计是React组件最容易出错的部分。根据Microsoft的一项研究，超过60%的React组件bug与状态管理相关。使用正确的状态设计模式可以减少40%的常见错误。

与外部状态管理的集成

复杂React应用通常使用外部状态管理库。与AI协作时，明确指导如何集成外部状态管理是提升组件质量的关键：

常见外部状态管理方案：

Context API：轻量级全局状态
Redux/Redux Toolkit：复杂全局状态
MobX：响应式状态管理
Recoil：原子化状态管理
Zustand：简化的状态管理
Jotai：原始化状态管理

实例：与Redux集成的产品组件

// 指导AI生成与Redux集成的组件
/*
组件需求：产品详情组件，需要：
1. 从Redux获取产品数据
2. 从Redux获取购物车状态
3. 分发添加到购物车的action
4. 处理加载、错误和成功状态
*/

// 期望AI生成的代码结构
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { 
  fetchProductById, 
  addToCart, 
  selectProductById,
  selectIsProductLoading,
  selectProductError,
  selectIsInCart
} from '../store/productSlice';

const ProductDetail = ({ productId }) => {
  const dispatch = useDispatch();
  
  // 从Redux获取状态
  const product = useSelector(state => selectProductById(state, productId));
  const isLoading = useSelector(state => selectIsProductLoading(state, productId));
  const error = useSelector(state => selectProductError(state, productId));
  const isInCart = useSelector(state => selectIsInCart(state, productId));
  
  // 加载产品数据
  useEffect(() => {
    if (productId) {
      dispatch(fetchProductById(productId));
    }
  }, [productId, dispatch]);
  
  // 处理添加到购物车
  const handleAddToCart = () => {
    dispatch(addToCart(product));
  };
  
  // 渲染不同状态
  if (isLoading) return <ProductSkeleton />;
  if (error) return <ErrorDisplay message={error} />;
  if (!product) return <NotFound />;
  
  return (
    <div className="product-detail">
      {/* 产品详情UI */}
      <button 
        onClick={handleAddToCart}
        disabled={isInCart}
      >
        {isInCart ? 'In Cart' : 'Add to Cart'}
      </button>
    </div>
  );
};

与AI协作集成外部状态的技巧：

明确指定使用哪种状态管理库
提供store/状态结构的示例
说明需要访问哪些状态和action
提供选择器(selectors)的命名和用途
说明状态变化时组件应如何响应

专业洞见：不同状态管理库有不同的最佳实践和模式。根据2024年React生态调查，Redux仍是最流行的状态管理解决方案(34%)，但Zustand(19%)和Jotai(12%)增长最快。为AI提供特定库的集成模式可以显著提高生成代码的质量。

第五部分：性能优化——从生成到精细调优

组件性能优化模式

AI生成的React组件通常在性能方面存在改进空间。指导AI应用正确的性能优化模式可以显著提升组件质量：

七种关键性能优化模式：

记忆化(Memoization)：使用React.memo、useMemo和useCallback
代码分割(Code Splitting)：使用React.lazy和Suspense
虚拟化(Virtualization)：处理长列表
懒加载(Lazy Loading)：延迟加载非关键资源
状态批处理(State Batching)：合并状态更新
渲染优化(Render Optimization)：减少不必要的渲染
计算优化(Computation Optimization)：优化昂贵计算

实例：产品列表的性能优化

// 基础版本（未优化）
const ProductList = ({ products }) => {
  return (
    <div className="product-list">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

// 优化版本
import React, { useMemo, useCallback, useState } from 'react';
import { FixedSizeList } from 'react-window';
import { ProductCard } from './ProductCard';

const MemoizedProductCard = React.memo(ProductCard);

const ProductList = ({ products, onProductClick }) => {
  // 1. 记忆化派生数据
  const sortedProducts = useMemo(() => {
    return [...products].sort((a, b) => a.price - b.price);
  }, [products]);
  
  // 2. 记忆化回调函数
  const handleProductClick = useCallback((productId) => {
    onProductClick(productId);
    // 分析或日志记录
  }, [onProductClick]);
  
  // 3. 虚拟化长列表
  const ProductListVirtualized = useMemo(() => {
    if (products.length > 100) {
      const Row = ({ index, style }) => (
        <div style={style}>
          <MemoizedProductCard 
            product={sortedProducts[index]}
            onClick={handleProductClick}
          />
        </div>
      );
      
      return (
        <FixedSizeList
          height={800}
          width="100%"
          itemCount={sortedProducts.length}
          itemSize={320}
        >
          {Row}
        </FixedSizeList>
      );
    }
    
    // 4. 对于短列表，使用普通渲染但保持记忆化
    return (
      <div className="product-list">
        {sortedProducts.map(product => (
          <MemoizedProductCard 
            key={product.id} 
            product={product}
            onClick={handleProductClick}
          />
        ))}
      </div>
    );
  }, [sortedProducts, handleProductClick]);
  
  return (
    <>
      {/* 5. 代码分割和懒加载 */}
      <Suspense fallback={<div>Loading filters...</div>}>
        <ProductFilters products={products} />
      </Suspense>
      
      {ProductListVirtualized}
    </>
  );
};

// 组件导出时应用React.memo
export default React.memo(ProductList);

与AI协作的性能优化策略：

明确指出性能关注点（如长列表、频繁更新等）
指定适用的优化技术
提供性能指标和目标
要求AI解释其优化决策

专业洞见：过早优化是常见陷阱。根据React核心团队的建议，应先构建功能正确的组件，然后使用React DevTools Profiler识别性能瓶颈，再有针对性地应用优化。不必要的优化可能增加代码复杂性而不带来明显收益。

性能测量与调优

除了应用优化模式，指导AI生成性能测量和调优代码也很重要：

性能测量与调优策略：

组件分析：使用React Profiler API
性能标记：使用Performance API
渲染计数：跟踪组件重渲染
条件优化：基于性能指标应用优化

实例：带性能测量的产品列表

import React, { Profiler, useEffect, useRef } from 'react';

const ProductListWithProfiling = ({ products }) => {
  // 1. 使用useRef跟踪渲染次数
  const renderCount = useRef(0);
  
  // 2. 记录组件挂载和更新时间
  const mountTimeRef = useRef(performance.now());
  useEffect(() => {
    const renderTime = performance.now() - mountTimeRef.current;
    console.log(`ProductList rendered in ${renderTime.toFixed(2)}ms`);
    
    // 性能标记
    performance.mark('product-list-rendered');
    
    return () => {
      mountTimeRef.current = performance.now();
    };
  });
  
  ```jsx
  // 3. Profiler回调函数
  const handleProfilerData = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
    // 仅在开发环境记录性能数据
    if (process.env.NODE_ENV === 'development') {
      console.log(`[Profiler] ${id} - ${phase}`);
      console.log(`Actual duration: ${actualDuration.toFixed(2)}ms`);
      console.log(`Base duration: ${baseDuration.toFixed(2)}ms`);
      
      // 条件优化提示
      if (actualDuration > 16) { // 16ms = 60fps的帧预算
        console.warn('Render took too long, consider optimizing this component');
      }
      
      // 可以将性能数据发送到分析服务
      // logPerformanceMetric('product-list-render', actualDuration);
    }
  };
  
  // 渲染计数更新
  useEffect(() => {
    renderCount.current += 1;
  });
  
  return (
    <Profiler id="ProductList" onRender={handleProfilerData}>
      <div className="product-list">
        {/* 开发环境显示渲染计数 */}
        {process.env.NODE_ENV === 'development' && (
          <div className="debug-info">
            Render count: {renderCount.current}
          </div>
        )}
        
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </Profiler>
  );
};

// 4. 条件优化的高阶组件
const withPerformanceOptimization = (Component, options = {}) => {
  const {
    renderThreshold = 16, // ms
    listLengthThreshold = 100,
    enableVirtualization = true
  } = options;
  
  return (props) => {
    const [isOptimized, setIsOptimized] = useState(false);
    const renderDurations = useRef([]);
    
    const handleProfilerData = (id, phase, actualDuration) => {
      renderDurations.current.push(actualDuration);
      
      // 如果最近3次渲染平均超过阈值，启用优化
      if (renderDurations.current.length >= 3) {
        const recentDurations = renderDurations.current.slice(-3);
        const avgDuration = recentDurations.reduce((sum, d) => sum + d, 0) / recentDurations.length;
        
        if (avgDuration > renderThreshold && !isOptimized) {
          console.log(`Enabling performance optimizations for ${id}`);
          setIsOptimized(true);
        }
      }
    };
    
    // 根据列表长度决定是否需要优化
    useEffect(() => {
      if (props.items && props.items.length > listLengthThreshold && !isOptimized) {
        setIsOptimized(true);
      }
    }, [props.items, isOptimized]);
    
    return (
      <Profiler id={Component.displayName || 'OptimizedComponent'} onRender={handleProfilerData}>
        <Component {...props} isOptimized={isOptimized} />
      </Profiler>
    );
  };
};

// 使用条件优化HOC
const OptimizedProductList = withPerformanceOptimization(ProductListWithProfiling, {
  renderThreshold: 20,
  listLengthThreshold: 50
});

与AI协作的性能测量策略：

要求AI生成带性能测量代码的组件
指定关注的性能指标（渲染时间、内存使用等）
要求条件优化逻辑
分离开发环境和生产环境的性能代码

专业洞见：性能优化应该是数据驱动的。根据Netflix前端团队的实践，建立性能基准和持续监测比盲目应用优化技术更重要。生产环境的真实用户性能数据应该指导优化决策。

第六部分：高级组件模式——提升复用性和灵活性

复合组件模式

复合组件模式是React中最强大的设计模式之一，能显著提高组件的灵活性和可组合性：

复合组件的核心特点：

主组件提供上下文和协调
子组件作为独立但协同工作的单元
使用React Context在组件间共享状态
提供清晰的组件API和使用模式

实例：AI生成的复合组件模式

// 指导AI生成复合组件
/*
需求：创建一个Product复合组件，包含以下部分：
- Product.Image：产品图片
- Product.Info：产品基本信息
- Product.Price：价格显示
- Product.Actions：操作按钮
- Product.Reviews：评论摘要

组件应支持多种布局和自定义配置
*/

// 期望AI生成的复合组件代码
import React, { createContext, useContext, useState } from 'react';

// 1. 创建上下文
const ProductContext = createContext(null);

// 2. 主组件
const Product = ({ product, layout = 'standard', children }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  
  // 提供共享状态和方法
  const contextValue = {
    product,
    layout,
    isExpanded,
    toggleExpand: () => setIsExpanded(prev => !prev),
  };
  
  return (
    <ProductContext.Provider value={contextValue}>
      <div className={`product product-${layout} ${isExpanded ? 'expanded' : ''}`}>
        {children}
      </div>
    </ProductContext.Provider>
  );
};

// 3. 使用上下文的钩子
const useProduct = () => {
  const context = useContext(ProductContext);
  if (!context) {
    throw new Error('Product compound components must be used within a Product component');
  }
  return context;
};

// 4. 子组件
Product.Image = ({ className, ...props }) => {
  const { product, layout } = useProduct();
  
  return (
    <div className={`product-image product-image-${layout} ${className || ''}`}>
      <img 
        src={product.imageUrl} 
        alt={product.name}
        loading="lazy"
        {...props}
      />
      {product.isNew && <span className="badge-new">New</span>}
    </div>
  );
};

Product.Info = ({ className, showDescription = true, ...props }) => {
  const { product, isExpanded } = useProduct();
  
  return (
    <div className={`product-info ${className || ''}`} {...props}>
      <h3 className="product-name">{product.name}</h3>
      {(showDescription && (isExpanded || product.description.length < 100)) && (
        <p className="product-description">{product.description}</p>
      )}
      <div className="product-meta">
        {product.category && <span className="category">{product.category}</span>}
        {product.brand && <span className="brand">{product.brand}</span>}
      </div>
    </div>
  );
};

Product.Price = ({ className, showDiscount = true, ...props }) => {
  const { product } = useProduct();
  const hasDiscount = product.discountPrice && product.discountPrice < product.price;
  
  return (
    <div className={`product-price ${hasDiscount ? 'has-discount' : ''} ${className || ''}`} {...props}>
      {hasDiscount && showDiscount ? (
        <>
          <span className="original-price">${product.price.toFixed(2)}</span>
          <span className="discount-price">${product.discountPrice.toFixed(2)}</span>
          <span className="discount-percentage">
            {Math.round((1 - product.discountPrice / product.price) * 100)}% off
          </span>
        </>
      ) : (
        <span className="current-price">${product.price.toFixed(2)}</span>
      )}
    </div>
  );
};

Product.Actions = ({ className, ...props }) => {
  const { product, toggleExpand, isExpanded } = useProduct();
  
  return (
    <div className={`product-actions ${className || ''}`} {...props}>
      <button className="btn-add-to-cart" disabled={!product.inStock}>
        {product.inStock ? 'Add to Cart' : 'Out of Stock'}
      </button>
      <button className="btn-wishlist">
        Add to Wishlist
      </button>
      <button className="btn-expand" onClick={toggleExpand}>
        {isExpanded ? 'Show Less' : 'Show More'}
      </button>
    </div>
  );
};

Product.Reviews = ({ className, maxReviews = 2, ...props }) => {
  const { product, isExpanded } = useProduct();
  const hasReviews = product.reviews && product.reviews.length > 0;
  const displayReviews = isExpanded 
    ? product.reviews 
    : product.reviews?.slice(0, maxReviews);
  
  if (!hasReviews) return null;
  
  return (
    <div className={`product-reviews ${className || ''}`} {...props}>
      <div className="review-summary">
        <span className="review-rating">{product.rating.toFixed(1)}</span>
        <span className="review-count">({product.reviews.length} reviews)</span>
      </div>
      
      {displayReviews.map(review => (
        <div key={review.id} className="review-item">
          <div className="review-header">
            <span className="review-author">{review.author}</span>
            <span className="review-rating">{review.rating}/5</span>
          </div>
          <p className="review-content">{review.content}</p>
        </div>
      ))}
    </div>
  );
};

// 5. 使用示例
const ProductDisplay = ({ product }) => (
  <Product product={product} layout="horizontal">
    <div className="product-left">
      <Product.Image />
    </div>
    <div className="product-right">
      <Product.Info showDescription={true} />
      <Product.Price showDiscount={true} />
      <Product.Actions />
      <Product.Reviews maxReviews={2} />
    </div>
  </Product>
);

与AI协作创建复合组件的技巧：

明确定义组件的组成部分和职责
说明组件间需要共享的状态和行为
提供不同使用场景和布局示例
指定自定义选项和扩展点

专业洞见：复合组件模式在React生态系统中越来越流行，被广泛用于UI库如Material-UI、Chakra UI和Ant Design。这种模式的主要优势是提供了声明式API，同时保持了高度的灵活性和可定制性。

渲染属性和高阶组件

渲染属性(Render Props)和高阶组件(HOC)是React中强大的代码复用模式，可以指导AI生成更灵活的组件：

渲染属性模式：

// 指导AI生成渲染属性组件
/*
需求：创建一个ProductData组件，使用渲染属性模式：
- 负责加载产品数据和处理加载状态
- 提供产品数据、加载状态和错误信息给子组件
- 支持刷新和分页功能
*/

// 期望AI生成的渲染属性组件
const ProductData = ({ 
  productId, 
  children, 
  render = children 
}) => {
  const [state, setState] = useState({
    product: null,
    isLoading: true,
    error: null,
    page: 1
  });
  
  const fetchProduct = useCallback(async (id, page = 1) => {
    setState(prev => ({ ...prev, isLoading: true, error: null }));
    
    try {
      const data = await api.fetchProduct(id, { page });
      setState(prev => ({ 
        ...prev, 
        product: data, 
        isLoading: false,
        page
      }));
    } catch (error) {
      setState(prev => ({ 
        ...prev, 
        error: error.message, 
        isLoading: false 
      }));
    }
  }, []);
  
  useEffect(() => {
    if (productId) {
      fetchProduct(productId, state.page);
    }
  }, [productId, fetchProduct]);
  
  const refresh = () => fetchProduct(productId, state.page);
  
  const nextPage = () => fetchProduct(productId, state.page + 1);
  
  const prevPage = () => {
    if (state.page > 1) {
      fetchProduct(productId, state.page - 1);
    }
  };
  
  // 渲染属性模式
  return render({
    ...state,
    refresh,
    nextPage,
    prevPage,
    hasMore: state.product?.hasMore || false
  });
};

// 使用示例
<ProductData productId="123">
  {({ product, isLoading, error, refresh, nextPage, prevPage, hasMore }) => (
    <div className="product-container">
      {isLoading && <Spinner />}
      {error && <ErrorMessage message={error} onRetry={refresh} />}
      {product && (
        <>
          <ProductDetails product={product} />
          <div className="pagination">
            <button onClick={prevPage} disabled={state.page === 1}>
              Previous
            </button>
            <span>Page {state.page}</span>
            <button onClick={nextPage} disabled={!hasMore}>
              Next
            </button>
          </div>
        </>
      )}
    </div>
  )}
</ProductData>

高阶组件模式：

// 指导AI生成高阶组件
/*
需求：创建一个withProductData高阶组件：
- 为任何组件注入产品数据和相关功能
- 处理加载、错误状态和数据刷新
- 支持配置选项
*/

// 期望AI生成的高阶组件
const withProductData = (
  WrappedComponent,
  options = {}
) => {
  const {
    loadingComponent: LoadingComponent = DefaultSpinner,
    errorComponent: ErrorComponent = DefaultError,
    autoRefresh = false,
    refreshInterval = 60000 // 1分钟
  } = options;
  
  const WithProductData = ({ productId, ...props }) => {
    const [state, setState] = useState({
      product: null,
      isLoading: true,
      error: null,
      lastFetched: null
    });
    
    const fetchProduct = useCallback(async () => {
      setState(prev => ({ ...prev, isLoading: true, error: null }));
      
      try {
        const data = await api.fetchProduct(productId);
        setState({
          product: data,
          isLoading: false,
          error: null,
          lastFetched: new Date()
        });
      } catch (error) {
        setState(prev => ({
          ...prev,
          error: error.message,
          isLoading: false
        }));
      }
    }, [productId]);
    
    // 初始加载
    useEffect(() => {
      fetchProduct();
    }, [fetchProduct]);
    
    // 自动刷新
    useEffect(() => {
      if (!autoRefresh) return;
      
      const intervalId = setInterval(fetchProduct, refreshInterval);
      return () => clearInterval(intervalId);
    }, [fetchProduct, refreshInterval]);
    
    // 渲染逻辑
    if (state.isLoading) {
      return <LoadingComponent />;
    }
    
    if (state.error) {
      return <ErrorComponent error={state.error} onRetry={fetchProduct} />;
    }
    
    // 注入产品数据和刷新方法
    return (
      <WrappedComponent
        {...props}
        product={state.product}
        refreshProduct={fetchProduct}
        lastFetched={state.lastFetched}
      />
    );
  };
  
  // 设置显示名称，便于调试
  WithProductData.displayName = `withProductData(${
    WrappedComponent.displayName || WrappedComponent.name || 'Component'
  })`;
  
  return WithProductData;
};

// 使用示例
const ProductDetails = ({ product, refreshProduct, lastFetched }) => (
  <div className="product-details">
    <h2>{product.name}</h2>
    <p>{product.description}</p>
    <div className="refresh-info">
      Last updated: {lastFetched.toLocaleTimeString()}
      <button onClick={refreshProduct}>Refresh</button>
    </div>
  </div>
);

// 应用高阶组件
const ProductDetailsWithData = withProductData(ProductDetails, {
  autoRefresh: true,
  refreshInterval: 300000 // 5分钟
});

// 使用增强后的组件
<ProductDetailsWithData productId="123" />

与AI协作的高级模式策略：

明确说明需要使用的模式（复合组件、渲染属性或HOC）
提供模式的具体应用场景和需求
说明需要封装的逻辑和状态
提供使用示例和预期行为

专业洞见：虽然Hooks已经成为React中主要的代码复用机制，但渲染属性和HOC在特定场景下仍然非常有价值。根据React核心团队成员Dan Abramov的观点，这些模式并不是被Hooks取代，而是与Hooks互补，特别是在需要控制渲染结构或组件层次时。

第七部分：样式与主题——从基础到高级定制

现代React样式解决方案

样式是React组件的重要部分，AI可以帮助生成各种样式解决方案的代码：

五种主流React样式方案：

CSS Modules：局部作用域的CSS
Styled Components：CSS-in-JS解决方案
Emotion：灵活的CSS-in-JS库
Tailwind CSS：功能类优先的CSS框架
CSS Variables：与任何方案结合使用的原生CSS变量

实例：使用不同样式方案的产品卡片

// 指导AI生成使用特定样式方案的组件
/*
需求：创建一个ProductCard组件，使用Tailwind CSS：
- 响应式设计（移动优先）
- 支持暗色/亮色模式
- 包含悬停和焦点状态
- 支持不同尺寸变体
*/

// 期望AI生成的Tailwind CSS组件
import React from 'react';

const sizeClasses = {
  small: 'max-w-xs p-3',
  medium: 'max-w-sm p-4',
  large: 'max-w-md p-5'
};

const ProductCard = ({
  product,
  size = 'medium',
  className = '',
  onAddToCart,
  onAddToWishlist
}) => {
  const { id, name, price, imageUrl, rating, reviewCount, inStock } = product;
  
  return (
    <div 
      className={`
        bg-white dark:bg-gray-800 
        rounded-lg shadow-md 
        transition-all duration-300
        hover:shadow-lg focus-within:ring-2 focus-within:ring-blue-400
        ${sizeClasses[size]}
        ${className}
      `}
    >
      {/* 产品图片 */}
      <div className="relative overflow-hidden rounded-t-lg aspect-w-1 aspect-h-1">
        <img 
          src={imageUrl} 
          alt={name}
          className="object-cover w-full h-full transition-transform duration-500 hover:scale-105"
          loading="lazy"
        />
        {!inStock && (
          <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
            <span className="px-3 py-1 text-sm font-medium text-white bg-red-500 rounded-full">
              Out of Stock
            </span>
          </div>
        )}
      </div>
      
      {/* 产品信息 */}
      <div className="p-4">
        <h3 className="mb-2 text-lg font-medium text-gray-900 dark:text-white truncate">
          {name}
        </h3>
        
        {/* 价格 */}
        <div className="mb-3 text-xl font-bold text-gray-900 dark:text-white">
          ${price.toFixed(2)}
        </div>
        
        {/* 评分 */}
        {rating && (
          <div className="flex items-center mb-3">
            <div className="flex text-yellow-400">
              {[1, 2, 3, 4, 5].map(star => (
                <svg 
                  key={star}
                  className={`w-5 h-5 ${star <= Math.round(rating) ? 'text-yellow-400' : 'text-gray-300'}`}
                  fill="currentColor" 
                  viewBox="0 0 20 20"
                >
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
              ))}
            </div>
            <span className="ml-2 text-sm text-gray-600 dark:text-gray-400">
              ({reviewCount} reviews)
            </span>
          </div>
        )}
        
        {/* 操作按钮 */}
        <div className="flex space-x-2">
          <button
            onClick={() => onAddToCart(id)}
            disabled={!inStock}
            className={`
              flex-1 px-4 py-2 text-sm font-medium text-white rounded-md
              focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
              ${inStock 
                ? 'bg-blue-600 hover:bg-blue-700' 
                : 'bg-gray-400 cursor-not-allowed'}
            `}
          >
            Add to Cart
          </button>
          
          <button
            onClick={() => onAddToWishlist(id)}
            className="p-2 text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300"
            aria-label="Add to wishlist"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductCard;

与AI协作的样式策略：

明确指定使用的样式解决方案
提供设计规范和视觉要求
说明响应式需求和断点
指定主题和变体支持
提供交互状态要求（悬停、焦点等）

专业洞见：根据2024年前端趋势调查，Tailwind CSS的使用率增长最快，已成为31%前端项目的首选样式解决方案。CSS-in-JS解决方案（如Styled Components和Emotion）仍然流行，但由于运行时性能考虑，越来越多的项目转向零运行时开销的解决方案，如Tailwind CSS和CSS Modules。

主题和设计系统集成

现代React应用通常使用主题和设计系统。指导AI生成与设计系统集成的组件可以显著提高代码质量：

主题集成策略：

主题提供者：使用ThemeProvider包装组件
主题消费：使用主题钩子或上下文访问主题
响应式主题：支持动态主题切换
主题变体：支持多种预定义主题

实例：与设计系统集成的组件

// 指导AI生成与设计系统集成的组件
/*
需求：创建一个ProductList组件，集成公司设计系统：
- 使用设计系统的颜色、间距和排版
- 支持暗色/亮色模式
- 使用设计系统的组件（Button、Card等）
- 遵循设计系统的响应式规则
*/

// 期望AI生成的设计系统集成组件
import React from 'react';
import { useTheme } from '@company/design-system';
import { 
  Card, 
  Button, 
  Badge, 
  Rating, 
  Grid, 
  Skeleton,
  useMediaQuery
} from '@company/design-system';

const ProductList = ({ 
  products, 
  isLoading, 
  onAddToCart,
  onViewDetails,
  layout = 'grid' // 'grid' | 'list'
}) => {
  // 1. 使用设计系统的主题
  const theme = useTheme();
  
  // 2. 使用设计系统的响应式工具
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md'));
  
  // 3. 根据屏幕尺寸调整布局
  const getColumnCount = () => {
    if (isMobile) return 1;
    if (isTablet) return 2;
    return layout === 'grid' ? 3 : 1;
  };
  
  // 4. 加载状态
  if (isLoading) {
    return (
      <Grid container spacing={theme.spacing(3)} columns={getColumnCount()}>
        {Array.from(new Array(6)).map((_, index) => (
          <Grid item xs={1} key={index}>
            <Skeleton variant="rectangular" height={300} />
          </Grid>
        ))}
      </Grid>
    );
  }
  
  // 5. 空状态
  if (!products || products.length === 0) {
    return (
      <Card 
        sx={{ 
          p: theme.spacing(4), 
          textAlign: 'center',
          backgroundColor: theme.palette.background.paper
        }}
      >
        <h3>No products found</h3>
        <p>Try adjusting your filters or search terms</p>
      </Card>
    );
  }
  
  // 6. 产品列表渲染
  return (
    <Grid 
      container 
      spacing={theme.spacing(3)} 
      columns={getColumnCount()}
      sx={{ 
        mt: theme.spacing(2) 
      }}
    >
      {products.map(product => (
        <Grid item xs={1} key={product.id}>
          <Card 
            elevation={1}
            sx={{
              height: '100%',
              display: 'flex',
              flexDirection: layout === 'list' ? 'row' : 'column',
              transition: theme.transitions.create(['box-shadow']),
              '&:hover': {
                boxShadow: theme.shadows[4]
              }
            }}
          >
            {/* 产品图片 */}
            <div 
              style={{
                flexBasis: layout === 'list' ? '30%' : 'auto',
                position: 'relative'
              }}
            >
              <img 
                src={product.imageUrl} 
                alt={product.name}
                style={{
                  width: '100%',
         
  ```jsx
                  height: layout === 'list' ? '100%' : 200,
                  objectFit: 'cover',
                  borderTopLeftRadius: theme.shape.borderRadius,
                  borderTopRightRadius: layout === 'list' ? 0 : theme.shape.borderRadius,
                  borderBottomLeftRadius: layout === 'list' ? theme.shape.borderRadius : 0
                }}
              />
              
              {/* 产品标签 */}
              {product.isNew && (
                <Badge 
                  color="primary" 
                  variant="filled"
                  sx={{
                    position: 'absolute',
                    top: theme.spacing(2),
                    left: theme.spacing(2)
                  }}
                >
                  New
                </Badge>
              )}
              
              {!product.inStock && (
                <Badge 
                  color="error" 
                  variant="filled"
                  sx={{
                    position: 'absolute',
                    top: theme.spacing(2),
                    right: theme.spacing(2)
                  }}
                >
                  Out of Stock
                </Badge>
              )}
            </div>
            
            {/* 产品信息 */}
            <div
              style={{
                padding: theme.spacing(3),
                display: 'flex',
                flexDirection: 'column',
                flexGrow: 1,
                justifyContent: 'space-between'
              }}
            >
              <div>
                <h3 
                  style={{
                    margin: 0,
                    marginBottom: theme.spacing(1),
                    color: theme.palette.text.primary,
                    fontSize: theme.typography.h6.fontSize,
                    fontWeight: theme.typography.fontWeightMedium
                  }}
                >
                  {product.name}
                </h3>
                
                {layout === 'list' && (
                  <p 
                    style={{
                      margin: `${theme.spacing(2)} 0`,
                      color: theme.palette.text.secondary,
                      fontSize: theme.typography.body2.fontSize
                    }}
                  >
                    {product.description}
                  </p>
                )}
                
                <div style={{ marginTop: theme.spacing(1) }}>
                  <Rating value={product.rating} readOnly size="small" />
                  <span 
                    style={{
                      marginLeft: theme.spacing(1),
                      color: theme.palette.text.secondary,
                      fontSize: theme.typography.caption.fontSize
                    }}
                  >
                    ({product.reviewCount})
                  </span>
                </div>
              </div>
              
              <div style={{ marginTop: theme.spacing(2) }}>
                <div 
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginBottom: theme.spacing(2)
                  }}
                >
                  <span 
                    style={{
                      fontSize: theme.typography.h6.fontSize,
                      fontWeight: theme.typography.fontWeightBold,
                      color: theme.palette.text.primary
                    }}
                  >
                    ${product.price.toFixed(2)}
                  </span>
                  
                  {product.discountPrice && (
                    <span 
                      style={{
                        marginLeft: theme.spacing(1),
                        textDecoration: 'line-through',
                        color: theme.palette.text.disabled,
                        fontSize: theme.typography.body2.fontSize
                      }}
                    >
                      ${product.originalPrice.toFixed(2)}
                    </span>
                  )}
                </div>
                
                <div 
                  style={{
                    display: 'flex',
                    gap: theme.spacing(1)
                  }}
                >
                  <Button
                    variant="contained"
                    color="primary"
                    disabled={!product.inStock}
                    onClick={() => onAddToCart(product.id)}
                    fullWidth={!isMobile || layout !== 'list'}
                    size={isMobile ? 'small' : 'medium'}
                  >
                    Add to Cart
                  </Button>
                  
                  <Button
                    variant="outlined"
                    color="secondary"
                    onClick={() => onViewDetails(product.id)}
                    fullWidth={!isMobile || layout !== 'list'}
                    size={isMobile ? 'small' : 'medium'}
                  >
                    Details
                  </Button>
                </div>
              </div>
            </div>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
};

export default ProductList;

与AI协作的设计系统集成策略：

提供设计系统的组件和API文档
明确主题结构和访问方式
说明响应式设计规则和断点
指定设计系统的变体和修饰符

专业洞见：设计系统集成是企业级React应用的关键要素。根据Forrester的研究，使用统一设计系统的团队开发速度提高了47%，代码一致性提高了68%。然而，设计系统的复杂性也可能成为障碍——过于严格的系统可能限制创新，而过于松散的系统则可能导致不一致。

第八部分：测试与质量保障——确保组件可靠性

组件测试策略

高质量的React组件应该有良好的测试覆盖。指导AI生成测试代码是提高组件质量的关键：

组件测试类型：

单元测试：测试独立函数和小型组件
组件测试：测试组件渲染和交互
集成测试：测试组件与其依赖的交互
快照测试：捕获组件渲染输出变化

实例：产品卡片组件的测试

// 指导AI生成组件测试
/*
需求：为ProductCard组件创建测试：
- 使用React Testing Library
- 测试不同状态和交互
- 包括快照测试
- 测试边缘情况
*/

// 期望AI生成的测试代码
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import ProductCard from './ProductCard';

// 模拟数据
const mockProduct = {
  id: 'prod-123',
  name: 'Test Product',
  price: 99.99,
  imageUrl: '/images/test-product.jpg',
  rating: 4.5,
  reviewCount: 123,
  inStock: true
};

const mockOutOfStockProduct = {
  ...mockProduct,
  inStock: false
};

// 模拟函数
const mockAddToCart = jest.fn();
const mockAddToWishlist = jest.fn();

describe('ProductCard Component', () => {
  // 重置模拟函数
  beforeEach(() => {
    mockAddToCart.mockClear();
    mockAddToWishlist.mockClear();
  });
  
  // 1. 基本渲染测试
  it('renders product information correctly', () => {
    render(
      <ProductCard 
        product={mockProduct}
        onAddToCart={mockAddToCart}
        onAddToWishlist={mockAddToWishlist}
      />
    );
    
    // 验证产品信息
    expect(screen.getByText('Test Product')).toBeInTheDocument();
    expect(screen.getByText('$99.99')).toBeInTheDocument();
    expect(screen.getByText('(123 reviews)')).toBeInTheDocument();
    expect(screen.getByAltText('Test Product')).toHaveAttribute('src', '/images/test-product.jpg');
    
    // 验证按钮存在
    expect(screen.getByRole('button', { name: /add to cart/i })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /add to wishlist/i })).toBeInTheDocument();
  });
  
  // 2. 交互测试
  it('calls onAddToCart when Add to Cart button is clicked', async () => {
    render(
      <ProductCard 
        product={mockProduct}
        onAddToCart={mockAddToCart}
        onAddToWishlist={mockAddToWishlist}
      />
    );
    
    const addToCartButton = screen.getByRole('button', { name: /add to cart/i });
    userEvent.click(addToCartButton);
    
    await waitFor(() => {
      expect(mockAddToCart).toHaveBeenCalledTimes(1);
      expect(mockAddToCart).toHaveBeenCalledWith('prod-123');
    });
  });
  
  it('calls onAddToWishlist when Add to Wishlist button is clicked', async () => {
    render(
      <ProductCard 
        product={mockProduct}
        onAddToCart={mockAddToCart}
        onAddToWishlist={mockAddToWishlist}
      />
    );
    
    const wishlistButton = screen.getByRole('button', { name: /add to wishlist/i });
    userEvent.click(wishlistButton);
    
    await waitFor(() => {
      expect(mockAddToWishlist).toHaveBeenCalledTimes(1);
      expect(mockAddToWishlist).toHaveBeenCalledWith('prod-123');
    });
  });
  
  // 3. 条件渲染测试
  it('disables Add to Cart button when product is out of stock', () => {
    render(
      <ProductCard 
        product={mockOutOfStockProduct}
        onAddToCart={mockAddToCart}
        onAddToWishlist={mockAddToWishlist}
      />
    );
    
    const addToCartButton = screen.getByRole('button', { name: /add to cart/i });
    expect(addToCartButton).toBeDisabled();
    
    // 点击按钮不应触发事件
    userEvent.click(addToCartButton);
    expect(mockAddToCart).not.toHaveBeenCalled();
  });
  
  it('displays out of stock indicator when product is not in stock', () => {
    render(
      <ProductCard 
        product={mockOutOfStockProduct}
        onAddToCart={mockAddToCart}
        onAddToWishlist={mockAddToWishlist}
      />
    );
    
    expect(screen.getByText(/out of stock/i)).toBeInTheDocument();
  });
  
  // 4. 属性测试
  it('applies size classes correctly', () => {
    const { rerender } = render(
      <ProductCard 
        product={mockProduct}
        size="small"
        onAddToCart={mockAddToCart}
        onAddToWishlist={mockAddToWishlist}
      />
    );
    
    let cardElement = screen.getByTestId('product-card');
    expect(cardElement).toHaveClass('max-w-xs');
    
    rerender(
      <ProductCard 
        product={mockProduct}
        size="large"
        onAddToCart={mockAddToCart}
        onAddToWishlist={mockAddToWishlist}
      />
    );
    
    cardElement = screen.getByTestId('product-card');
    expect(cardElement).toHaveClass('max-w-md');
  });
  
  // 5. 快照测试
  it('matches snapshot for in-stock product', () => {
    const { asFragment } = render(
      <ProductCard 
        product={mockProduct}
        onAddToCart={mockAddToCart}
        onAddToWishlist={mockAddToWishlist}
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });
  
  it('matches snapshot for out-of-stock product', () => {
    const { asFragment } = render(
      <ProductCard 
        product={mockOutOfStockProduct}
        onAddToCart={mockAddToCart}
        onAddToWishlist={mockAddToWishlist}
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });
  
  // 6. 边缘情况测试
  it('handles missing optional props gracefully', () => {
    const productWithoutRating = {
      id: 'prod-123',
      name: 'Test Product',
      price: 99.99,
      imageUrl: '/images/test-product.jpg',
      inStock: true
      // 没有rating和reviewCount
    };
    
    render(
      <ProductCard 
        product={productWithoutRating}
        onAddToCart={mockAddToCart}
        // 没有onAddToWishlist
      />
    );
    
    // 不应显示评分
    expect(screen.queryByText(/reviews/i)).not.toBeInTheDocument();
    
    // 点击愿望清单按钮不应导致错误
    const wishlistButton = screen.getByRole('button', { name: /add to wishlist/i });
    expect(() => userEvent.click(wishlistButton)).not.toThrow();
  });
});

与AI协作的测试策略：

明确指定测试框架和工具
提供需要测试的组件状态和交互
说明边缘情况和异常情况
要求测试覆盖率目标

专业洞见：根据State of JS 2023调查，React Testing Library已成为React应用测试的主导工具，被78%的开发者使用。测试驱动开发(TDD)在React社区也越来越受欢迎，特别是对于复杂组件。然而，测试策略应该与组件复杂度匹配——过度测试简单组件会增加维护成本，而测试不足复杂组件则会增加回归风险。

可访问性和国际化

高质量的React组件应该考虑可访问性(a11y)和国际化(i18n)。指导AI生成符合这些标准的组件可以显著提高质量：

可访问性最佳实践：

语义化HTML结构
适当的ARIA属性
键盘导航支持
颜色对比度符合WCAG标准
屏幕阅读器支持

国际化最佳实践：

文本外部化
日期和数字格式化
方向性支持(LTR/RTL)
多语言支持

实例：可访问且国际化的产品卡片

// 指导AI生成可访问且国际化的组件
/*
需求：创建一个ProductCard组件，满足：
- 符合WCAG AA级可访问性标准
- 支持国际化（使用react-intl）
- 支持RTL布局
- 支持键盘导航
*/

// 期望AI生成的可访问且国际化的组件
import React, { useRef } from 'react';
import { useIntl, FormattedMessage, FormattedNumber, FormattedDate } from 'react-intl';
import { useTheme } from '@company/design-system';

const ProductCard = ({
  product,
  onAddToCart,
  onAddToWishlist,
  onViewDetails,
  size = 'medium',
  className = ''
}) => {
  const intl = useIntl();
  const theme = useTheme();
  const addToCartRef = useRef(null);
  const { id, name, price, imageUrl, rating, reviewCount, inStock, releaseDate } = product;
  
  // 方向性支持
  const isRtl = intl.locale === 'ar' || intl.locale === 'he';
  
  // 处理键盘导航
  const handleKeyDown = (e) => {
    // 按Enter或Space键时触发点击事件
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onViewDetails(id);
    }
  };
  
  // 格式化的产品名称（用于屏幕阅读器）
  const productNameA11y = inStock 
    ? name 
    : intl.formatMessage(
        { id: 'product.outOfStock' },
        { name }
      );
  
  // 价格的可访问性标签
  const priceA11y = intl.formatMessage(
    { id: 'product.price' },
    { price: intl.formatNumber(price, { style: 'currency', currency: 'USD' }) }
  );
  
  return (
    <article 
      className={`product-card ${size} ${className}`}
      dir={isRtl ? 'rtl' : 'ltr'}
      data-testid="product-card"
    >
      {/* 可聚焦的产品卡片 */}
      <div 
        className="product-card-inner"
        tabIndex="0"
        role="button"
        aria-label={productNameA11y}
        onKeyDown={handleKeyDown}
        onClick={() => onViewDetails(id)}
      >
        {/* 产品图片 - 带有适当的alt文本 */}
        <div className="product-image-container">
          <img 
            src={imageUrl} 
            alt={intl.formatMessage({ id: 'product.imageAlt' }, { name })}
            className="product-image"
            loading="lazy"
          />
          
          {/* 可访问的状态指示器 */}
          {!inStock && (
            <div 
              className="out-of-stock-overlay" 
              aria-hidden="true" // 屏幕阅读器已通过产品名称获得此信息
            >
              <span className="out-of-stock-badge">
                <FormattedMessage id="product.outOfStock.badge" defaultMessage="Out of Stock" />
              </span>
            </div>
          )}
        </div>
        
        {/* 产品信息 - 使用适当的标题层级 */}
        <div className="product-info">
          <h3 className="product-name">
            {name}
          </h3>
          
          {/* 发布日期 - 国际化格式 */}
          {releaseDate && (
            <p className="release-date">
              <FormattedMessage 
                id="product.releaseDate" 
                defaultMessage="Released: {date}"
                values={{
                  date: (
                    <FormattedDate
                      value={new Date(releaseDate)}
                      year="numeric"
                      month="long"
                      day="numeric"
                    />
                  )
                }}
              />
            </p>
          )}
          
          {/* 价格 - 国际化格式 */}
          <div className="product-price" aria-label={priceA11y}>
            <FormattedNumber
              value={price}
              style="currency"
              currency="USD"
            />
          </div>
          
          {/* 评分 - 可访问的星级评分 */}
          {rating !== undefined && (
            <div className="product-rating">
              <span className="visually-hidden">
                <FormattedMessage 
                  id="product.rating" 
                  defaultMessage="Rating: {rating} out of 5"
                  values={{ rating }}
                />
              </span>
              
              <div 
                className="stars" 
                aria-hidden="true" // 视觉表示，屏幕阅读器使用上面的文本
              >
                {[1, 2, 3, 4, 5].map(star => (
                  <span 
                    key={star}
                    className={`star ${star <= Math.round(rating) ? 'filled' : 'empty'}`}
                  >
                    ★
                  </span>
                ))}
              </div>
              
              <span className="review-count">
                <FormattedMessage 
                  id="product.reviewCount" 
                  defaultMessage="({count} reviews)"
                  values={{ count: reviewCount }}
                />
              </span>
            </div>
          )}
        </div>
      </div>
      
      {/* 操作按钮 - 可访问且支持键盘 */}
      <div className="product-actions">
        <button
          ref={addToCartRef}
          onClick={() => onAddToCart(id)}
          disabled={!inStock}
          className="add-to-cart-button"
          aria-label={
            inStock 
              ? intl.formatMessage({ id: 'product.addToCart' }, { name })
              : intl.formatMessage({ id: 'product.cannotAddToCart' }, { name })
          }
        >
          <FormattedMessage id="product.addToCart.button" defaultMessage="Add to Cart" />
        </button>
        
        <button
          onClick={() => onAddToWishlist(id)}
          className="wishlist-button"
          aria-label={intl.formatMessage({ id: 'product.addToWishlist' }, { name })}
        >
          <span className="wishlist-icon" aria-hidden="true">♥</span>
          <span className="visually-hidden">
            <FormattedMessage id="product.addToWishlist.button" defaultMessage="Add to Wishlist" />
          </span>
        </button>
      </div>
    </article>
  );
};

export default ProductCard;

与AI协作的可访问性和国际化策略：