React 年度全家桶大全

大家好，这里是大家的林语冰。坚持阅读，自律打卡，每天一次，进步一点。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 React Libraries for 2024。

本期共享的是 ------ 新年 React 生态全方位无死角的人气开发库和全家桶工具大放送，只有你想不到，没有你找不到。

React 由来已久，从那时起围绕组件驱动库进化出了一个全面但势不可挡的库生态系统。其他编程语言或库/框架的开发者通常难以搞懂 React 创建 Web App 的所有库。

本质上，React 使我们能够诉诸函数式组件创建组件驱动的 UI。不过，React 也附赠了内置解决方案，比如用于局部状态、副作用和性能优化的 Hook。但毕竟，我们只是在处理创建 UI 的函数（组件和 Hook）。

React，启动！

React 初学者的首当其冲是：如何启动 React 项目。React 社区中人气最高的选择是 Vite，Vite 允许我们使用各种库 + 选用 TS 组合来创建项目。Vite 拥有令人喵瞪狗呆的性能。

如果您已经是 React 高手，您可以选择其人气最高的（元）框架之一来取代 Vite：Next。Next 构建于 React 之上，因此我们需要 React 的知识储备。该领域另一个人气爆棚的备胎方案是 Remix。

虽然 Next 最初用于 Web App 的 SSR（服务端渲染），但 Next 也可以与其他渲染模式用于 SSG（静态站点生成）。Next 的最新福利是 RSC（服务器组件），去年之后 RSC 通过将组件从客户端移到服务器，促成了重大范式转变。

如果您正在寻求一个静态内容性能最佳的框架，您可以瞄一下 Astro，它与框架无关，因此可以与 React "梦幻联动"。尽管使用 React 之类的框架来创建组件，但 Astro 只会向浏览器提供 HTML 和 CSS。当且仅当这些组件变为交互式时，客户端才会请求必要的 JS。

如果您只想了解 Vite 同款工具的工作原理，可以尝试自己搭建一个 React 项目。我们会从带有 JS 的简单 HTML 项目开始，然后自行添加 React 及其支持工具（比如 Babel）。这并非我们日常工作的普遍刚需，尤其自从 Vite 取代 Webpack 之后，但了解底层工具是一个很好的学习支线。

如果您是想尝鲜的 React 高手，请瞄一下 Nitro/Waku。后者出自 "Zustand 之父"，且支持 RSC。

粉丝福利：

• Vite 用于 CSR（客户端渲染）的 React App
• Next 用于 SSR 的 React App
• Astro 用于 SSG 的 React App
• 可选的学习支线：从零搭建一个 React 项目

React 包管理器

在 JS 生态系统中安装库（即依赖、Node 软件包），普遍使用的包管理器是 npm，因为 npm 伴随每次 Node 安装默认提供。虽然但是，yarn 和 pnpm 是优秀的竞品。尤其 pnpm 性能有质变。

如果您碰巧创建了多个相互依赖、或共享一组通用的自定义 UI 组件的 React App，您可能需要了解 monorepo（多库开发）的概念。上述的所有包管理器都允许我们使用其内部工作区（workspace）功能来创建 monorepos，虽然但是，本人使用 pnpm 享受了最佳的 DX（开发体验）。与 Turborepo 等 monorepo 管道工具结合，monorepo 体验更加完美。

粉丝福利：

• 选择一个包管理器并坚持使用
  • 默认且普遍使用的 npm
  • 性能质变，但较新且人气一般的 pnpm
• 如果需要 monorepo，请瞄一下 Turborepo

React 状态管理

React 内置了两个 Hook 来管理局部状态：useState 和 useReducer。如果需要全局管理状态，可以选择内置的 useContext，将 props 从顶层组件传到其下的组件，无需使用 props，规避 props drilling 的问题。

这三个 React Hook 都使开发者能够实现给力的状态管理，状态管理要么通过使用同位组件中的 useState/useReducer，要么通过将它们与 useContext 结合全局管理。

如果您发现自己高频使用 Context 来实现共享/全局状态，那么您绝对应该瞄一下 Zustand。Zustand 允许我们管理全局 App 状态，连接到其 store 的任何 React 组件都能读写该状态。

尽管我想说 Zustand 已成为社区的事实标准，但一旦需要状态管理库，我们可能无法无视 Redux ------ 它仍然是人气最高的状态管理库。过去几年，本人并没有在个人项目中自由使用 Redux，因为俺偏爱 Zustand 的简单性，虽然但是，我们会发现一大坨老旧的 React App 使用了 Redux。

