2025 年，构建高质量 React 项目的技术栈参考 🤔🤔🤔

最近在出一个前端的体系课程，里面的内容非常详细，如果你感兴趣，可以加我 v 进行联系 yunmz777:

浪费你几秒钟时间，内容正式开始

脚手架

开发纯客户端应用时，推荐使用 rsbuild 作为脚手架工具。它拥有出色的构建性能，支持现代前端特性，并且配置灵活，能够满足大多数项目的开发需求。rsbuild 由现代化构建体系驱动，使用体验稳定且高效，非常适合快速迭代的场景。

如果项目需要服务端渲染（SSR）能力，推荐使用 Next.js。它拥有完善的生态体系，内置路由与数据获取机制，支持静态生成和服务端渲染的多种模式，能更好地满足 SEO 和首屏性能的要求。对于中大型项目，Next.js 提供的灵活性和扩展性也更具优势。根据业务场景选择合适的工具，可以显著提升开发效率和项目可维护性。

状态库

在状态管理方面，小型项目可以直接使用 React 的 useState、useReducer 和 Context 来满足基本需求。对于中大型项目，更推荐使用 Zustand：它轻量、简单、支持全局状态管理、异步逻辑和持久化，API 设计清晰，几乎可以完全替代 Redux。相比之下，Redux 更重，学习成本和样板代码多，只有在特别强调可预测性和复杂中间件控制的场景下才更具优势。

路由库

在 React 应用中，路由管理是核心架构的一部分。目前主流的路由库主要有两种选择：react-router-dom 和 TanStack Router。

react-router-dom 是使用最广泛的 React 路由库，生态成熟、文档完善，社区支持强大。它的 API 相对稳定，适合大多数项目使用，尤其适合有历史项目经验的团队快速上手。但它的一些设计（如嵌套路由和数据加载）在复杂场景下可能会显得笨重。

而 TanStack Router 是一款更现代化、类型安全的路由库，专为 TypeScript 优化，内置强大的类型推导和数据加载机制。它将路由定义集中管理，支持文件式路由（可选），结构更清晰，特别适合中大型项目或追求更强架构约束的团队。缺点是上手成本稍高，生态还在发展中。

如果你希望快速搭建、社区成熟优先，选 react-router-dom；如果你追求更现代的架构设计、类型安全和更强的数据管理能力，TanStack Router 是更优选。

请求库

在 React 应用中，网络请求一般有两种处理方式：底层请求库和请求状态管理库。

最常见的底层请求库是 Axios 和原生的 fetch。它们负责发出 HTTP 请求、处理响应，是构建网络通信的基础。Axios 使用体验更好一些，支持请求拦截、取消、错误处理等功能，适合封装统一的请求工具。

在请求管理方面，更推荐使用 React Query（TanStack Query），它并不替代 Axios 或 fetch，而是专注于管理服务端数据的状态、缓存、错误处理、重试、分页、预取等行为。你可以自由选择配合 axios 或 fetch 作为底层请求工具。

因此，推荐的组合方式是：React Query + Axios/fetch，它们各司其职，配合使用可以极大提升数据请求的可靠性、响应速度和用户体验。对于中大型项目，这几乎是当前的主流最佳实践。

样式

在 React 项目中，CSS 样式的组织与管理通常有以下几种主流方式，每种方式适用于不同的项目规模与开发需求：

1. 传统 CSS / SCSS 文件

使用 .css 或 .scss 文件按组件或页面划分，引入到组件中使用。这种方式简单直观，适合小型项目或快速原型开发，但在大型项目中容易出现样式冲突或全局污染。

2. CSS Modules

通过文件名加 .module.css / .module.scss 的形式启用局部作用域，避免样式冲突。例如 className={styles.button}。这种方式适合中大型项目，结构清晰、隔离性强，与组件强绑定。

3. CSS-in-JS（如 styled-components、@emotion）

通过 JS 写 CSS，实现样式与组件逻辑的高度绑定，支持主题、动态样式、按需加载等特性。例如：

jsx 复制代码

import styled from "styled-components";
const Button = styled.button`
  color: red;
`;

适合需要高度动态样式、主题切换或多端渲染支持的场景，但运行时性能略有开销。

4. 原子化 CSS（如 Tailwind CSS + shadcn/ui）

使用原子类组合快速构建 UI，无需书写传统 CSS 文件。例如：

jsx 复制代码

<button className="bg-blue-500 text-white px-4 py-2 rounded">按钮</button>

Tailwind 提供了极高的开发效率，适合追求统一设计体系和快速迭代的团队。为了进一步提升开发体验与组件复用能力，推荐结合使用 shadcn/ui。它基于 Tailwind 和 Radix UI，提供一套现代化、可访问性良好的 UI 组件，可直接将组件源码引入项目中，方便自定义、维护，兼顾灵活性与一致性。

在小型项目中，使用 CSS Modules 或 Tailwind 已能满足大部分样式需求。中大型项目则推荐 CSS Modules 搭配 Tailwind，或使用 styled-components 等 CSS-in-JS 方案，以实现更强的样式隔离与主题能力。如果团队有设计系统或追求统一风格，建议使用 Tailwind 配合 shadcn/ui，可大幅提升组件复用率和开发效率。总体来说，选型应结合团队习惯、项目规模和维护成本，统一的样式规范将显著提升协作体验和代码质量。

表单库

