启动或现代化 React 项目时选择并落地 2026 现代…

适用于新建 React 应用或升级旧项目时，按 SSR/SEO、SPA、路由、状态、构建、测试与 AI 集成需求落地现代 React 栈。

适用场景

解决思路

1. 全栈且需要 SSR/SEO 时，选 Next.js 或 Remix 作为框架。
2. SPA、内部工具、仪表盘时，选 Vite + React Router 或 TanStack Router。
3. 任何自定义（非框架）React 设置都用 Vite 作为构建工具。
4. 自定义栈需要类型安全路由时考虑 TanStack Router；使用框架时用框架自带路由。
5. 服务器状态用 TanStack Query（React Query），复杂全局状态用 Zustand 或 Redux。
6. 在支持的环境使用 React 19 API：ref as prop、use()、Actions。
7. 采用 AI 辅助开发工具，但始终验证生成代码。
8. 遵循 React 官方指导：不要重新发明轮子；新项目优先用 React 框架（如 Next.js 或 Remix），有特殊要求再用 Vite 或 Parcel 等现代构建工具。
9. 注意 Create React App (CRA) 已在 2025 初弃用，不再作为新项目引导工具；从 CRA 迁移优先考虑 Vite。
10. 如果应用需要路由，优先使用框架，因为现代框架把路由与数据获取、代码分割紧密集成，避免自写迷你框架。
11. 要利用 hooks、并发渲染、Server Components 等能力时，选用支持这些能力的工具或框架，例如 Next.js 的 streaming SSR、server-side data loading。
12. 使用 React Server Components (RSC)：在 Next.js 13 App Router 等已支持环境中采用混合渲染，服务端组件不向客户端发送 JS，可减少 bundle（报告超过 20%）。
13. 使用 React 19 稳定的 Server Actions：用 'use server' 指令定义表单提交或其他 mutation 在服务端运行。
14. 仅在小部件、向已有站点添加 React、或从零学习时走精简自定义路线；此时用 Vite 或 RSBuild 按 React 的 Build from Scratch 指南搭建。
15. 构建工具默认选 Vite：开发服务器由 ESBuild 驱动，生产打包用 Rollup；它是迁移 CRA 的首选。
16. 在 Next.js 内使用 Turbopack（Rust 打包器，增量编译，快速重载）；Next.js 外 Turbopack 尚不是通用工具。
17. Webpack 用于遗留项目；2025 年新项目除非有非常特殊需求，不要直接选 Webpack。
18. 需要 Rust 高性能且兼容 Webpack 生态时用 Rspack；需要零配置构建工具用 RSBuild（基于 Rspack，支持 React 等框架）。
19. 框架选择：Next.js 作为完整解决方案，支持 file-based routing、SSR、SSG、image optimization、API routes、React Server Components，默认推荐。
20. 框架选择：Remix 和 React Router v7 强调 web fundamentals 与渐进增强，集成 routing + data loading + mutations，适合精细控制服务端与客户端工作。
21. 无框架自定义设置：以 Vite 起步，按需添加 React Router 或 TanStack Router 做路由、React Query 做数据获取；适合内部工具等 SSR/SEO 无关场景。
22. 其他选择：内容站点考虑 Astro（默认零 JS，可混框架）；全栈偏见栈考虑 RedwoodJS（React + GraphQL + Prisma + SSR）；移动与 Web 考虑 Expo + Expo Router。
23. 按任务匹配工具：公开应用需 SSR、SEO 或 Server Components 用 Next.js；强调渐进增强和 web fundamentals 用 Remix；SPA、仪表盘、内部工具且不需 SSR 用 Vite + React Router 或 TanStack Router。
24. 自定义 Vite SSR（不用元框架）：使用 Vite 内置 SSR，或在 Vite 上加 Vike（原 vite-plugin-ssr）获得文件路由与 SSR 的框架式 DX；按 server.ts 示例用 express 与 createServer({ server: { middlewareMode: true } })，并通过 vite.transformIndexHtml 与 vite.ssrLoadModule('/src/entry-server.tsx') 渲染。
25. 路由：使用 Next.js 或 Remix 时用框架自带路由；它们把路由与数据获取绑定，避免加载瀑布。
26. 不用框架时，React Router v6+ 可选：hooks、嵌套路由、v6.4+ async data 和 suspense 支持，成熟可靠。
27. 自定义栈可认真评估 TanStack Router：TS-first、类型安全、内置带缓存的数据 loaders、丰富 search params API；示例用 createRootRoute、createRoute、createRouter、RouterProvider。
28. 路由推荐：自定义栈优先看 TanStack Router 的现代功能；团队已熟悉 React Router 时 React Router 仍完全可用。
29. 局部状态用 useState、useReducer；轻量全局状态用 Context API，但注意 context 更新会重渲染所有消费者。
30. 复杂状态转换、需要 undo/redo、缓存、devtools 时用 Redux；使用 Redux Toolkit (RTK) 减少样板。
31. 简单全局 store 用 Zustand、Jotai 等轻量库；Zustand 提供极简 hook-based 全局 store，无样板。
32. 服务器状态用 TanStack Query：用 useQuery、useMutation 声明式获取和缓存数据；RSC 时代仍可用于 mutations 和实时更新，初始加载可交给服务端。
33. 表单状态用 React Hook Form，并以 Zod 做 schema 声明式校验输入。
34. 组件库用 MUI、Chakra UI、Radix UI、Headless UI；列表虚拟化用 @tanstack/react-virtual。
35. 测试：Vite 项目用 Vitest + React Testing Library；其他设置用 Jest + React Testing Library；E2E 用 Cypress 或 Playwright。
36. Vite 项目配置 Vitest：在 vite.config.ts 中用 /// <reference types="vitest/config" />、defineConfig，设置 test.environment='jsdom'、globals=true、setupFiles='./src/test/setup.ts'、css=true；在 src/test/setup.ts 引入 '@testing-library/jest-dom/vitest'。
37. Vitest 测试写法：用 render、screen、userEvent、vi.fn() 等；受益于即时 watch、原生 ESM、Jest 兼容 API、in-source testing、v8 或 istanbul 覆盖率。
38. React 19 ref as prop：不再用 forwardRef，直接把 ref 作为 prop 传入。
39. React 19 use()：可读取 promise 或 context，且不同于 Hooks 可条件调用。
40. React 19 Actions 和 useActionState：用 useActionState 处理 server/client action，将 form action 交给返回的 formAction，并根据 isPending 禁用按钮、显示 state.error。
41. React 19 useOptimistic：异步操作期间提供即时 UI 反馈，如先 addOptimistic 添加临时项，再 await saveTodo。
42. React Compiler：作为 opt-in 编译器自动 memo 化组件和表达式，多数情况消除手动 useMemo、useCallback、React.memo；Vite 项目通过 @vitejs/plugin-react 的 babel.plugins 加 'babel-plugin-react-compiler'；需 React 19；可按文件用 'use memo' 指令增量采用。
43. Vite + React 最佳实践：避免 barrel file imports，直接从源文件导入；需要 ergonomic syntax 用 vite-plugin-barrel。
44. Vite 手动 chunk 拆分：按稳定性拆分 vendor code（react、router、query、UI library）以改善缓存。
45. Vite 路由级代码分割：对每个路由用 React.lazy()，并用 <Suspense> 包裹。
46. Vite 依赖预打包：把解析慢的依赖加入 optimizeDeps.include，加快 dev server。
47. Vite bundle 分析：每次重大依赖变更后运行 npx vite-bundle-visualizer。
48. 参考 vite-bundle-optimization 技能获取完整 Vite 配置模式。
49. AI 辅助开发：用 Copilot、ChatGPT、Cursor 生成组件、建议 hooks、配置构建工具；在 vibe coding 中协作。
50. 有效 vibe coding：用 AI 做 boilerplate 和 configuration；生成 component templates；让 AI 生成 tests 和 types；保持控制，始终 review AI-generated code。
51. AI-powered UI：管理 prompt、流式响应、错误处理、AI 专用 UI 元素；Vercel AI SDK 提供 useChat 等 hooks 抽象 streaming 和 caching。
52. 将 AI 作为工具：你定义架构，让 AI 填 boilerplate，再 refine 结果。
53. 性能：用 useTransition 处理非紧急更新；用 derived state 而非 stored state；用 useSyncExternalStore 处理外部订阅；参考 react-render-optimization 和 react-data-fetching 技能。
54. 结论落地：构建工具多数从 Vite 起步（Next.js 内可用 Turbopack）；稍大应用倾向 React 框架，Next.js 领先；Next/Remix 用内置路由，自建栈考虑 TanStack Router 或 React Router；数据用 React Query，复杂全局状态用 Zustand 或 Redux；使用 React 19 API，理解 Server Components，尝试 React Compiler；AI 提升生产率但验证输出。

适用边界 · 注意事项

• 只是小部件、向已有站点增量添加 React 或从零学习时，不要盲目引入完整框架。
• 内部工具、仪表盘等不需要 SSR/SEO 时，不必使用重型全栈框架。
• 团队已熟悉 React Router 且需求简单时，不必为了新特性强行迁移到 TanStack Router。