React 生态系统（2025 版）

点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

导读：这是国外程序员 Robin Wieruch 带有明显个人色彩的一份总结，每年都会更新。相比于 awesome 列表^[2]，我个人更喜欢这类总结，简短、实用，更容易让人抓到重点并能立即实施。

React 的是一个由组件驱动的 UI 框架，JSX  以及 React Hook 都是其首创的先进理念。经过多年的发展，React 拥有一套非常庞大的生态系统，不过这也导致从其他库/框架转过来的开发人员带来选择困难。

React 通过 React Hooks 为编写组件提供了一些内置解决方案，包含管理本地状态、副作用和一些性能优化的 Hooks，不过能解决的问题有限。

本文我们将探索 2025 年必备的 React 库。这些库是开发 React 开发大型应用程序的基石。无论你是初学者还是经验丰富的开发者，本文都将帮助你轻松畅游 React 庞大的生态系统。

接下来，我们将针对不同应用场景，深入了解一些 React 生态系统中我们可以使用的一些库。并且，每一小节最后都会包含我的一些个人推荐。

新建 React 项目

React 初学者常问的第一个问题是：如何搭建 React 项目？市面上工具众多，选择合适的工具可能会让人不知所措。React 社区中最受欢迎的选择是 Vite^[3]，它能轻松创建集成不同库（如 React）而且支持可选的 TypeScript 选项的项目。

# Create a react project using `create-vite` CLI
npm create vite@latest my-react-app -- --template react
# Create a react project with TypeScript support
npm create vite@latest my-react-app -- --template react-ts

Vite 的性能也非常出色^[4]。

如果你已经熟悉 React，可能会考虑使用一些流行的（元）框架。Next.js^[5] 是最广泛采用的选择，它基于 React 构建，因此理解 React 的基础知识至关重要。Next.js 自带许多开箱即用的功能，比如不同的渲染技术、基于文件和 API 的路由。

虽然 Next.js 最初用于服务器端渲染，不过后面也加入了生成静态站点生成（网站）以及其他渲染模式（如 ISR）的支持。自 2023 年起，Next.js 新增了 React Server Components（RSC）和 React Server Functions（RSF）支持，将 React 组件从客户端转移到服务器端，引发了重大的编写范式转变。

Next.js 的两个替代方案是 TanStack Start（测试版）和 React Router（从 Remix 过渡而来），但它们目前还不支持 React Server Components。

如果静态内容的性能是你的首要考虑因素，可以看看 Astro^[6]。它作为一个与框架无关的工具，能与 React 无缝协作，即使在使用 React 构建组件时，也只会向浏览器发送 HTML 和 CSS。只有当组件需要交互时才加载 JavaScript，从而确保最佳性能。

如果你只是想了解 Vite 这样的工具是如何工作的，可以尝试自己搭建一个 React 项目^[7]。从一个基本的 HTML 和 JavaScript 项目起步，然后自行添加 React 及工具（如 Webpack、Babel）。虽然在日常工作中不一定会这样做（尤其是 Vite 已经取代 Webpack 后），但这是了解底层工具的绝佳学习体验。

如果你是 React 资深开发者，想尝试新事物，可以看看 Nitro^[8]、Redwood^[9] 或 Waku^[10]。其中，Waku 由 Zustand 的开发者创建，也支持 React Server Components（RSC）。

建议：

• 使用 Vite 创建客户端渲染程序

• 使用 Next.js 创建服务端渲染程序

• 使用 Astro 创建静态页面程序

包管理器

在 JavaScript 生态系统（也包括 React）中，目前最被广泛使用的包括管理器是 npm^[11]，因为它是随 Node.js 一起安装的。不过，yarn^[12] 和 pnpm^[13] 也是不错的替代选择。特别是 pnpm，能带来更显著的性能提升。

如果你要创建多个相互依赖或共享一组自定义 UI 组件的 React 应用程序，不妨了解一下 monorepo 的概念。前面提到的所有包管理器都可以通过 workspaces 功能创建 monorepo，在这一点上 yarn、pnpm 比 npm 要好。如果能再配合 Turborepo^[14] 这类 monorepo pipeline 工具的使用，体验会更好。

