react-2026

React 技术栈模式

目录

• 适用场景
• 说明
• 详情
• 来源

自 React 早期作为简单组件库以来，它已经取得了长足发展。到 2025 年末，React 生态系统丰富但复杂，为构建应用提供了多种技术栈选择。现代 React 开发者需要在技术栈的各个层面做出选择——从构建工具和框架到路由器及其他库。React 官方文档（现位于 react.dev）鼓励新项目使用更高层级的框架。事实上，Create React App (CRA) 曾是首选的项目启动工具，但已于 2025 年初弃用，这表明 React 应用的启动方式正在发生转变。

与其从零开始拼凑自己的工具链，建议选择使用 React 框架（如 Next.js 或 Remix），或者在有特殊需求时，从 Vite 或 Parcel 等现代构建工具着手。在这份倾向明确的指南中，我们将探讨 2025 年的 React 生态：为中高级开发者推荐的工具链和技术栈，涵盖构建工具（Vite、Turbopack、Webpack）、路由方案（React Router 与 TanStack Router）、热门框架（Next.js、Remix 等）、状态与数据管理的关键库，以及AI 如何影响 React 开发。

适用场景

• 选择 React 技术栈（框架、构建工具、路由、状态管理）时，可将本指南作为参考
• 开始新的 React 项目并评估现代生态系统选项时，本指南会很有帮助

说明

• 对于需要 SSR/SEO 的全栈应用：使用 Next.js 或 Remix 作为框架
• 对于 SPA、内部工具和仪表板：使用 Vite + React Router 或 TanStack Router
• 对于任何自定义（非框架）React 配置，使用 Vite 作为构建工具
• 在自定义技术栈中，可考虑使用 TanStack Router 实现类型安全的路由；其他情况下使用框架提供的路由
• 使用 TanStack Query（React Query）管理服务端状态，使用 Zustand 或 Redux 管理复杂的全局状态
• 在支持的情况下使用 React 19 API（将 ref 作为 prop、use()、Actions）
• 善用 AI 辅助开发工具，但始终验证生成的代码

详情

目标读者： 本指南面向中高级 React 开发者，他们了解基础知识，并希望在 2025 年对自己的技术栈做出明智选择。

官方指导与不断演进的最佳实践

React 核心团队根据社区趋势更新了指导方针。新版 React 文档强调，开始一个项目时要*“别重复造轮子”*。Create React App 曾帮助我们快速搭建 React 单页应用（SPA），但难以满足生产环境的需求（例如缺少内置路由或 SSR）。现在 CRA 已弃用，开发者可以选择功能齐全的框架，或者使用更轻量的工具自行组建技术栈。React 核心团队给出的经验法则是：如果你的应用需要路由，采用框架会更有利。现代框架将路由与数据获取、代码分割等功能紧密集成，因此你不必自己再写一个小型框架。

为什么会有这种转变？过去几年，React 推出了 hooks、并发渲染和 Server Components 等强大功能。但要以最佳方式利用其中许多功能，通常需要复杂的工具链。Next.js 等框架已成为 React 最新能力的载体（例如流式 SSR、服务端数据加载等）。**React Server Components（RSC）**作为一项可用于生产环境的功能，随 Next.js 13 的 App Router 一同推出，实现了混合渲染模型（由服务端驱动 UI，服务端渲染的组件不会产生 JS 开销）。早期报告显示，使用 RSC 后，包体积减少了 20% 以上，因为在服务端运行的逻辑不会发送到客户端。React 19 也在逐步稳定 Server Actions（通过 'use server' 指令调用），让你可以定义在服务端运行的表单提交或其他变更操作，进一步模糊前端与后端的界限。

话虽如此，并不是每个项目都需要重量级框架。React 团队承认，精简方案也有适用场景：小型组件、在现有网站中添加 React，或通过从头构建来学习。如果选择自定义方案，你仍然可以遵循 React 更新后的“从头构建”指南，使用 Vite 或 RSBuild 等现代工具。

2025 年的构建工具：Vite、Turbopack 及其他

构建工具链负责将 React 代码（JSX、CSS 等）转换为可在浏览器中运行的内容。到了 2025 年，开发体验已大幅提升：

