跳到主要内容

React 生态与工程化

React 生态全景​

1. 路由：React Router v6​

  • 嵌套路由：<Outlet /> 渲染子路由
  • loader / action：数据加载和表单提交（Data Router 模式）
  • 懒加载路由：lazy: () => import('./Page') 配合 <Suspense>
  • useNavigate / useParams / useSearchParams — 常用 hooks

2. 服务端渲染（SSR）与 Next.js​

渲染模式说明适用场景
SSG（静态生成）构建时生成 HTML博客、文档
SSR（服务端渲染）请求时生成 HTML动态内容
ISR（增量静态再生）后台定时更新静态页电商、新闻
CSR（客户端渲染）浏览器渲染后台管理系统

Next.js App Router 核心概念

  • Server Components（默认）：零 JS 发送到客户端
  • Client Components：'use client' 标记，保留交互能力
  • Server Actions：表单/变更直接调用服务端函数

3. 数据请求：React Query / SWR​

// React Query 示例
const { data, isLoading, error } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
  staleTime: 5 * 60 * 1000, // 5 分钟内认为数据新鲜
})
  • 自动缓存与去重：相同 queryKey 的请求只发一次
  • 后台刷新：窗口重新聚焦时自动 refetch
  • 乐观更新：onMutate 先更新 UI，失败后回滚
  • 无限滚动：useInfiniteQuery + fetchNextPage

4. 样式方案对比​

方案特点代表库
CSS Modules局部作用域，零运行时内置支持
CSS-in-JS动态样式，有运行时开销styled-components, Emotion
Atomic CSS极致复用，HTML 类名多Tailwind CSS
Zero-runtime编译期提取，无运行时Linaria, vanilla-extract

5. 表单方案：React Hook Form​

const { register, handleSubmit, formState: { errors } } = useForm()

<input {...register('email', { required: true, pattern: /^\S+@\S+$/ })} />
{errors.email && <span>邮箱格式错误</span>}
  • 非受控模式 + ref 收集值，避免每次输入触发重渲染
  • 配合 zod / yup 做 schema 验证

6. 测试工具链​

  • Vitest / Jest — 单元测试
  • React Testing Library — 组件集成测试（关注行为而非实现）
  • Playwright / Cypress — E2E 测试
// RTL 示例
test('点击按钮增加计数', async () => {
  render(<Counter />)
  await userEvent.click(screen.getByRole('button', { name: /增加/ }))
  expect(screen.getByText('1')).toBeInTheDocument()
})

7. 高频面试题​

  • Server Component 与 Client Component 如何混用？ SC 可以导入 CC，但 CC 不能导入 SC
  • React Query 与 Redux 的区别？ RQ 专注服务端状态（异步/缓存），Redux 管理客户端状态
  • Next.js 如何做 SEO？ generateMetadata 动态 meta，SSG/SSR 保证爬虫可读内容
  • monorepo 下 React 多版本共存的问题？ 用 peerDependencies + 包管理器 alias 解决