建议：

• 选择一个包管理器并坚持使用

  • 使用最广泛的是 npm

  • 希望有更好性能，但目前还没那么流行的就选 pnpm

• 如果是 monorepo，请查看 Turborepo 相关教程

状态管理

React 提供了两个用于管理局部状态的内置 Hook：useState^[15] 和 useReducer^[16]。对于全局状态管理，内置的 useContext^[17] Hook 允许你将数据从顶级组件传递到更深层次的组件，过程中无需依赖 props，有效避免了 props 逐层传递的问题。

这三个 React Hook 使开发者能够在 React 中实现强大的状态管理，可以通过使用 React 的 useState/useReducer Hook 将状态管理与组件放在一起，也可以结合 React 的 useContext Hook 进行全局状态管理。

如果你发现自己很频繁地在使用 React 的 Context Hook 来实现共享/全局状态，这个时候就该看看 Zustand^[18] 了。它能帮助你更好的管理应用程序的全局状态，方便你在任意层级的 React 组件中进行状态的读取和修改。

虽然 Zustand 正逐渐成为 React 社区的事实标准，但许多项目仍在使用 Redux。就我个人而言，在过去几年的自由职业工作中，我没有使用过 Redux，因为我更喜欢 Zustand 的简洁性。不过实际上有很多旧的 Rect 应用程序在使用 Redux。

如果你使用 Redux，那一定要看看 Redux Toolkit^[19]。如果你对状态机感兴趣，可以看看 XState^[20] 或 Zag^[21]。作为替代方案，如果你需要全局存储、但又不喜欢 Zustand 或 Redux 的方式，还可以看看其他流行的局部状态管理解决方案，如 Mobx^[22]、Jotai^[23] 或 Nano Stores^[24]。

建议：

• useState/useReducer 用于局部或共享状态管理

• 选择性使用 useContext 来实现少量全局状态管理

• Zustand（或其他替代方案）用于大量全局状态管理

数据获取

React 的内置 Hook 对于管理 UI 状态很有用，但在处理远程数据的状态管理（即缓存）和数据获取时，我建议使用专门的数据获取库，如 TanStack Query^[25]（前身为 React Query）。

TanStack Query 并没有把自己定位成只是一个状态管理库，它主要是提供了 API 来获取远程数据，但会对获取到的数据进行状态管理（比如：缓存、乐观更新(optimistic updates)）。

TanStack Query 专为使用 REST API 而设计。不过现在它也支持 GraphQL。当然，如果你想为 React 找一个更专业的 GraphQL 库，可以看看 Apollo Client^[26]（很受欢迎）、urql^[27]（轻量）或 Relay^[28]（由 Facebook 开发）。

如果你已经在使用 Redux，并且想在 Redux 中集成数据获取和状态管理功能，那么可以考虑 RTK Query^[29]，而非使用 TanStack Query，它能将数据获取功能很好地集成到 Redux 中。

如果你需要同时控制前端和后端（都使用 TypeScript），可以试试 tRPC^[30]，它能实现端到端的类型安全 API，极大地提高了开发效率和开发体验。你还可以将它与 TanStack Query 结合使用，在享受数据获取便利的同时，通过类型化函数从前端调用后端。

最后，如果你的（元）框架支持 React Server Components/Server Functions（RSC/RSF）（如 Next.js），你可以使用它们来进行数据获取。它们允许你在服务器端获取数据并传递给客户端，这样就无需使用客户端数据获取库了。

建议：

• 服务器端数据获取：如果（元）框架支持，使用 React Server Components/Functions

• 客户端数据获取

  • TanStack Query（适用于 REST API 或 GraphQL API），可与 axios^[31] 或 fetch^[32] 结合使用

  • Apollo Client（适用于 GraphQL API），用于更复杂的 GraphQL 体验

  • tRPC 用于紧密耦合的客户端-服务器架构

使用 React Router 设定路由

如果你使用像 Next.js 这样的 React 框架，其实已经内置了路由功能。然而，如果你是在客户端渲染的 React 项目中（如没有 SSR 的 Vite 项目）使用 React，那么最受欢迎的路由库是 React Router^[33]。