• Vite 已成为非框架 React 项目的事实标准。Vite 提供由 ESBuild 驱动的超高速开发服务器，并使用 Rollup 进行生产环境打包。它的人气迅速攀升，到 2025 年，其 React 集成已成为仅次于 Next.js 的最常用构建方案。它的优势在于：服务器瞬间启动，模块热重载也几乎即时完成。如果你正从 CRA 迁移，React 团队明确建议优先考虑 Vite。

• Turbopack——Vercel 推出的新型 Rust 打包器——是一颗冉冉升起的新星，被视为 Webpack 在理念上的继任者，专注于通过增量编译实现超快重载。它已集成到 Next.js 中，因此如果你使用 Next.js，很可能会从中受益。在 Next.js 之外，Turbopack 还不是通用工具。

• Webpack——长期以来的主力工具——仍在使用，但主要处于遗留模式。2025 年的新项目很少会直接选择 Webpack，除非有非常特殊的需求。遗留项目用 Webpack，新项目用 Vite（或框架默认工具）。

• Rspack / RSBuild——新一代基于 Rust 的打包器。Rspack 是一款高性能打包器，与 Webpack 生态系统在很大程度上兼容。RSBuild 是一款基于 Rspack 构建的零配置构建工具，可轻松设置包括 React 在内的框架。

总之，大多数情况下我们首选 Vite——它启动快、运行快，且支持完善。

框架与起点

在 2025 年为 React 项目选择一个起点，往往意味着选择一个框架。

Next.js（全栈 React 框架）： 由 Vercel 维护的 Next.js，已成为生产级 React 应用的首选方案。它开箱即用地支持基于文件的路由、SSR、SSG、图像优化、API 路由和 React Server Components。Next.js 的优势在于其完善的默认配置和约定。如果你想要完整的解决方案，这是我们构建全新 React 应用的首选推荐。

Remix（以及 React Router v7）： Remix 注重 Web 基础能力和渐进增强。Remix 由 React Router 团队创建，引入了集成式的路由 + 数据加载 + 修改操作方案。React Router v7 采用了 Remix 的许多模式。如果你希望精细控制服务端与客户端的工作分配，它是一个可靠的选择。

“无框架”自定义配置（Vite + 库组合）： 如果你认为不需要完整框架，可以从 Vite 开始，再添加所需组件：例如，使用 React Router 或 TanStack Router 处理路由，使用 React Query 获取数据。如果是内部工具这类不需要 SSR/SEO 的应用，这种方案可能很合适。

其他值得关注的方案： Astro 在内容网站领域备受关注（默认不包含 JS，可混用多种框架）。RedwoodJS 提供了一套主张明确的“React + GraphQL + Prisma + SSR”技术栈。Expo 搭配 Expo Router，可将 React Native 与 Web 结合起来。

我们的主张性建议： 根据任务选择工具：

• 面向公众的应用需要 SSR、SEO 或服务器组件时，选择 Next.js
• 注重渐进增强和 Web 基础能力的应用，选择 Remix
• SPA、仪表盘、内部工具，以及任何不需要 SSR 的应用，选择 Vite + React Router/TanStack Router

自定义 Vite SSR（不使用元框架）： 如果你需要 SSR，但不想使用完整框架，Vite 内置了 SSR 支持。Vike（原 vite-plugin-ssr）等工具在 Vite 之上提供了轻量层，用于实现基于文件的 SSR 路由，让你在保留完全控制权的同时，获得类似框架的开发体验。

// server.ts — minimal custom Vite SSR setup
import express from 'express'
import { createServer as createViteServer } from 'vite'

const app = express()
const vite = await createViteServer({ server: { middlewareMode: true } })
app.use(vite.middlewares)

app.use('*', async (req, res) => {
  const template = await vite.transformIndexHtml(req.originalUrl, indexHtml)
  const { render } = await vite.ssrLoadModule('/src/entry-server.tsx')
  const appHtml = await render(req.originalUrl)
  res.send(template.replace('', appHtml))
})

如果你需要 SSR 来改善 SEO 或性能，而应用的路由和数据加载又足够简单，以至于框架带来的复杂性超过了它的价值，那么这种方案就很合适。

2025 年，许多成功的 React 应用都在不使用元框架的情况下运行于 Vite 之上。关键是根据自身约束选择合适的工具，而不是默认选择功能最丰富的方案。

路由方案：React Router 与 TanStack Router

