React 生态系统（2024 版本）

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

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

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

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

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

创建新项目

对 React 初学者来说，最受欢迎的方式时使用 Vite 来创建 React 项目。Vite 本身是一款通用开发打包工具，还支持其他框架项目^[3]的创建。

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

如果你已经熟悉 React，那么可以选择使用目前最流行的 Meta 框架之一的 Next.js^[4]。Next.js 基于 React 进行构建。另外一个流行的替代方案是 Remix^[5]。

Next.js 最初用于服务端渲染，不过后面加入了静态内容渲染支持。2023 年，Next.js 在 App Router 中率先引入了  React Server 组件支持，编程模型从客户端移动到服务器端，是一次重大的编程范式转变。

如果你要寻找一个对静态内容渲染具有最佳性能的框架，那么可以看看 Astro^[6]。Astro 与框架无关，构建之后只会向浏览器提供 HTML 和 CSS，仅在页面组件在进行交互的时候，客户端才会请求必要的 JavaScript。

如果你想学习 Vite 的工作原理，那么可以参照 Vite 官方的 React 项目模板^[7]，从 0 到 1 的搭建一遍。虽然这不是你日常工作中必须要做的事情，但是自从 Vite 成为 webpack 的继承者之后，了解底层工具会对你编写项目提供更多自信。

如果你是 React 老手的话，并且想尝试一些新库那么可以看 Nitro^[8] 或 Waku^[9]。Waku 也是非常著名的状态管理库 Zustand^[10] 作者的作品，提供 React Server 组件支持。

建议

• 使用 Vite 创建客户端渲染程序
• 使用 Next.js 创建服务端渲染程序
• 使用 Astro 创建静态页面程序

包管理器

提到 React 的包管理器，也就是在说 JavaScript 生态系统的包管理器。目前最被广泛使用的包括管理器是 npm，因为它是随 Node.js 一起安装的。不过现在大家更喜欢使用 yarn^[11] 或者pnpm^[12]，因为他们能带来更好的使用体验和更大的性能提升。

如果你发现创建的多个应用程序之间，出现多个相互依赖或是共享一组通用自定义 UI 组件的现象，那这时候可以了解一下多包仓库（monorepo）的概念，就是一个仓库中包含多个项目。

现在的包管理器都能通过 workspaces 特性来支持 monorepo 的构建，在这一点上 yarn、pnpm 比 npm 要好。当然，如果能再配合 Turborepo^[13] 这类 monorepo pipeline 工具的使用，体验会更好。

建议

• 选择一个包管理器并坚持使用
• 使用最广泛的是 npm
• 希望有更好性能，但目前还没那么流行的就选 pnpm
• 如果是 monorepo，请查看 Turborepo 相关教程

状态管理

React 本身提供了两个用于管理本地状态的 Hook：useState^[14] 和 useReducer^[15]。像全局状态管理的话，可以选择使用内置的 useContext^[16] Hook，这就避免了层层父子组件进行 props 传递来共享状态的问题。

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

虽然 Zustand 已经成为社区事实标准，不过说到状态管理库，你可能怎么也无法绕过 Redux——它现在仍然是最流行的状态管理库。 Redux 用起来比 Zustand 要复杂很多，不过实际上有很多旧的 Rect 应用程序在使用 Redux。

如果你正在使用 Redux，那你应该看看 Redux Toolkit^[18]。如果你对状态机感兴趣，可以查看XState^[19] 和 Zag^[20]。如果你不喜欢使用 Zustand 或者 Redux 作为全局状态管理工具，那么还有一些其他流行的全局状态管理方案，例如：Jotai^[21]、Recoil^[22] 或 Nano Stores^[23]。

建议

• useState/useReducer 用于 co-located 或共享状态
• useContext 用于小范围状态（little global state）
• Zustand（或其他替代方案）用于全局状态管理（lots of global state）

数据获取

React 提供了一些内置的管理本地状态的一些 Hook，不过当涉及到远程数据的状态管理时，我建议还是使用专用的数据获取库，比如说 TanStack Query^[24]（前身是 React Query）。

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