今年可能是 TanStack Router^[34] 的崛起之年，它是一个新的 React 路由库。对于在 React 项目中使用 TypeScript 的开发者来说，它是 React Router 的绝佳替代品。目前它仍处于测试阶段，但熟悉 TanStack 的人都知道它会非常出色。

React Router 和 TanStack Router（与 TanStack Start 结合）都在开发对 React Server Components（RSC）的支持。这样你就可以在服务器端执行组件，来满足不同的场景需要（如减少打包尺寸、实现服务器端数据获取）。

如果你是刚开始学习 React，那么打算在项目中引入路由器之前，可以先尝试一下 React 的条件渲染。它虽然不能替代路由，但能让你了解在页面级别替换组件的原理。

建议：

• 服务器端路由：使用 Next.js

• 客户端路由

  • 最常用的是 React Router

  • 热门趋势是 TanStack Router

CSS 样式

React 关于设置样式有很多选择，本节并不能完全覆盖，在这里可以跟大家讲一个大概。

对于 React 的初学者而言，可以从在 JSX 中直接使用 style prop 对象设置内联样式开始，这是最简单的方式，不过实际项目中很少使用。

const Headline = ({ title }) =>
  <h1style={{color: 'blue' }}>
      {title}
  </h1>

这种方案还可以搭配外部的 CSS 文件一起使用。

import'./Headline.css';

const Headline = ({ title }) =>
  <h1className="headline"style={{color: 'blue' }}>
      {title}
  </h1>

当你的应用程序规模扩大时，还有其他样式设计方法可供探索。

提示：如果你想在 React 中有条件地应用 className，可以使用 clsx^[35] 等工具库。

首先，我推荐 Tailwind CSS^[36]，它是最受欢迎的工具类优先的 CSS 解决方案。提供了大量预定义的 CSS 类，提高开发效率，简化 React 应用程序的设计系统，但你需要熟悉所有的类，而且会有产生大量 CSS 类的冗长内联代码：

const Headline = ({ title }) =>
  <h1className="text-blue-700">
      {title}
  </h1>

其次，我建议你了解一下 CSS Modules，它是众多 CSS-in-CSS 解决方案之一。CSS Modules 允许你将 CSS 封装到与组件相关联的模块中，这样样式就不会意外泄露到其他组件：

import styles from'./style.module.css';

const Headline = ({ title }) =>
  <h1className={styles.headline}>
      {title}
  </h1>

最后，我要介绍（但不再推荐）的是 Styled Components，它是众多用于 React 的 CSS-in-JS 解决方案之一。这种方法由 styled-components^[37] 库（或 emotion^[38] 等替代库）实现，它借助 JavaScript 以及 React 组件的方式来创建并组织样式。

import styled from'styled-components';

const BlueHeadline = styled.h1`
    color: blue;
`;

const Headline = ({ title }) =>
  <BlueHeadline>
      {title}
  </BlueHeadline>

选择 CSS-in-CSS 还是工具类优先的 CSS 取决于你项目的实际情况。目前的趋势是采用以 Tailwind CSS 为行业标准的工具类优先的 CSS。由于 CSS-in-JS 解决方案在服务器端环境中存在性能和水合问题，所以不再那么受欢迎，尽管一些新的解决方案（但不如 Styled Components 或 Emotion 受欢迎）正在解决这些问题。

其他可以查看库还包括：PandaCSS^[39], linaria^[40], vanilla-extract^[41], nanocss^[42], UnoCSS^[43] 和 Styled JSX^[44].

建议：

• 以实用类优先的 CSS（最受欢迎）

  • 例如 Tailwind CSS

• CSS-in-CSS

  • 例如 CSS Modules

• CSS-in-JS

  • 例如 Facebook 的 StyleX^[45]（编译为工具类优先的 CSS）

UI 库

作为 React 初学者，我还是建议先学习如何构建可重用组件，这会是很好学习效果。不管是下拉列表、选择、单选按钮还是复选框，你都应该知道如何来创建这些 UI 组件。