在 React 项目中，表单状态管理相对繁琐，推荐使用专门的表单库来提高开发效率和可维护性。目前主流方案如下：

1. React Hook Form（推荐）

React Hook Form 是一个轻量级、高性能的表单库，专为函数组件设计，内置支持原生校验、异步校验、动态字段与条件渲染等功能。它与 UI 库（如 MUI、shadcn/ui）兼容性良好，搭配 Zod 或 Yup 使用，可实现类型安全且高可维护性的表单校验。

如下代码所示（React Hook Form + Zod）：

tsx 复制代码

import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const schema = z.object({
  name: z.string().min(1, "请输入姓名"),
  age: z.number().min(18, "必须年满 18 岁"),
});

type FormData = z.infer<typeof schema>;

const MyForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="姓名" />
      {errors.name && <p>{errors.name.message}</p>}

      <input
        type="number"
        {...register("age", { valueAsNumber: true })}
        placeholder="年龄"
      />
      {errors.age && <p>{errors.age.message}</p>}

      <button type="submit">提交</button>
    </form>
  );
};

适用于各种表单复杂度场景，是当前社区首选。

2. Formik

Formik 曾是最常用的表单库之一，理念清晰，支持表单状态管理、校验及字段依赖，通常配合 Yup 进行数据验证。相较于 React Hook Form，Formik 性能稍逊，样板代码也更多，适合已有使用基础的项目继续维护使用。

Formik + Yup 示例：

tsx 复制代码

import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";

const validationSchema = Yup.object({
  email: Yup.string().email("格式错误").required("必填"),
});

const MyForm = () => (
  <Formik
    initialValues={{ email: "" }}
    validationSchema={validationSchema}
    onSubmit={(values) => console.log(values)}
  >
    <Form>
      <Field name="email" type="email" />
      <ErrorMessage name="email" component="div" />
      <button type="submit">提交</button>
    </Form>
  </Formik>
);

适合维护老项目或团队已使用 Formik 的情况。

Zod 和 Yup 是当前主流的表单校验库，前者更现代、类型安全，特别适合与 TypeScript 和 React Hook Form 搭配使用；后者则更成熟稳定，常用于 Formik 或部分 RHF 项目中。它们都能帮助开发者清晰定义表单结构、规则和错误提示，避免手动校验逻辑。新项目建议优先选择 Zod，更符合现代开发习惯。无论选择哪种方案，统一使用 Schema 驱动的校验方式都能显著提升表单的可维护性与一致性。

表格库

在处理复杂数据展示时，推荐使用专业的表格库来提升开发效率与可维护性。对于追求高度定制的场景，TanStack Table 是首选，功能强大但不包含 UI，需要配合样式库（如 Tailwind 或 shadcn/ui）进行自定义渲染。

而像 Ant Design Table 或 MUI DataGrid 则适合已有 UI 框架选型、强调快速交付的项目。整体而言，表单建议使用 React Hook Form + Zod，表格推荐 TanStack Table 或 UI 框架内置组件，两者结合可构建出灵活、美观且强大的数据交互界面。

时间处理库

在 React 项目中，推荐使用 Day.js 处理时间，它体积小、API 直观，几乎可替代 Moment.js，适合绝大多数常规场景。若你偏好函数式编程或使用 TypeScript，date-fns 是更灵活的选择，支持 tree-shaking 与强类型校验。如果涉及复杂的时区处理或国际化，建议使用 Luxon，功能强大但相对更重。总体来说，Day.js 是现代前端的首选时间处理库。

Hooks

在 React 项目中，使用成熟的 Hooks 工具库可以极大提升开发效率、减少重复逻辑。比较推荐的是由阿里巴巴出品的 ahooks，功能全面，封装了请求、节流、防抖、生命周期等常用逻辑，适合中大型项目统一使用。另一个流行选择是 react-use，体积小、功能覆盖广，适合快速开发或轻量项目按需使用。如果项目以 TypeScript 为主，可以考虑 usehooks-ts，类型定义友好、API 简洁，使用体验更稳定。

综合来看：中大型项目首选 ahooks，中小项目倾向 react-use，TS 项目建议 usehooks-ts。根据团队偏好和项目复杂度选择合适的工具库，能显著提升可维护性和开发效率。

要不要用 TS

现在做项目，TS 必须得用。别怕写类型，尤其是有 AI 帮你写的时候，效率根本不是问题。你用 JS 改个函数，改完之后哪儿错了、有没有影响，完全靠猜，报错都可能是运行时才出现，出了问题一脸懵。但 TS 不一样，你一改函数，哪儿用到了，哪里类型不匹配，编辑器立马全告诉你，一目了然。这才是工程化的底气 ------ 敢改，能追，出错早知道，AI 辅助也更稳。所以别犹豫，写 TS 是在给自己未来省事，也是在为团队和 AI 铺路。

总结

React 技术栈围绕组件化和函数式编程展开，强调灵活性与可组合性。常用的配套工具包括状态管理（如 Zustand）、路由（react-router 或 TanStack Router）、请求管理（React Query）、UI 样式（Tailwind CSS + shadcn/ui）、表单（React Hook Form + Zod）等。构建工具推荐使用 rsbuild，SSR 项目则选用 Next.js。全栈 TypeScript 是必选项，不仅提升开发体验，也为 AI 协助开发打下基础。整体而言，现代 React 技术栈已非常成熟，工程化能力强，适合构建各类中大型 Web 应用。