2023 年的 React 生态（上）

React 是用于构建用户界面的JavaScript库，其核心是让开发者能够使用函数组件创建组件驱动的用户界面。它带有一些内置解决方案，例如，用于本地状态、副作用和优化性能的 React Hooks，但这些只能处理函数（组件和Hook）以创建 UI。React 拥有一个庞大的生态系统，可以帮助开发人员更快地实现复杂的UI。本文就来看看 React 最新的生态系统，以实现快速技术选型！

创建项目

在 React 社区中，最受欢迎的创建 React 项目的工具就是 Vite，它允许使用各种库（例如 React）+ 可选的 TypeScript 组合创建项目，它具有强大的性能。

如果你已经熟悉 React，可以选择最流行的（元）框架之一 Next.js 作为替代，它建立在 React 之上。 这个领域中另一个流行但较新的框架是 Remix。

虽然 Next.js 最初用于服务端渲染（Web 应用），但它也可用于静态站点生成。 但是，如果正在寻找一个考虑到静态内容最佳性能的框架，可以考虑使用 Astro，它与框架无关，因此可以与 React 一起使用。

建议：

• Vite：用于客户端 React 应用；
• Next.js ：用于服务器端渲染的 React 应用；
• Astro：用于静态站点生成的 React 应用。

包管理器

JavaScript 生态系统（以及 React）中默认且使用最广泛的包管理器就是 npm。 在 React 应用中安装依赖项时，通常会使用 npm。 然而，在过去几年中，yarn 一直是一个成功的替代品。 另外，pnpm 是一个最新的替代品，它带来了巨大的性能提升。

如果碰巧创建了多个相互依赖或共享一组通用自定义 UI 组件的 React 应用，可能需要了解 monorepo 的概念。前面提到的所有包管理器都允许开发者使用其内部工作区功能创建 monorepos。但是，使用 yarn/pnpm 可以获得最好的开发体验。 结合 Turborepo 等 monorepo 工具，monorepo 体验变得更完美。

建议

• 选择一个包管理器并坚持使用；
• npm：默认且使用最广泛；
• 如果是 monorepo，使用 Turborepo。

状态管理

React 提供了两个内置的 Hook 来管理本地状态：useState 和 useReducer。如果需要全局管理状态，可以选择使用 React 内置的 useContext Hook，在不使用 props 的情况下将 props 从顶级组件传递到下面的组件，从而避免 props drilling 的问题。这三个 hooks 使开发人员能够在 React 中实现强大的状态管。

如果需要过于频繁地使用 React 的 Context 来处理共享/全局状态，那么可以考虑使用最流行的状态管理库：Redux。 它可以管理全局应用状态，可以由连接到其全局 store 的任何 React 组件进行读取和修改。如果使用 Redux，可以了解一下 Redux Toolkit。它在 Redux 的核心之上提供了一个很棒的 API，极大地改善了开发人员使用 Redux 的体验。

作为替代方案，如果喜欢全局存储的总体思路但不喜欢 Redux 的实现方式，可以使用其他流行的本地状态管理解决方案，例如 Zustand、Recoil、XState 或 Jotai。

建议

• useState/useReducer：用于本地状态管理；
• useContext：用于小的全局状态管理；
• Redux：用于大的全局状态管理（或替代方案）。

数据获取

React 的内置 Hook 非常适合 UI 状态，但是当涉及到远程数据的状态管理（以及数据获取）时，建议使用专用的数据获取库，例如 TanStack Query（以前称为 React Query）。 虽然 TanStack Query 本身不被视为状态管理库，因为它主要用于从 API 获取远程数据，但它会处理此远程数据的所有状态管理（例如缓存、乐观更新）。

TanStack Query 专为使用 REST API 而设计，现在它也支持 GraphQL。 但是，如果正在为 React 前端寻找专用的 GraphQL 库，请查看 Apollo Client（流行）、urql（轻量级）或 Relay（Facebook 提供）。

如果已经在使用 Redux 并希望在 Redux 中添加具有集成状态管理的数据获取，而不是添加 TanStack Query，可能考虑使用 RTK Query，它将数据获取巧妙地集成到 Redux 中。

另外，如果可以控制 TypeScript 编写的后端，可以考虑使用 tRPC 以获得端到端类型安全 API。

建议

• TanStack Query（REST API、GraphQL API）；
• axios：数据获取库；
• Apollo Client（GraphQL API）；
• tRPC：端到端类型安全。

