senior-frontend

高级前端

面向 React/Next.js 应用的前端开发模式、性能优化和自动化工具。

项目脚手架

生成采用 TypeScript、Tailwind CSS 和最佳实践配置的 Next.js 或 React 新项目。

脚手架选项

选项	描述
--template nextjs	使用 App Router 和 Server Components 的 Next.js 14+
--template react	使用 TypeScript 的 React + Vite
--features auth	添加 NextAuth.js 身份验证
--features api	添加 React Query + API 客户端
--features forms	添加 React Hook Form + Zod 验证
--features testing	添加 Vitest + Testing Library

生成的结构（Next.js）

my-app/
├── app/
│   ├── layout.tsx        # Root layout with fonts
│   ├── page.tsx          # Home page
│   ├── globals.css       # Tailwind + CSS variables
│   └── api/health/route.ts
├── components/
│   ├── ui/               # Button, Input, Card
│   └── layout/           # Header, Footer, Sidebar
├── hooks/                # useDebounce, useLocalStorage
├── lib/                  # utils (cn), constants
├── types/                # TypeScript interfaces
├── tailwind.config.ts
├── next.config.js
└── package.json

组件生成

生成包含 TypeScript、测试和 Storybook 故事的 React 组件。

生成器选项

选项	描述
--type client	带有 'use client' 的客户端组件（默认）
--type server	异步服务端组件
--type hook	自定义 React Hook
--with-test	包含测试文件
--with-story	包含 Storybook 故事

包体积分析

分析 package.json 和项目结构，寻找包体积优化机会。

可替换的大型依赖项

包	大小	替代方案
moment	290KB	date-fns（12KB）或 dayjs（2KB）
lodash	71KB	支持 tree-shaking 的 lodash-es
axios	14KB	原生 fetch 或 ky（3KB）
jquery	87KB	原生 DOM API
@mui/material	大	shadcn/ui 或 Radix UI

React 模式

复合组件

const Tabs = ({ children }) => {
  const [active, setActive] = useState(0);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
};

Tabs.List = TabList;
Tabs.Panel = TabPanel;

自定义 Hook

function useDebounce<T>(value: T, delay = 500): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

Next.js 优化

服务端组件与客户端组件

默认使用服务端组件。仅在需要以下功能时添加 'use client'：

• 事件处理器（onClick、onChange）
• 状态（useState、useReducer）
• 副作用（useEffect）
• 浏览器 API

图像优化

import Image from 'next/image';

// Above the fold - load immediately
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority
/>

// Responsive image with fill
<div className="relative aspect-video">
  <Image
    src="/product.jpg"
    alt="Product"
    fill
    sizes="(max-width: 768px) 100vw, 50vw"
    className="object-cover"
  />
</div>

无障碍检查清单

1. 语义化 HTML：使用恰当的元素（<button>、<nav>、<main>）
2. 键盘导航：所有交互元素都可聚焦
3. ARIA 标签：为图标和复杂控件提供标签
4. 色彩对比度：普通文本至少为 4.5:1
5. 焦点指示器：焦点状态清晰可见

// Accessible button
<button
  type="button"
  aria-label="Close dialog"
  onClick={onClose}
  className="focus-visible:ring-2 focus-visible:ring-blue-500"
>
  <XIcon aria-hidden="true" />
</button>

快速参考

Tailwind CSS 工具类

import { cn } from '@/lib/utils';

<button className={cn(
  'px-4 py-2 rounded',
  variant === 'primary' && 'bg-blue-500 text-white',
  disabled && 'opacity-50 cursor-not-allowed'
)} />

TypeScript 模式

// Props with children
interface CardProps {
  className?: string;
  children: React.ReactNode;
}

// Generic component
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>;
}