生态

React 本身专注 UI 层；路由、状态、数据请求、样式等由社区库补充。见 状态管理、工程化。

核心概念

React 的哲学是**「小核心 + 自由生态」：官方只提供组件模型、Hooks、并发渲染这套核心机制，路由、全局状态、表单、数据请求全部交给社区。好处是团队可以按需组合最合适的工具，代价是新项目需要做大量选型决策**，不同项目之间技术栈差异可能很大。

常用库（2024+ 主流）

示例：TanStack Query 处理服务端状态

import { useQuery } from "@tanstack/react-query";

function UserProfile({ userId }: { userId: string }) {
  const { data, isPending, error } = useQuery({
    queryKey: ["user", userId],
    queryFn: () => fetch(`/api/users/${userId}`).then((r) => r.json()),
  });

  if (isPending) return <p>加载中…</p>;
  if (error) return <p>加载失败</p>;
  return <p>{data.name}</p>;
}

TanStack Query 自动处理缓存、重试、后台重新验证、竞态请求取消等，比手写 useEffect + useState 更省心，也避免了Effect 一节中提到的「服务端数据缓存不适合手写 Effect」问题。

UI 组件库

Ant Design、MUI、Radix + shadcn/ui 等；选型看设计语言、可访问性、包体积与 Tree Shaking 支持。

shadcn/ui 与传统组件库不同：它不是 npm 依赖，而是把组件源码生成到你的项目里，方便深度定制但也意味着升级需要手动同步。

开发工具

• ESLint eslint-plugin-react-hooks：强制 Hooks 规则（依赖数组完整性、条件调用检测等）。
• React DevTools：组件树与 Profiler。
• TypeScript：见 typescript。
• Storybook：组件独立开发与可视化文档。

与 Vue 生态对照（简表）

选型建议

• 新的中后台项目：Vite + React Router + TanStack Query + Zustand（若需要全局状态）+ Ant Design/shadcn。
• 需要 SEO、混合渲染、服务端组件：直接上 Next.js（App Router），减少自己拼装路由和数据获取层的成本。
• 表单密集型系统：React Hook Form + Zod，配合 UI 库的受控组件适配层。
• 团队对包体积、定制自由度要求高：Radix + shadcn/ui 优于「一次性引入整套设计语言」的组件库。

常见坑

生态选型速查

延伸阅读

• 状态管理：客户端/服务端状态选型细节
• 工程化：Vite/Next.js 项目搭建
• Effect 与副作用：为何服务端数据优先用 TanStack Query

参考文献

以下链接在编写时均可正常访问：