不过，如果你没有足够的资源来自己设计组件，那么就需要现成的一些 UI 库。UI 库一般会为你预置很多现成的组件，有统一的设计风格、丰富的功能交互或是可访问性支持：

• Material UI（MUI）^[46]（在自由职业项目中仍然最受欢迎）

• Mantine UI^[47]（2022 年最受欢迎）

• Chakra UI^[48]（2021 年最受欢迎）

• Hero UI^[49]（前身为 Next UI）

• Park UI^[50]（基于 Ark UI）

• PrimeReact^[51]

不过，目前的趋势是无头 UI 库。它们没有自带样式，但具备现代组件库所需的所有功能和可访问性。大多数情况下，它们会与工具类优先的 CSS 解决方案（如 Tailwind CSS）配合使用：

• shadcn/ui^[52]（2023 - 2024 年最受欢迎）

• Radix^[53]（shadcn/ui 的基础）

• React Aria^[54]

• Ark UI^[55]（由 Chakra UI 的开发者制作）

• Ariakit^[56]

• Daisy UI^[57]

• Headless UI^[58]

• Tailwind UI^[59]（收费）

与其他 UI 库相比，以下这些可能有些过时了：

• Ant Design^[60]

• Semantic UI^[61]

• React Bootstrap^[62]

• Reactstrap^[63]

动画库

网页应用程序中的所有动画都始于 CSS。然而，你很快会发现 CSS 动画可能无法完全满足你的需求。一些流行的 React 动画库包括：

• Motion^[64]（最推荐，前身为 Framer Motion）

• react-spring^[65]

可视化和图表库

如果你真的想自己从头构建图表，那就离不开 D3。它是一个底层可视化库，能提供创建出色图表所需的一切。不过，D3 的学习曲线很陡峭，因此许多开发者选择 React 图表库，牺牲一些灵活性，使用现成的图表。流行的解决方案有：

• Recharts^[66]（个人推荐）

  • 现成的图表

  • 出色的可组合性

  • 支持定制

• visx^[67]

  • 介于高层抽象与 D3 之间的水平

  • 学习曲线较陡

• 现成图表更多，自定义难度更大

  • Victory^[68]

  • nivo^[69]

  • react-chartjs^[70]

表单库

目前 React 中最受欢迎的表单库是 React Hook Form^[71]。它具备所需的一切功能：验证（最常用的是 zod^[72]）、表单提交、表单状态管理等等。对于在 React 中开始使用表单来说，是一个很棒的库。

一个新兴的替代方案是 Conform^[73]，它与全栈应用程序的集成更加出色。

另外，你也可以使用 Formik^[74] 或 React Final Form^[75]。如果你正在使用 React UI 库，可以了解一下它们与这些表单库的集成方式。

建议：

• React Hook Form

  • 集成 zod 进行验证

代码结构

如果你想采用统一的代码风格，可以在 React 项目中使用 ESLint^[76]。像 ESLint 这样的代码检查工具可以强制执行特定的代码风格。例如，你可以通过 ESLint 设置要遵循的流行样式指南。你还可以将 ESLint 集成到你的 IDE/编辑器中，帮助指出每一个错误。

如果你想采用统一的代码格式，可以在 React 项目中使用 Prettier^[77]。它是一个有自己风格的代码格式化工具，只有少数可选配置。你可以将它集成到编辑器或 IDE 中^[78]，这样每次保存文件时它都会格式化代码。不过，Prettier 并不能替代 ESLint，但它能与 ESLint 很好地集成^[79]。

2025 年，Biome^[80]（前身为 Rome）也许会成为一颗冉冉升起的新星。ESLint 和 Prettier 在设置、尤其是它们之间的协作方面，并不是最受开发者喜爱的工具。但在每个 Web 开发者的日常工作中，它们都是必不可少的。Biome 希望成为 Prettier 和 ESLint 的替代品，它提供一个基于 Rust 的快速、一体化的工具链。

建议：

• 使用 ESLint + Prettier

• 可选的了解 Biome

认证