如果您碰巧使用 Redux，那么您一定也该瞄一下 Redux Toolkit。如果您对状态机感兴趣，请瞄一下 XState/Zag。作为备胎方案，如果您需要全局存储但不喜欢 Zustand/Redux，请瞄一下其他人气爆棚的局部状态管理解决方案，比如 Jotai/Recoil/Nano Stores。

粉丝福利：

• useState/useReducer 用于共置或共享状态
• 选用 useContext 来启用迷你全局状态
• Zustand（或备胎方案）适用于一大坨全局状态

React 数据请求

内置 Hook 十分适合 UI 状态，但是涉及到远程数据以及数据请求的状态管理（读取：缓存）时，个人建议使用专属数据请求库，比如 TanStack Query，其曾用名为 React Query。

虽然 TanStack Query 本身并不被视为状态管理库，因为它主要用于从 API 请求远程数据，但它会为我们处理该远程数据的所有状态管理，比如缓存、积极更新。

TanStack Query 专为 REST API 量身定制。虽然但是，现在它也支持 GraphQL。如果您正在为 React 前端寻找专属 GraphQL 库，请瞄一下:

• Apollo Client（人气爆棚）
• urql（轻量级）
• Relay（Facebook 提供）

如果您已使用 Redux，且希望添加集成状态管理的数据请求功能，那么您可能需要瞄一下 RTK Query，它将数据请求巧妙集成到 Redux 中，而不是添加 TanStack Query。

最后、但并非最不重要的一点是，如果您控制均为 TS 的前后端，请瞄一下 tRPC E2E（端到端）类型安全的 API。去年本人一直在宠幸 tRPC，它显著提高了生产力和 DX。tRPC 可以与 TanStack Query "梦幻联动"，实现了数据请求的所有细节，同时仍能够使用类型化函数从前端调用后端。

粉丝福利：

• TanStack Query（REST/GraphQL API）
  • 与 axios/fetch 结合
• Apollo Client（GraphQL API）
• 用于紧密耦合的 CS（客户端-服务器）架构的 tRPC
• 可选的学习支线：了解 TanStack Query 的工作原理

React Router

如果您使用了 Next 之类的框架，那么路由已经为您处理妥当。虽然但是，如果您在无框架的情况下使用 React，且只用于 CSR，比如无 SSR 的 Vite，那么最给力和人气最高的路由库是 React Router。TanStack Router 是一种完全支持 TS 的新型备胎方案。

如果您在 React 中使用客户端路由和 React Router，那么在路由级别引入代码分割并不需要太多工作。

当您作为新手上路时，在项目集成路由之前，您可以先尝试条件渲染。它并不是路由的替代品，而是让您了解如何在页面级别上替换组件。

粉丝福利：

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

React 中的 CSS 样式

React 中的 CSS 有一大坨选择，甚至众说纷纭，因此将所有内容塞入本节显然是不可能事件。

作为 React 新人，可以通过 JSX 的样式对象从内联样式和简单的 CSS 起步。但这应该很少用于实际应用：

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

虽然内联样式可在 JSX 中使用 JS 动态添加样式，但外部 CSS 文件可以保存 React App 的所有剩余样式：

import './Headline.css'

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

一旦 App 规模爆涨，就必须寻求其他样式方案。

首先，个人建议您了解 CSS 模块，将其作为众多 CSS-in-CSS 解决方案之一。CSS 模块为我们提供了一种将 CSS 封装到组件同位模块中的方案。这样，样式就不会意外污染其他组件：

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

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

其次，我想向您表演 Styled Components（不再推荐），它是众多 CSS-in-JS 解决方案之一。此方案是由一个名为 styled-components 的库提供（或其备胎，比如 emotion），该库把 JS 创建的样式与组件一起放置在同位组件或同位文件中：

import styled from 'styled-components'

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

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

第三，个人推荐 Tailwind 作为人气最高的实用优先 CSS 解决方案。它带有预定义的 CSS 类。开发者更高效，并简化了 React App 的设计系统，但需要权衡所有类和一大坨 CSS 类的详细内联：

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

选择 CSS-in-CSS 还是实用优先 CSS 取决于你。当前趋势是向实用优先 CSS 和 Tailwind 倾斜。CSS-in-JS 解决方案由于服务器端环境的问题而不再流行。粉丝请注意：如果您想按需应用 className，请使用诸如 clsx 之类的实用程序库。

粉丝福利：

• 实用优先 CSS（人气最高，比如 Tailwind）
• CSS-in-CSS（比如 CSS 模块）
• CSS-in-JS
  • 比如 Facebook 的 StyleX（编译为实用优先 CSS）
  • 比如 Styled Components（由于服务器端环境中的性能和其他问题，个人不再推荐运行时 CSS-in-JS）
• CSS-in-TS（支持 TS 和 SSR）

React UI 库