TanStack Query 专为 REST API 设计，不过它现在也支持 GraphQL。但是，如果你要寻找专为 GraphQL 设计的库，那么可以看一下  Apollo Client^[25]（流行）、urql^[26]（轻量）或 Relay^[27]（Facebook 出品）。

如果你正在使用 Redux，并且想要在 Redux 中添加集成了状态管理功能的数据获取方案，那么可以查看一下 RTK Query^[28]，它将数据获取的能力巧妙地继承到 Redux 中，而无需借助 TanStack Query。

最后要说的是，如果你需要同时控制前后端（均使用 TypeScript 编写），那么可以看看 tRPC^[29]，它能提供端到端类型安全的 API。去年我就一直在使用它，极大的提高了我的生产力和DX，并且它还能跟 TanS tack Query 很好的结合使用。

建议

• TanStack Query 用于 REST APIs 活 GraphQL APIs
• 与 axios^[30] 或 Fetch API^[31] 结合使用
• Apollo Client 专用于 GraphQL APIs
• tRPC 提供前后端紧密耦合的 CS 架构

路由

如果你正在使用 Next.js 这样的 React 框架，那么就已经内置了路由的功能。但是，如果你是在没有框架的情况下使用了 React，比如你的项目是使用 Vite 来创建的纯客户端渲染项目，那么最强大和最流行的路由库，非 React Router^[32] 莫属了。TanStack Router^[33] 则是另一个完全支持 TypeScript 的新替代方案。

使用 React Router 做客户端路由时，基于路由的代码分割做起来并不复杂。如果你碰巧需要做这部分的优化，那么可以使用 @loadable/component^[34]  来替代 React.lazy()。

React 中还有一套条件渲染技术，与路由功能有些相似，能实现页面级别上的组件替换，但只能处理一些简单的场景，是你在初学 React 会接触到一个技术。

建议

• 最常用的：React Router
• 未来趋势：TanStack Router
• 主要是因为一流的 TS 支持

CSS 样式

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

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

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

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

import './Headline.css';

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

一旦你的应用规模开始增大，就可以考虑其他的一些样式方案。

首先，我建议你了解一下 CSS 模块（CSS Modules），这是众多 CSS-in-CSS 解决方案之一。 CSS 模块提供了一种将 CSS 的封装与特定组件关联的技术（“component co-located modules”）。这样独属于本组件的样式，就不会泄露到其他组件中。

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

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

其次，我将向你展示另外一种样式化组件的方式，不过已经不再推荐了。这种方案的一个代表库就是 styled-components^[35]（或者 emotion^[36]），它借助 JavaScript 以及 React 组件的方式来创建并组织样式。

import styled from 'styled-components';

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

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

第 3 个我想推荐的方案是以 Tailwind CSS^[37] 为代表的工具类优先的 CSS 解决方案。Tailwind CSS 中预定义了很多 CSS 类，简化了设计系统，可以让开发人员更加高效的开发。

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

不过，也带来了一些学习成本以及行内类名冗余的代价。这也正应了的那句话，没有哪种技术是最好的，一项技术推出的背后都是基于现状的一个权衡结果。

使用 CSS-in-CSS 还是工具类优先的 CSS 方案由你决定。趋势是向工具类优先的 CSS 方案倾斜。CSS-in-CSS 由于服务器端环境的问题不再那么流行。

最后一个温馨提示：如果在你的 React  项目中需要有条件的来应用 className，那么可以考虑使用像 clsx^[38] 这样的工具库。

建议

• 工具类优先（最流行）
• 例如：Tailwind CSS
• CSS-in-CSS
• CSS 模块
• CSS-in-JS（由于存在问题，个人不再推荐）
• Styled Components 或是 Facebook 的 StyleX^[39]
• CSS-in-TS^[40]
• 支持 TypeScript 和服务器端渲染

UI 库

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

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