你可能要问你的 React 项目引入注册、登录和注销等功能做身份验证，或是其他像密码重置和密码更改的功能。这些功能远远超出了 React 的范围，因为这是后端应用程序会为你管理的事情。

最好的学习方式是自己实现一个带有认证功能的全栈应用程序。由于认证涉及许多安全风险和一些并非人人都了解的细节，我建议在生产环境中使用第三方认证服务：

• Lucia^[81]（资源）

  • Oslo：认证和加密

  • Arctic：支持 50 多个提供商的 OAuth 2.0

• Better Auth^[82]

• Auth.js^[83]

• Clerk^[84]（收费）或 Kinde^[85]（收费）

• Supabase（Auth）^[86]

• AuthKit^[87]

• Auth0^[88]

• AWS Cognito^[89]

后端

由于将 React 迁移到服务器端的趋势日益明显，React 项目最自然的选择是使用（元）框架，如 Next.js（主要用于动态 Web 应用程序）或 Astro（主要用于静态网站）。React Router（前身为 Remix）和 TanStack Start 也是不错的替代方案，但它们仍处于早期开发阶段。

如果你由于各种原因无法使用全栈框架（但仍可以使用 JS/TS），那就需要了解一下 tRPC^[90] 或 Hono^[91]。值得一提的还有传统但非常流行的 Node 框架 Express^[92]。其他替代方案有 Fastify^[93]、Nest^[94] 或 Elysia^[95]。

另外，Koa^[96] 和 Hapi^[97] 也值得一提。

数据库

虽然 React 本身与数据库并无直接关联，但如今全栈 React 应用程序越来越受欢迎，React 与数据库层的距离比以往都更近了。在开发 Next.js 应用程序时，你很可能会用到数据库对象关系映射（ORM）。目前最受欢迎的 ORM 选择是 Prisma^[98]，而 Drizzle ORM^[99] 是一个逐渐兴起的替代方案。

其他替代方案还有 Kysely^[100] 和仅适用于 PlanetScale 的 database-js^[101]。

在选择数据库方面，Supabase（或 Firebase）是不错的数据库提供商。Supabase 基于 PostgreSQL，既可以自行托管，也能作为付费服务使用。

流行的 serverless 数据库替代方案有 PlanetScale^[102]（付费）、Neon^[103]、Xata^[104] 和 Turso^[105]。

网站托管

部署和托管 React 应用程序与部署其他 Web 应用程序类似。如果你希望完全掌控自己的环境，可以考虑使用 Digital Ocean^[106] 或 Hetzner^[107] 等服务商的服务，这些选项允许你自行管理基础设施。

如果你更倾向于让托管平台为你处理一切的 “放手式” 方法，Vercel^[108] 是一个备受好评的选择，尤其适用于使用 Next.js 构建的项目。

处于中间地带的是 Coolify^[109]，它提供了一个出色的解决方案，在提供一定自主性的同时，简化了许多托管任务。

如果你已经在使用 Firebase/Supabase 等第三方后端作为服务，那么可以查看它们是否也提供托管服务。其他受欢迎的托管提供商还有 Render^[110]、Fly.io^[111]、Railway^[112]，或者直接选择 CloudFlare/AWS/Azure/Google Cloud。

测试

测试 React 应用程序的基础是像 Vitest^[113]（推荐）或 Jest^[114] 这样的测试框架。它为你提供测试运行器、断言库以及监测（Spying）、模拟、Stubbing 功能，这些都是一个全面的测试框架所必需的。

最终，你可能会使用流行的 React Testing Library（RTL）^[115]，它在你的测试框架环境中使用，是一个 React 的全面测试库。RTL 可以渲染你的组件，并在 HTML 元素上模拟事件。之后，你的测试框架就用于断言了。

在选择 React 端到端（E2E）测试的工具时，两个最受推荐、流行的选择是 Playwright^[116]（推荐）和 Cypress^[117]。这两个工具都允许你在浏览器中自动化和模拟用户交互，确保你的 React 应用程序从用户的角度来看，表现是符合预期的。

建议：

• 单元/集成测试：Vitest + React Testing Library（最受欢迎）