路由

如果使用的是像 Next.js 这样的 React 框架，那么路由已经处理好了。如果在没有框架的情况下使用 React，并且仅用于客户端渲染（例如没有 SSR 的 Vite），那么最强大和最流行的路由库就是 React Router。考虑到完全支持 TypeScript 的新替代方案是 TanStack Router。

如果在带有 React Router 的 React 中使用客户端路由，那么在路由级别引入代码拆分是很容易的。 如果需要进行代码拆分，可以用 @loadable/component 来替代 React.lazy() ，这会给你更好的用户体验和更多的选择。

建议

• React Router
• 如果喜欢 TypeScript 和 TanStack Query，可以考虑使用 TanStack Router，但是它相对较新。

CSS样式

对于 React 初学者，通过在 JSX 中使用样式对象来开始使用内联样式和简单的 CSS 是很好的：

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

内联样式可用于在 React 的 JSX 中使用 JavaScript 动态添加样式，而外部 CSS 文件可以保存 React 应用的所有剩余样式：

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

当应用不断增长时，还有许多其他样式实现方式。 首先，建议将 CSS Module作为众多 CSS-in-CSS 解决方案之一。 Vite 支持 CSS Module，它提供了一种将 CSS 封装到组件范围模块中的方法。这样，它就不会意外地泄漏到其他 React 组件的样式中。 虽然应用的某些部分仍然可以共享样式，但其他部分不必访问它。在 React 中，CSS Module 通常是将 CSS 文件与 React 组件文件放在一起：

import styles from './style.module.css';
const Headline = ({ title }) =>
  <h1 className={styles.headline}>
    {title}
  </h1>

其次，推荐 Styled Components 作为 React 的众多 CSS-in-JS 解决方案之一。

import styled from 'styled-components';
const BlueHeadline = styled.h1`
  color: blue;
`;
const Headline = ({ title }) =>
  <BlueHeadline>
    {title}
  </BlueHeadline>

第三，推荐 Tailwind CSS 作为最流行的 Utility-First-CSS 解决方案。 它带有预定义的 CSS 类，无需自己定义即可使用。 这可以提高开发人员的效率，并简化了 React 应用的设计系统，但需要权衡了解所有类和许多 CSS 类的冗长内联：

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

无论选择 CSS-in-CSS、CSS-in-JS 还是 Utility-First-CSS 都取决于具体场景。这些策略适用于更大的 React 应用。 如果想在 React 中有条件地应用一个类名，可以使用像 clsx 这样的实用程序。

建议

• CSS-in-CSS：CSS Module
• Utility-First-CSS：Tailwind CSS
• CSS-in-JS：Styled Components（最受欢迎）、Emotion（备选方案）
• 条件 CSS 类：clsx

UI组件库

如果希望使用一个 UI 组件库，它包含许多共享相同设计系统的预构建组件。以下所有 UI 库都带有基本组件，如按钮、下拉菜单、对话框和列表：

• Ant Design（最推荐）
• Material UI（最受欢迎）
• Mantine UI（最推荐）
• Chakra UI （最推荐）
• Radix （无样式设计系统）
• Tailwind
• Headless UI
• Daisy UI
• Tailwind UI (非免费）
• Semantic UI
• React Bootstrap
• Reactstrap
• NextUI
• Primer

尽管这些 UI 组件库都带有许多内置组件，但它们无法使每个组件都像只专注于一个 UI 组件的库一样强大。 例如，react-table-library 可以在 React 中创建强大的表格组件，同时还提供主题（例如 Material UI），以便很好地融入流行的 UI 组件库。

动画

有时 CSS 动画无法满足我们的需求。可以尝试使用 React Transition Group，这使开发人员可以使用 React 组件执行动画。 其他著名的 React 动画库如下：

• Framer Motion （最推荐）
• react-spring（经常推荐）
• react-motion
• react-move
• Animated (React Native)

可视化

如果想从头开始构建图表，可以尝试使用 D3。它是一个基础可视化库，提供了创建图表所需的一切。如果只是想选择了一个现成的 React 图表库，下面是一些流行的解决方案：

• 推荐: Recharts （出色的可组合性）
• visx（学习难度大）
• 现成的图表，较难定制：

• Victory
• nivo
• react-chartjs

2023 年的 React 生态（下）https://developer.aliyun.com/article/1411449