• Material UI^[41] (MUI) （在开源领域仍然是最受欢迎的项目）
• Mantine UI^[42]（2022 年最受欢迎）
• Chakra UI^[43]（2021 年最受欢迎）
• NextUI^[44]（基于 React Aria^[45]）
• Park UI^[46]（基于 Arc UI^[47]）

不过，趋势正在转向无头 UI 库（headless UI libraries）。它们没有样式，但具有现代组件库所需的所有功能和可访问性。这里的大多数无头 UI 库，基本上都跟实用类优先的 CSS 解决方案（如 Tailwind CSS）结合使用：

• shadcn/ui^[48]（2023 年最受欢迎）
• Radix^[49]
• React Aria^[50]
• Catalyst^[51]
• Daisy UI^[52]
• Headless UI^[53]
• Tailwind UI^[54]（收费）
• Ark UI^[55]（来自 Chakra UI 的作者）

这里还有一些 UI 库，相比其他我们已经说过的，可能会有一些过时。

• Ant Design^[56]
• Semantic UI^[57]
• React Bootstrap^[58]
• Reactstrap^[59]

以上这些都是综合性的 UI 库，包含很多内置组件。但功能上往往无法与只专注于一个 UI 组件的库强大。例如：react-table-library^[60]，是一个专注于展示表格的库，还为你提供了不同主题（比如： Material UI），方便你更好的与其他 UI 库配合使用。

动画库

我们通常会使用 CSS 来实现 Web 应用中的一些动画，当发现不够用的时候，通常会考虑 React Transition Group^[61]。其他一些有名的 React 动画库还包括：

• Framer Motion^[62]（最推荐）
• react-spring^[63]
• react-motion^[64]
• react-move^[65]

可视化图表库

如果你想从头去构建自己的图表，那么使用 D3^[66] 是没有办法的。它是一个低抽象的可视化库，虽然能提供一切能帮你创建令人炫酷图表的能力，但是学习曲线过于陡峭。因此很多开发人员会损失灵活性，直接选择一个 React 图表库使用。

目前的流行解决方案是：

• Recharts^[67]（个人比较推荐）
• 现成的图表
• 出色的可组合性
• 支持定制
• visx^[68]
• 介于高层抽象与 D3 之间的水平
• 更陡峭的学习曲线
• 预制的图表类型越多，定制就越困难
• Victory^[69]
• nivo^[70]
• react-chartjs^[71]

表单库

React 中最流行的表单库是 React Hook Form^[72]，它具有表单库所需要的一切功能：验证（最常跟 zod^[73] 集成），表单提交、表单状态管理。其他一些替代方案有 Formik^[74] 和 React Final Form^[75]。

推荐

• React Hook Form
• 与 zod 集成做校验

类型检查

React 附带了一个名为 PropTypes^[76] 的内部 props 验证库。通过使用 PropTypes，你可以为 React 组件定义传入 props 类型。每当传入错误的 prop 类型给组件时，都会收到一条错误消息：

import PropTypes from 'prop-types';

const List = ({ list }) => (
  <div>
    {list.map((item) => (
      <div key={item.id}>{item.title}</div>
    ))}
  </div>
);

List.propTypes = {
  list: PropTypes.array.isRequired,
};

不过，PropTypes 已经从 React 中移除了。现在，我不建议大家使用 PropTypes，出于历史原因，我仍然将它们保留在这里。

行业标准是在 React 应用程序中使用 TypeScript。如今，几乎所有新的 React 项目都采用 TypeScript 编写。

type Item = {
  id: string;
  title: string;
};

type ListProps = {
  list: Item[];
};

const List = ({ list }: ListProps) => (
  <div>
    {list.map((item) => (
    <div key={item.id}>{item.title}</div>
  ))}
  </div>
);

使用 TypeScript 编写代码是当今的主流方式。如果你想在 TypeScript 之外进行表单类型验证，API 验证（例如在使用 tRPC 时），可以看看 Zod^[77]。

建议

• 如果需要类型化 JavaScript，请使用 TypeScript

代码结构

