【译】2023 年的 React 生态系统

随着 React 于 2023 年庆祝成立 10 周年，该生态系统随着不断的进步和创新而继续蓬勃发展。 作为使用最广泛的 JavaScript 库之一，React 仍然是开发人员构建动态和高性能应用程序的最爱。

然而，React 生态系统中有大量可用的工具和库，为您的项目选择正确的组合可能具有挑战性。 在本文中，我们将探索开发人员广泛使用和信任的最基本的库，并帮助您就用于下一个 React 项目的正确工具做出明智的决定。

开始使用 React

对于 React 新手来说，入门可能是一项艰巨的任务。有几种不同的开始方法，这些方法可能会令人困惑。

CodeSandbox 和 Stackblitz

如果您是 React 新手，或者只是想尝试一下而不需要搭建项目，则可以使用 CodeSandbox 或 StackBlitz 等在线沙箱。 这些沙箱提供了一个虚拟环境，您可以在其中编写和测试 React 代码，而无需在计算机上安装任何内容。

Vite

除了在线沙箱之外，一个流行的选择是 Vite，它是一个构建工具，可为现代 Web 项目提供快速、轻松的开发体验。 Vite 开箱即用地支持 React，这意味着您可以快速设置 React 项目，而无需手动配置构建过程。运行以下命令并按照提示操作！

npm create vite@latest

Vite 适合中小型项目

Next.js

React 入门的另一个流行选择是 Next.js，它是一个构建在 React 之上的框架。 Next.js 提供了一组强大的功能，包括自动代码分割、服务器端渲染、静态站点生成等。 Next.js 非常适合构建需要服务器端渲染和 SEO 优化的复杂应用程序。 开始使用 Next.js 最简单的方法是使用 create-next-app 。它是一个 CLI 工具，可让您快速开始构建新的 Next.js 应用程序，并为您做好一切设置。

Next.js 适用于需要 SSR 和 SEO 优化的项目

路由

路由是任何现代 Web 应用程序的重要组成部分，并且有许多优秀的路由库可用于处理复杂的路由逻辑并创建动态的单页应用程序 (SPA)。

React Router

React 最流行的路由库之一是 React Router。 React Router 提供了一种简单的声明式方式来处理 React 应用程序中的路由，因此您可以定义路由并根据当前 URL 渲染不同的组件。

以下是设置根路由和 /about 路由的示例代码片段，每个路由呈现不同的内容：

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

在使用的框架没有路由器的情况下构建 SPA 应用时选择 React Router

TanStack Router

这个领域的新成员是 TanStack Router。它功能丰富且轻量级，但与 React Router 相比使用量相对较小。 如果您遇到仅存在于 TanStack Router 中的特定功能，您可能想尝试一下。这是一个可以帮助您做出选择的特性比较表。

Next.js

如果您使用的是 Next.js，则无需选择路由库，因为 Next.js 内置了文件路由。

如果您需要包含 SSR 或 SSG 的完整框架路由器选择 Next.js

客户端状态管理

随着应用程序的增长，更加有意识地了解状态的组织方式以及数据在组件之间的流动方式会有所帮助。 状态管理库可以更轻松地管理复杂的应用程序状态，并使您的 UI 与数据保持同步。

Redux Toolkit

Redux Toolkit 是一个流行的 React 状态管理库。 Redux Toolkit 是一组用于有效管理状态的工具和最佳实践。 它提供了用于定义和更新状态的简化 API，以及对不可变更新、可序列化操作类型等功能的内置支持。

Redux Toolkit 还包含许多附加功能，例如用于处理异步逻辑的内置 Thunk 中间件，以及用于调试 Redux 状态的 DevTools 扩展。 下面是 redux 切片的代码片段，它是应用程序中单个功能的 redux 逻辑和操作的集合：

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Redux Toolkit 用于提供功能更齐全的解决方案，具有更大的 API 和对附加功能的内置支持。

Zustand

Zustand 是 React 的另一个状态管理库，它为管理应用程序中的状态提供了清晰且轻量级的解决方案。 Zustand 提供了用于订阅状态更改的内置机制，因此您可以轻松地使 UI 与数据保持同步。

