前端开发模式

适用于 React、Next.js 和高性能用户界面的现代前端模式。

何时激活

• 构建 React 组件（组合、属性、渲染）
• 管理状态（useState、useReducer、Zustand、Context）
• 实现数据获取（SWR、React Query、服务器组件）
• 优化性能（记忆化、虚拟化、代码分割）
• 处理表单（验证、受控输入、Zod 模式）
• 处理客户端路由和导航
• 构建可访问、响应式的 UI 模式

组件模式

组合优于继承

// PASS: GOOD: Component composition
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>
}

export function CardBody({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>
}

// Usage
<Card>
  <CardHeader>Title</CardHeader>
  <CardBody>Content</CardBody>
</Card>

复合组件

interface TabsContextValue {
  activeTab: string
  setActiveTab: (tab: string) => void
}

const TabsContext = createContext<TabsContextValue | undefined>(undefined)

export function Tabs({ children, defaultTab }: {
  children: React.ReactNode
  defaultTab: string
}) {
  const [activeTab, setA…