如果你想在 React  项目中采用统一且通用的代码风格（code style），可以使用 ESLint^[78]。像 ESLint 这样的 Linter 工具会强制你的代码遵循某种格式。你可以使用 ESLint 要求遵循流行的风格指南，比如 Airbnb Style Guide^[79]，或是将 ESLint 集成到你的 IDE/编辑器中（比如 VSCode 的 ESLint 插件^[80]），去标识错误。

如果你想在 Raect 项目中采用统一的代码格式（code format），可以使用 Prettier^[81]。它是一个有主见（Opinionated）的代码格式化工具，只提供少数几种对外可供选择的配置。你可以将 Prettier 集成到你的 IDE/编辑器中（比如 VSCode 的 Prettier 插件^[82]），以便每次保存文件时都能自动格式化你的代码。Prettier 虽然并没有取代 ESLint，但它与 ESLint 集成得很好^[83]。

也许 2024 年的后起之秀将是 Biome^[84]（以前的 Rome（已停止维护）），因为就交互而言，ESLint 和 Prettier 并不是最受欢迎的工具，不过却是现在每个 Web 开发人员的日常工作中都必需掌握的。Biome 希望通过提供快速（基于 Rust）且一体化的工具链来成为 Prettier 和 ESLint 的替代品。

建议

• ESLint + Prettier，同时
• 给 Biome 一个机会

认证

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

最好的学习方式是自己实现一个身份验证的后端应用程序（例如 GraphQL 后端^[85]）。然而，由于身份验证涉及很多安全风险，并非每个人都知道的要注意的细节，因此我建议使用现成的很多身份验证/backend-as-a-service 解决方案：

• Lucia^[86]
• 一个非常有趣的开源项目
• 让你独立于任何第三方服务
• Supabase Auth Supabase^[87]
• Clerk^[88]
• AuthKit^[89]
• NextAuth^[90]
• Firebase Auth^[91]
• Auth0^[92]
• AWS Cognito^[93]

后端

现在有一个很明显地将 React 转移到服务器的趋势，目前最自然的选择是像 Next.js、Astro 或 Remix 这样的元框架。

如果由于各种原因无法使用全栈框架（同时仍然可以使用 JS/TS），可以看看 tRPC^[94] 或 Hono^[95]。值得一提的是老派但仍然流行的 Express 框架^[96]，其他同类替代方案还有 Fasitfy^[97] 或 Nest^[98]。

数据库

这部分其实与 React 无关。但由于全栈 React 应用程序如今越来越流行，React 现在开始更接近数据库层了。在开发 Next.js 应用程序时，你很可能要处理数据库 ORM。目前最受欢迎的 ORM 是 Prisma^[99]。另一个流行的替代方案是 Drizzle ORM^[100]。其他一些的替代方案还包括 Kysely^[101] 和 database-js^[102]（仅限 PlanetScale）。

在选择数据库时，Supabase（或 Firebase）是比较可靠的数据库提供商。Supabase with its PostgreSQL  可以自行托管或使用付费服务。

其他提供 serverless 数据库的流行替代方案是 PlanetScale^[103]（个人推荐）、Neon^[104] 和 Xata^[105]。

托管

你可以像任何其他 Web 应用程序一样部署和托管 React 应用程序。如果你想完全控制，可以选择 Digital Ocean^[106] 之类的服务商。如果你不想管太多，那么可以选择 Netlify^[107] 或 Vercel^[108]（尤其是 Next.js）这些流行解决方案。

如果你已经在使用第三方后端作为服务（例如 Firebase/Supabase），你可以看看他们是否提供托管服务。其他流行的托管提供商包括 Render^[109]、Fly.io^[110]、Railway^[111]，或直接在 AWS/Azure/Google Cloud/Hetzner 上托管。

测试

如果你想深入了解 React 中的测试，可以阅读这篇文章《How to test components in React》^[112]。要点：测试 React 应用程序的骨架通常需要像 Jest^[113] 这样的测试框架。

Jest 能为你提供测试运行器、断言库以及监测（Spying）、模拟等功能，也就是一个综合测试框架所需的一切。如果你是 Vite 的迷弟迷妹，那么可以选择 Vitest^[114] 作为 Jest 的替代。