对于想要轻量级且易于使用的状态管理解决方案而又不想使用 Redux 等大型库的开销的开发人员来说，这是一个不错的选择。

以下是使用 Zustand 的简单增量计数器的代码片段：

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()

  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

Zustand 提供轻量级且简单的解决方案，易于使用且不需要太多模版代码。

服务器状态管理

服务器状态管理是指对存储在服务器上并由客户端应用程序远程访问的数据的管理。 该数据可以包括用户身份验证详细信息、数据库记录和其他后端数据。要管理 React 应用程序中的服务器状态，有几个可用的库。

TanStack Query

最流行的是 TanStack Query，它提供了一种直观而强大的方法来管理 React 应用程序中的服务器状态。 它提供了一个缓存层，可以自动管理数据的状态，根据需要获取和更新数据。

该库还提供了许多内置功能，例如自动重新获取、轮询和分页，从而可以轻松处理复杂的数据集。

以下是查询 API 并在函数组件中处理返回响应的示例代码片段：

function GitHubStats() {
  const { isLoading, error, data, isFetching } = useQuery({
    queryKey: ["repoData"],
    queryFn: () =>
      axios
        .get("https://api.github.com/repos/gopinav/react-query-tutorials")
        .then((res) => res.data),
  });

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? "Updating..." : ""}</div>
    </div>
  );
}

SWR

SWR 是另一个流行的库，用于管理 React 应用程序中的服务器状态。 “SWR” 这个名字来自 stale-while-revalidate， 一种由 HTTP RFC 5861 流行的缓存失效策略。与 TanStack Query 相比，SWR 确实有一些功能限制。

如果您使用 Redux Toolkit 进行客户端状态管理，Redux Toolkit Query 是无缝管理服务器状态的绝佳选择。

Apollo Client

Apollo Client 是另一个流行的库，用于管理 React 应用程序中的服务器状态。 它特别适合使用 GraphQL API。

表单操作

处理表单可能是一项乏味且容易出错的任务，但现在有许多优秀的表单处理库可用于 React。 一些最受欢迎的选项包括 Formik 和 React Hook Form。 这些库使表单验证、提交和错误处理变得更加容易。

Formik

虽然 Formik 提供了一个直观的 API 来管理表单状态、验证输入和提交数据，但该库并未得到积极维护。

React Hook Form

React Hook Form 应该成为 2023 年处理表单的首选库。它轻量、快速且易于使用。React Hook Form 利用 React hooks 的强大功能来管理表单状态和验证规则。 它还提供了用于构建表单的灵活 API，并允许您轻松与 Yup 和 Zod 等其他库集成以进行验证。

与 Formik 不同，React Hook Form 不需要大量模版代码，可以显着减少处理表单数据所需的代码量。 此外，React Hook Form 具有出色的性能，因为组件不会因字段值的每次变化而重新渲染。

以下是接受用户名字和姓氏的 React hook 表单的示例代码片段：

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input {...register("firstName")} />

      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("lastName", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.lastName && <span>This field is required</span>}

      <button>Submit</button>
    </form>
  );
}

使用 Yup/Zod 来 React Hook Form 以获得高性能、灵活和可扩展的表单，并具有易于使用的验证。

测试

测试是构建高质量 React 应用程序的重要组成部分。在测试 React 应用程序时，需要考虑的两个绝佳选择是用于单元测试的 Vitest 和 React Testing Library， 以及用于端到端测试的 Playwright 或 Cypress。

Vitest

Vitest 是一个由 Vite 提供支持的超快单元测试框架。在测试 React 应用程序的上下文中，它是一个测试运行程序， 用于查找测试、运行测试、确定测试是否通过或失败，并以人类可读的方式报告。

React Testing Library

React Testing Library 是一个 JavaScript 单元测试实用程序，它提供虚拟 DOM 来测试 React 组件。在自动化测试中，没有使用到真实的DOM。 React Testing Library 提供了一个虚拟 DOM，我们可以使用它来与 React 组件交互并验证其行为。

Playwright and Cypress