新手上路，从零构建可复用组件是一次很棒且强烈推荐的学习体验。无论是下拉列表、还是复选框，我们最终都必须知道如何创建这些 UI 组件。

虽然但是，如果我们没有资源 DIY 所有组件，那就需要使用 UI 库，该库使我们可以访问一大坨预构建组件，这些组件共享相同的设计系统、功能和可访问性规则:

• Material UI（MUI，自由项目中仍然人气最高）
• Mantine UI（2022 人气最高）
• Chakra UI（2021 人气最高）

不过，趋势正在转向 headless UI 库。它们没有样式，但具有现代组件库的所有功能和可访问性。大多数时候，它们与诸如 Tailwind 之类实用优先的 CSS 解决方案结合使用：

• shadcn/ui（2023 人气最高）
• Daisy UI
• Ark UI（出自"Chakra UI 之父"）

与上述 UI 库相比，以下这些也许稍显老派：

• Ant Design
• Sematic UI
• React Bootstrap

尽管这些 UI 库都有内部组件，但它们无法使每个组件都像只聚焦单一 UI 组件的库一样给力。举个栗子，react-table-library 允许我们创建给力的表格组件，同时还提供主题将其与 UI 库相结合。

React 动画库

Web App 中的任何动画都以 CSS 开头。最终我们会发现，CSS 动画欲求不满。通常开发者会瞄一下 React Transition Group，这使它们能够使用组件执行动画。其他众所周知的 React 动画库包括但不限于：

• Framer Motion（五星好评）
• react-spring
• react-motion

React 可视化和图表库

如果您确实想从零构建图表，那么 D3 鞭长莫及。D3 是一个低阶可视化库，可为我们提供创建叹为观止的图表所需的一切。虽然但是，学习 D3 是截然不同的冒险，因此一大坨开发者只是选择一个图表库，它可以做所有事情，换取灵活性。人气爆棚的解决方案是：

• Recharts（个人推荐）
  • 现成的图表
  • 出色的可组合性
  • 由于可选的可组合性，支持可选定制
• visx
  • 比高级抽象更倾向于低阶 D3
  • 更陡峭的学习曲线

React 表单库

React 人气最高的表单库是 React Hook Form。它万事俱备：验证（人气最高的集成是 zod）、表单提交、表单状态管理。Formik 和 React Final Form 可作为备胎方案。如果您使用的是 React UI 库，请查看它们如何与这些库之一集成。

粉丝福利：

• React Hook Form
  • 与 zod 集成验证

React 类型检查

React 附带了一个名为 PropTypes 的内部 props 验证。通过使用 PropTypes，我们可以为组件定义 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。个人不建议使用，出于历史原因简单科普。

行业标准是使用 TS。如今，很少有新的 React 项目在没有 TS 的情况下启动，因此我们也应该使用 TS：

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>
)

TS 是现今的主流方案。如果您想超越 TS 进行类型化表单验证、API 验证（比如使用 tRPC 时）等，请瞄一下 Zod。

粉丝福利：

• 如果需要类型化 JS，请使用 TS

React 代码结构

如果您想采用统一且常识性的代码风格，请使用 ESLint。诸如 ESLint 之类的 linter 强制执行特定的代码风格。举个栗子，我们可以使用 ESLint 要求遵循流行的风格指南（比如 Airbnb 风格指南）。还可以将 ESLint 集成到 IDE，它会提示每个错误。

如果您想采用统一的代码格式，请使用 Prettier。它是一个我行我素的代码格式化程序，只有少数选用的配置。我们可以将其集成到 IDE，这样每当保存文件时，它都会格式化代码。Prettier 虽然没有取代 ESLint，但它与 ESLint 集成得很好。

也许今年的后起之秀会是 OxLint。就其设置、尤其是交互而言，ESLint 和 Prettier 并非人气最高的实用程序。但它们在每个 Web 开发者的日常工作中不可或缺。Oxlint 希望通过提供迅捷（Rust 筑基）且一体化的工具链，成为 Prettier 和 ESLint 的竞品。

粉丝福利：

• ESLint + Prettier
• Oxlint 未来可期

React 认证

在 React App 中，我们可能期望引入兼具注册和注销等功能的身份验证。通常还需要其他功能，比如密码重置功能。这些功能对于 React 而言"超纲"了，因为后端 App 会为我们管理这些东东。

最佳养成方法是自己实现身份验证的后端 App，比如 GraphQL 后端。虽然但是，由于身份验证带来了一大坨安全风险和鲜为人知的技术细节，个人建议使用现有的一大坨身份验证/后端即服务解决方案之一：

• Supabase Auth
• Firebase Auth
• AWS Cognito

React 后端

由于将 React 转移到服务器大势所趋，因此 React 项目的原生栖息地会是 Next/Astro/Remix 之类的元框架。