• 端到端测试：Playwright（或 Cypress），

• 也可选择使用 Vitest 进行快照测试

不可变数据结构

原生 JavaScript 提供了许多内置工具，可将数据结构当作不可变的来处理。然而，如果你和你的团队觉得有必要强制使用不可变数据结构，最受欢迎的选择是 Immer^[118]。

国际化

在为你的 React 应用程序进行国际化（i18n）时^[119]，你不仅要考虑翻译问题，还要考虑复数形式、日期和货币的格式化，以及其他一些事项。以下是处理这些问题最流行的库：

• FormatJS^[120]

• react-i18next^[121]

• Lingui^[122]

• next-intl^[123]（适用于 Next.js）

富文本编辑器

说到 React 中的富文本编辑器，我能想到的有：

• TipTap^[124]

• Plate^[125]

• Lexical^[126]

• Slate^[127]

支付功能

集成支付解决方案到 React 应用程序中时，Stripe 和 PayPal 是最常用的提供商。它们都为 React 提供了无缝的集成选项。

• PayPal^[128]

• Stripe

  • React Stripe Elements^[129]

  • Stripe Checkout^[130]

其他支付提供商还有已被竞争对手收购的 Braintree^[131]（PayPal 旗下）和 Lemon Squeezy^[132]（Stripe 旗下）。

时间处理

如果你的 React 应用程序经常处理日期、时间和时区相关的内容，可以考虑使用专门的库来高效管理。以下是一些选择：

• date-fns^[133]

• Day.js^[134]

桌面应用程序

Electron^[135] 和 Tauri^[136] 是用于跨平台桌面应用程序的首选框架。

文件上传

• 使用 <input type="file"> 表单字段

• react-dropzone^[137]

邮件处理

如果只使用 HTML 来渲染电子邮件会很麻烦。幸运的是，有一些库可以帮助你使用 React 组件创建响应式的 HTML 电子邮件：

• react-email^[138]（推荐）

• mjml^[139]

• Mailing^[140]

拖放功能

就我个人而言，我使用过 react-beautiful-dnd 的后续版本^[141]，对它没有负面评价。另一个受欢迎的替代方案是 dnd kit^[142]，它提供了更多的灵活性和选项，但学习曲线较为陡峭。

移动开发

将 React 从 Web 应用扩展到移动应用的首选解决方案仍然是 React Native^[143]。用于创建 React Native 应用程序的最流行框架是 Expo^[144]。

如果你需要在 Web 和移动设备上使用统一的组件，可以看看 Tamagui^[145]。

VR/AR

使用 React 可以涉足虚拟现实（VR）或增强现实（AR）领域。说实话，我没有使用过这些库，而且大多数还处于早期（实验性）阶段，但我知道以下这些与 React 中的 AR/VR 相关的库：

• react-three-fiber^[146]（很受欢迎的 3D 库，不过我也见过它用于 VR 的示例）

• react-360^[147]（已存档）

• aframe-react^[148]（不再维护）

原型设计

如果你有 UI/UX 背景，可能想要使用工具为新的 React 组件、布局或 UI/UX 概念进行快速原型制作。我个人使用 Figma^[149]。对于粗略但轻量级的草图，我喜欢用 Excalidraw^[150]，也有人更喜欢 tldraw^[151]。

文档编写

如果你负责为你的组件编写文档，有许多不错的 React 文档工具可供选择。我在许多项目中使用过 Storybook，对它的评价比较中立。我也听说过其他这些解决方案的好评：

• Docusaurus^[152]

• Styleguidist^[153]

• React Cosmos^[154]

总结

我们可以把“React 生态系统”看成是以 React 为核心的“框架”，这是有一定灵活性的。你可以基于项目的自身状况，自行决定要采用加入哪些库。当然，你也可以从小处开始，先添加一些库来解决特定问题。相比之下，如果你需要 React，那么只用 React 来保持项目轻量也完全没问题。

原文链接：React Libraries for 2025^[1]，翻译时有删改。

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍

参考资料

[1] 

React Libraries for 2025: https://www.robinwieruch.de/react-libraries/