Playwright 和 Cypress 是提供可靠且强大的方法来端到端测试 React 应用程序功能的库。 您可以编写测试来模拟现实世界中的用户与应用程序的交互，包括单击、键盘输入和表单提交。他们还拥有优秀的文档和活跃的社区。

CSS 样式

样式是构建现代 Web 应用程序的一个重要方面。 React 有如此多的样式库可供使用，为您的项目选择合适的样式库可能会让人不知所措。 这里有一些流行的样式库，可以帮助您创建美观且响应灵敏的用户界面。

Tailwind

Tailwind CSS 是一个实用程序优先的 CSS 框架，它提供了一组用于构建 UI 组件的预定义类。 使用 Tailwind CSS，您可以快速创建复杂的布局和自定义样式，而无需从头开始编写 CSS。 它拥有优秀的文档和活跃的社区，使其成为寻求创建现代、响应式 UI 的开发人员的首选。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Styled Components

Styled Components 是一个流行的库，用于使用 CSS-in-JS 设计 React 组件的样式。 它允许您直接在 JavaScript 代码中编写 CSS，从而轻松创建仅限于各个组件的动态样式。 样式化组件还对主题提供出色的支持，允许您在应用程序的不同样式之间快速切换。

import styled from 'styled-components';

const Button = styled.button`
  background-color: #3f51b5;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #303f9f;
  }
`;

export default Button;

Emotion

Emotion 是另一个 CSS-in-JS 库，它为 React 组件的样式提供了强大的 API。 它具有高性能，允许您使用多种语法定义样式，包括 CSS、Sass 和 Less。

import { css } from '@emotion/react';

const buttonStyles = css`
  background-color: #3f51b5;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #303f9f;
  }
`;

const Button = () => (
  <button css={buttonStyles}>
    Button
  </button>
);

export default Button;

CSS Modules

CSS Modules 是 React 中一种流行的样式设计方法，它允许您编写适用于各个组件的模块化 CSS 代码。 使用 CSS Modules，您可以编写仅应用于特定组件的 CSS 类，防止命名冲突并确保样式被正确封装。

在 CSS 模块方法中，您需要创建一个单独的 CSS 文件 - 例如， Button.module.css - 包含以下内容：

Button.jsx

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

const Button = () => (
  <button className={styles.button}>
    Button
  </button>
);

export default Button;

Button.module.css

.button {
  background-color: #3f51b5;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #303f9f;
}

Vanilla Extract

Vanilla Extract 由 CSS Modules 的联合创建者 Mark Dalgleish 发起，是最新获得关注的 CSS-in-JS 库之一。 它提供了一个轻量级、零运行时的解决方案，用于设置 React 组件的样式，并具有完整的 TypeScript 支持。 它在构建时提供静态 CSS 生成，从而提高性能并减小包大小。如果您更喜欢 TypeScript 优先的方法并重视性能， Vanilla Extract 可能是设计 React 应用程序的绝佳选择。

import { style } from '@vanilla-extract/css';

// Define styles
const buttonStyles = style({
  backgroundColor: '#3f51b5',
  color: '#fff',
  fontWeight: 'bold',
  padding: '8px 16px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    backgroundColor: '#303f9f',
  },
});

const Button = () => (
  <button className={buttonStyles}>
    Button
  </button>
);

export default Button;

UI组件库

UI 组件库可以为 React 开发人员节省大量时间，而且现在有许多优秀的选项可用。一些最受欢迎的选项包括：

• Material UI
• Mantine UI
• Ant Design
• Chakra UI

还有 Tailwind CSS 框架，例如：

• ShadCN
• Daisy UI
• Headless UI

动画

React Spring and Framer Motion

动画可以成为创建引人入胜的交互式用户界面的强大工具，并且有许多优秀的动画库可用于 React。 一些最受欢迎的选项包括 React Spring 和 Framer Motion。 这些库可以使用最少的代码轻松创建流畅且响应灵敏的动画。

以下是使用 Framer Motion 的示例代码片段。动画的核心是 Motion 组件。 将其视为带有动画功能的纯 HTML 或 SVG 元素。对 motion 组件进行动画处理就像在 animate 属性上设置值一样简单。