框架提供的路由： 如果使用 Next.js 或 Remix，路由问题基本由框架解决。这些框架将路由与数据获取紧密结合，可避免加载瀑布流等常见问题。

React Router： 久经考验且应用广泛。React Router v6 引入了简化的 API、钩子和嵌套路由。从 v6.4+ 开始，它增加了异步数据和 suspense 支持。如果你不使用框架，它仍是首选之一。

TanStack Router： 一个较新的方案，具备一流的 TypeScript 支持、内置的数据加载器与缓存，以及丰富的搜索参数 API。它旨在提供 Remix/Next 路由器的强大功能，同时不与特定框架绑定。

最大的区别在于类型安全和开发体验。TanStack Router 是“以 TS 为先”构建的。React Router 则更精简。两者都支持嵌套路由和数据加载。

我们的建议： 对于自定义技术栈，不妨认真考虑 TanStack Router，它拥有现代化的功能集。React Router 依然完全适用，尤其是当团队已经熟悉它时。

import { createRootRoute, createRoute, createRouter, RouterProvider } from '@tanstack/react-router';

const rootRoute = createRootRoute();
const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: () => <div>Hello, world!</div>,
});

const routeTree = rootRoute.addChildren([indexRoute]);
const router = createRouter({ routeTree });

export default function App() {
  return <RouterProvider router={router} />;
}

状态管理和数据获取库

使用 Hooks 管理本地和全局状态： 对于本地状态，useState 和 useReducer 就足够了。React 的 Context API 适用于轻量级全局状态，但要谨慎使用——Context 更新会让所有消费者重新渲染。

Redux（以及现代 Redux Toolkit）： 到 2025 年依然很活跃，不过主要应用于大型应用。Redux Toolkit（RTK） 大幅减少了样板代码。什么时候该选择 Redux？ 如果应用中的状态转换非常复杂，或者需要撤销/重做、缓存、开发者工具等功能。

Zustand、Jotai 和轻量级状态库： 适用于更简单的全局存储需求。Zustand 提供了一个极简、基于 Hook 的全局状态存储，无需样板代码。

TanStack Query： 管理服务端状态的首选工具。它提供 useQuery 和 useMutation 等 Hooks，可声明式地获取和缓存数据。

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

function TodoList() {
  const { data: todos, error, isLoading } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  });
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <ul>{todos.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}

即使在 RSC 时代，React Query 及其同类库依然适用——它们可能更多用于变更和实时更新，而初始加载则转移到服务端。

表单状态： React Hook Form 已成为优秀的表单库。搭配用于定义 Schema 的 Zod，即可声明式地验证输入。

主要库： 用于组件的 MUI、Chakra UI、Radix UI、Headless UI。用于列表虚拟化的 @tanstack/react-virtual。Vite 项目使用 Vitest + React Testing Library 进行测试，其他配置使用 Jest + React Testing Library；端到端测试使用 Cypress 或 Playwright。

使用 Vitest 进行测试

对于 Vite 项目，Vitest 是自然的测试搭档——它复用 Vite 的配置、转换和插件流水线，因此无需配置或同步单独的测试打包器。

// vite.config.ts — Vitest uses this directly
/// <reference types="vitest/config" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/test/setup.ts',
    css: true,
  },
})

// src/test/setup.ts
import '@testing-library/jest-dom/vitest'

// src/components/Button.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Button } from './Button'

test('calls onClick when clicked', async () => {
  const onClick = vi.fn()
  render(<Button onClick={onClick}>Save</Button>)
  await userEvent.click(screen.getByRole('button', { name: 'Save' }))
  expect(onClick).toHaveBeenCalledOnce()
})

Vitest 提供：即时监视模式（与 Vite 共享转换缓存）、原生 ESM 支持、兼容 Jest 的 API（describe、it、expect、vi.fn()）、源码内测试，以及内置代码覆盖率分析（支持 v8 或 istanbul）。

React 19 和现代 API

React 19 带来了多项重要的 API 变更，简化了常见模式：

将 ref 用作常规属性： 不再需要 forwardRef——直接将 ref 作为属性传入：

// React 19 — ref is just a prop
function Input({ ref, ...props }: InputProps & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />
}

use() API： 可读取 Promise 或 Context；与 Hooks 不同，它可以在条件语句中调用：