最小化情况，你可以只使用 react-test-renderer^[115] 在测试框架中渲染 React 组件，Jest/Vitest 本身能提供快照测试。快照测试的工作方式如下：运行测试后，会创建一份 React 组件渲染的 DOM 元素的快照。当你在某个时间点再次运行测试时，会创建另一个快照，使用快照用与前一次快照的进行比对，如果不同，测试框架就会跟你抱怨，你要么必须接受快照，要么调整组件。

不过，现在最流行的 Raect 组件测试库还是 React Testing Library (RTL)^[116]，RTL 可以用来渲染组件并且模拟 HTML 元素上的事件，而我们的测试框架则专门用于断言。

如果你正在寻找适用于 React 的端到端（E2E）测试工具，Playwright^[117] 和 Cypress^[118] 最受欢迎。

建议

• 单元/集成测试：Vitest + React Testing Library (最受欢迎)
• 快照测试：Vitest
• E2E 测试：Playwright 或 Cypress

不可变的数据结构

原生 JavaScript 为你提供了大量内置工具方法来处理数据结构，不过好些工具方法都会对数据结构做修改。如果你和你的团队觉得需要强制执行不可变的数据结构，那么最受欢迎的选择是 Immer^[119]。

国际化

当涉及 React 应用程序的国际化^[120]时，你不仅需要考虑翻译，还需要考虑多元化（pluralizations）、日期和货币的格式及其他一些事情。

以下是目前最流行的库：

• FormatJS^[121]
• react-i18next^[122]
• Lingui^[123]

富文本编辑器

说到 React 中的富文本编辑器，我只能想到以下几个：

• Plate^[124]
• Lexical^[125]
• Slate.js^[126]

付款

最常见的支付提供商是 Stripe 和 PayPal。两者都可以巧妙地集成到 React 中。这里有一个与 React 集成的有效 Stripe 模板方案^[127]。

• PayPal^[128]
• Stripe
• React Stripe Elements^[129]
• Stripe Checkout^[130]

时间

如果你的 React 项目中要大量处理日期、时间和时区，那么可以引入一个库来为你管理这些事情。以下是我推荐的一些选择：

• date-fns^[131]
• Day.js^[132]
• Luxon^[133]

桌面程序

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

文件上传

• react-dropzone^[136]

邮件

• react-email^[137]（个人推荐）
• Mailing^[138]
• mjml^[139]

拖放

我使用过 react-beautiful-dnd 的后继者 @hello-pangea/dnd^[140]，所以我不能对它说任何负面的话（狗头）。

dnd kit^[141] 是一种流行的替代方案，提供了更多的灵活性和选项，但代价是学习曲线更陡峭。这个领域的另一个替代方案是 react-dnd^[142]。

移动开发

将 React 从 Web 引入移动设备的首选解决方案仍然是 React Native^[143]，用来创建 React Native 应用程序的最流行框架是 Expo^[144]。

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

VR/AR

React 也可以应用于虚拟现实或增强现实。老实说，我没有使用过任何这些库，而且大多数都还处于早期阶段（实验性），但当涉及到 React 中的 AR/VR 时，我从头到尾就知道它们：

• react-three-fiber^[146] (一个流行的 3D 库）
• react-360^[147]
• aframe-react^[148]

原型设计

如果你有 UI/UX 背景，可能希望使用一个工具来快速构建新的 React 组件、布局的原型。我个人在使用 Figma^[149]。对于粗糙但轻量级的原型，我喜欢使用 Excalidraw^[150]，其他还有一些人更喜欢 tldraw^[151]。

组件文档

如果你负责负责组件编写文档，那么目前网络上有各种简洁的 React 文档工具。我在很多项目中使用过 Storybook，不过对它持中立看法。我也听说过有关其他好的解决方案：

• Docusaurus^[152]
• Docz^[153]
• Styleguidist^[154]
• React Cosmos^[155]

总结

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