import { motion } from "framer-motion";

export default function App() {
  return (
    <motion.div
      className="box"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
    />
  );
}

数据可视化

数据可视化是许多 React 应用程序的重要组成部分，尤其是那些依赖复杂数据集的应用程序。 React 的一些流行数据可视化库包括：

• Victory
• React Chartjs
• Recharts 🤩

这些库最大限度地减少了创建美观的交互式可视化的学习曲线，可以帮助用户理解复杂的数据。

下面是使用 Recharts 呈现折线图的示例代码片段：

import { LineChart, Line } from 'recharts';
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];

const renderLineChart = (
  <LineChart width={400} height={400} data={data}>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  </LineChart>
);

表格

在 React 中实现表可能是一个具有挑战性的组件，但是有许多优秀的表库可用。一些流行的选项包括：

• TanStack Table 🤩
• React Data Grid

这些库可以轻松创建具有排序、过滤和分页等功能的强大且可自定义的表格。

无头内容管理系统

为了减少仅仅为了对站点或应用程序进行内容更新而更新和部署代码的需要，您需要使用无头 CMS。

我们建议将 Builder.io 与 React 结合使用，因为它扩展了结构化数据编辑， 并允许直接使用组件进行可视化编辑， 这可以显着减少对网站或应用程序的内容密集部分进行硬编码的需要。

以下是集成的示例：

import { Builder, BuilderComponent, builder } from '@builder.io/react'

// Dynamically render compositions of your components
// https://www.builder.io/c/docs/quickstart
export default function MyPage({ builderJson }) {
  return <>
    <Header />
    <BuilderComponent model="page" content={builderJson} />
    <Footer />
  </>
}

// Fetch Builder.io content from the content API
// https://www.builder.io/c/docs/content-api
export async function getStaticProps({ params }) {
  // Query content from the CMS https://www.builder.io/c/docs/querying
  const content = await builder.get('page', { url: '/' }).promise()
  return { props: { builderJson: content || null } }
}

// Register your components for user in the visual editor
// // https://www.builder.io/c/docs/custom-components-setup
Builder.registerComponent(MyHeadingComponent, {
  name: 'Heading',
  // Define which props are editable
  inputs: [{ name: 'text', type: 'string', defaultValue: 'Hello world' }]
})

编辑 UI 是这样的：

国际化多语言

国际化 (i18n) 是许多应用程序的重要考虑因素，尤其是那些面向全球受众的应用程序。 i18next 和 React-Intl 等库可帮助将您的应用程序翻译成多种语言并处理本地化。

• i18next
• React-Intl

开发工具

开发工具可以为 React 开发人员提供巨大的帮助，并且有许多优秀的选项可用。一些流行的选项包括：

• React Developer Tools
• Redux DevTools
• React Hook Form DevTools
• TanStack Query DevTools

组件开发环境

创建一个精简高效的开发环境对于 React 开发人员来说非常重要。

• StoryBook
• dumi

文档应用程序, 静态站点

文档是任何软件项目的重要组成部分。对于创建文档应用程序，Docusaurus 是一个非常好的选择。 当然，您也可以将 Next.js 与 Nextra 等库一起使用。

原生移动应用程序

React Native 已成为使用 React 构建本机移动应用程序的越来越流行的选择。 React Native 允许开发人员使用 React 和本机组件创建跨平台移动应用程序。

超赞的工具库

除了上面列出的库和工具之外，还有许多其他很棒的库可供 React 开发人员使用。一些流行的选项包括：

• dnd kit 用于拖放功能的 dnd 套件
• react-slick 用于构建轮播和滑块
• react-dropzone 用于文件上传

这些库可以帮助简化 React 应用程序的开发并改善用户体验。

结论

React 生态系统在 2023 年将继续快速发展和增长，有许多优秀的工具和库可用于构建高质量的 React 应用程序。 无论您是刚刚开始使用 React 还是经验丰富的 React 开发人员，都有许多选项可以帮助您保持工作效率并构建出色的用户体验。