import { use } from 'react'

function UserPanel({ show }: { show: boolean }) {
  if (!show) return null
  const user = use(UserContext)
  return <div>{user.name}</div>
}

Actions 和 useActionState： 使用服务端和客户端 Actions 简化表单处理：

function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitContact, null)
  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <button disabled={isPending}>Submit</button>
      {state?.error && <p>{state.error}</p>}
    </form>
  )
}

useOptimistic： 在异步操作期间提供即时 UI 反馈：

function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimistic] = useOptimistic(todos)

  async function addTodo(text: string) {
    addOptimistic([...optimisticTodos, { id: 'temp', text, pending: true }])
    await saveTodo(text)
  }

  return <ul>{optimisticTodos.map(t => <li key={t.id}>{t.text}</li>)}</ul>
}

React Compiler： 一种可选启用的编译器，可自动为组件和表达式添加记忆化，在大多数情况下无需手动使用 useMemo、useCallback 和 React.memo。对于 Vite 项目，可将其添加为 Babel 插件：

// vite.config.ts
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
})

需要 React 19。可以通过 'use memo' 指令逐个文件渐进式采用。

Vite 专属最佳实践

使用 Vite + React（不使用元框架）时，请遵循以下要点：

• Barrel 文件导入是导致包体积过大的头号问题——直接从源文件导入，不要从 Barrel index.ts 文件导入。如需更简洁的语法，可使用 vite-plugin-barrel。
• 手动拆分代码块——按稳定性拆分第三方代码（react、router、query、UI 库），以改善缓存效果。
• 按路由拆分代码——为每个路由使用 React.lazy()，并用 <Suspense> 包裹。
• 依赖预打包——将解析较慢的依赖添加到 optimizeDeps.include，以加快开发服务器的运行速度。
• 分析包体积——每次重大依赖变更后运行 npx vite-bundle-visualizer。

完整的 Vite 配置模式请参阅 vite-bundle-optimization 技能。

React + AI：“氛围编程”的新前沿

AI 辅助开发： Copilot、ChatGPT 或 Cursor 等工具可以生成组件、提供 Hook 建议并配置构建工具。**“氛围编程”**指的是开发者与 AI 助手协作的工作流。资深开发者能从中获得更多帮助，因为他们知道该问什么，也知道如何验证输出。

有效进行“氛围编程”的技巧：

• 使用 AI 生成样板代码和配置
• 生成组件模板
• 利用 AI 编写测试和类型
• 保持掌控——始终检查 AI 生成的代码

React 应用中的 AI（AI 驱动的 UI）： React 开发者越来越常被要求构建融入 AI 功能的 UI。需要重点考虑提示词管理、流式响应、错误处理和 AI 专属 UI 元素。Vercel AI SDK 提供了 useChat 等 Hook，可抽象处理流式传输和缓存。

我们的看法： 将 AI 作为 React 开发工作流中的工具。运用你的专业知识来引导 AI：由你定义架构，让 AI 补全样板代码，然后由你完善结果。

总结

2026 年的 React 提供了丰富的选择：

• 构建工具： 大多数情况下从 Vite 开始（如果在 Next.js 中，则使用 Turbopack）。
• 使用框架与否： 对于任何规模较大的应用，都倾向于使用 React 框架（Next.js 是首选）。
• 路由： 如果使用 Next/Remix，就使用其内置方案。如果要构建自己的技术栈，可考虑类型安全性更高的 TanStack Router，或可靠性更强的 React Router。
• 状态和数据库： 使用 React Query 处理服务端数据，使用 Zustand 或 Redux 管理复杂的全局状态。
• 拥抱 React 新特性： Hook 已是标准。使用 React 19 API（use()、Actions、useOptimistic）。了解服务端组件。试试 React Compiler，实现自动记忆化。
• 性能： 使用 useTransition 处理非紧急更新；优先使用派生状态，而不是存储状态；使用 useSyncExternalStore 订阅外部数据。参见 react-render-optimization 和 react-data-fetching 技能。
• 工作流中的 AI： 使用 AI 编码助手提高效率，但务必验证输出。

React 比以往更强大。选择合适的技术栈，你就能更好地构建稳健、可扩展的应用。祝编码愉快，愿你的组件只在必要时重新渲染！

来源

• patterns.dev/react/react-2026