如果由于各种原因无法使用全栈框架，同时仍可以使用 JS/TS，那就必须瞄一下 tRPC/Hono。值得一提的是，老派但人气最高的 Node 后端 Express。其他备胎方案包括但不限于 Fasitfy/Nest。

React 数据库

与 React 无关，但由于全栈 React App 大势所趋，React 比以往都更接近数据库层。在开发任何 Next App 时，我们很可能会处理数据库 ORM。目前人气最高的 ORM 是 Prisma。一个人气爆棚的备胎方案是 Drizzle ORM。

在选择数据库时，Supabase/Firebase 是有效的数据库提供商。Supabase 及其 PostgreSQL 可以自行托管或用作付费服务。提供 serverless 数据库的流行备胎方案是 PlanetScale（个人推荐）、Neon 和 Xata。

React 托管

您可以像其他任意 Web App 一样部署和托管 React App。如果您想完全控制，请选择 Digital Ocean 之类的东东。如果您想让托管一切，Netlify/Vercel（尤其是 Next）是人气爆棚的解决方案。

如果您已经在使用第三方后端作为服务（比如 Firebase/Supabase），您可以检查它们是否也提供托管。其他流行的托管提供商包括 Render、Fly.io、Railway，或直接在 AWS/Azure/Google Cloud/Hetzner 上。

React 测试

如果您想深度学习 React 的测试，测试 React App 的支柱是 Jest 之类的测试框架。Jest 为我们提供测试运行器、断言库以及监视、模拟功能。综合测试框架所需的一切。如果您是 Vite 爱好者，您应该将 Vitest 作为可行的 Jest 竞品。

至少，我们可以使用 react-test-renderer 在测试框架中渲染 React 组件。这已经足以使用 Jest/Vitest 执行所谓的快照测试。快照测试的工作方式如下：运行测试后，将创建 React 组件渲染的 DOM 元素的快照。当我们在某个时间点再次运行测试时，会创建另一个快照，该快照用作前一个快照的对比。如果差异不相同，测试框架会报错，要么必须接受快照，要么调整您的组件。

最终，我们会发现自己使用人气爆棚的 RTL（React Testing Library），它在我们的测试框架环境中使用，作为 React 的综合测试库。RTL 使渲染组件和模拟 HTML 元素上的事件成为可能。然后，我们的测试框架用于断言。

如果您正在寻找 E2E 测试工具，Playwright/Cypress 是人气最高的选择。

粉丝福利：

• 单测/集成：Vitest + RTL（人气最高）
• 快照测试：Vitest
• E2E 测试：Playwright/Cypress

React 和不可变数据结构

纯 JS 为我们提供了一大坨内置工具来处理数据结构，就好像它们是不可变的一样。虽然但是，如果您的团队需要强制执行不可变的数据结构，那么人气最高的是 Immer。

React 国际化

当涉及 React App 的国际化 i18n 时，我们不仅需要考虑翻译，还需要考虑日期和货币的格式以及其他东东。这些是处理国际化人气最高的库：

• FormatJS
• react-i18next
• Lingui

React 富文本编辑器

说到 React 的富文本编辑器，本人灵感有限：

• Plate
• Lexical
• Slate.js

React 时间管理

如果您的 React App 大量处理日期和时区，您可以引入一个库来管理这些东东。如下所示：

• date-fns
• Day.js
• Luxon

React 桌面 App

Electron 和 Tauri 是跨平台桌面 App 的首选框架。

拖拽

就个人而言，本人只用过 react-beautiful-dnd 的继任，所以无法差评。dnd kit 是一种人气爆棚的备胎方案，它提供了更多的灵活性和选项，但代价是学习曲线更陡峭。该领域的另一个备胎方案是 react-dnd。

React 移动开发

将 React 从 Web 引入移动设备的首选解决方案仍然是 React Native。用于创建 React Native App 人气最高的框架是 Expo。如果您需要跨网络和移动设备的统一组件，您需要瞄一下 Tamagui。

React VR/AR

使用 React 可以深度学习 VR（虚拟现实）或 AR（增强现实）。讲真的，本人没有用过这些库，而且大多数都处于早期阶段（实验性），但当涉及 React 的 AR/VR 时，我孤陋寡闻了：

• react-three-fiber（人气爆棚的 3D 库，随谈但是，我也看过 VR 示例）
• react-360
• aframe-react

本期话题是 ------ 你最常用且推荐的是哪个状态管理库或 UI 组件库，为什么？

欢迎在本文下方群聊自由言论，文明共享。谢谢大家的点赞，掰掰~

《前端 9 点半》每日更新，坚持阅读，自律打卡，每天一次，进步一点。