HI 大家好，我是 ssh。

前段天数内网有人归纳了一则该文 2023 的 React 生态系[1]，列举了 React 整座生态系中比较火爆的库。可是的是他实际上列举了英文名字，没有继续深入细致如是说，我知道听众们有很多小懒蛋，那我就点儿天数搜集许多重点项目架构的详尽如是说，如果我有许多观点（聊著），我也会在上面的提及部份进行许多赞扬。

2023 年的 React 生态系

随着技术的急速发展，辅助工具和库也在急速重构。前段天数发布了 million.js，使 React 的操控性提高了 70%。对于新手而言，优先选择恰当的库可能会很具有诱惑力。

在这里，我将列举许多 React 库，供你自学并成为 React 合作开发人员。

构筑辅助工具

vite[2]

Vite（法文意为 “加速的”，读音 /vit/，读音同 “veet”）是一种新式后端构筑辅助工具，能够明显提高后端合作开发新体验。它主要由两部份组成：

两个合作开发伺服器，它如前所述原生植物 ES 模块提供更多了多样的内置机能，如速度慢到不可思议的模块热预览（HMR）。

两套构筑命令，它采用 Rollup 装箱你的标识符，因此它是预实用性的，可输入用作生产自然环境的度强化过的动态天然资源。

Vite 以图提供更多照相狸尾豆的配置，同时它的应用程序 API 和 JavaScript API 带来了度的扩展性，并有完备的类别支持。

nextjs[3]

Next.js 是两个用作构筑 Web 应用程序的架构。

采用 Next.js，你能采用 React 模块构筑界面。然后，Next.js 为你的应用程序提供更多附加的结构、机能和强化。

在另一面，Next.js 还为您抽象化和手动实用性辅助工具，比如装箱、校对等。这使你能著眼于构筑应用程序，而不是花天数增设辅助工具。

不论你是分立合作开发人员还是大团队的一部份，Next.js 都能帮助你构筑交互式、动态和加速的 Web 应用程序。

路由

react-router[4]

React Router 不仅仅是将 URL 与函数或模块匹配：它还涉及构筑两个完备的界面，该界面与 URL 相对应，因此可能比你习惯的更多概念。我们将详尽如是说 React Router 的三个主要机能：

订阅和操作历史记录堆栈将 URL 与你的路由匹配根据路由匹配呈现嵌套的 UI

想深入细致了解的话，请看这里：React Router 基本概念[5]

Tanstack Router[6]

TanStack Router 是两个用作使用你喜爱的现代 Web 架构构筑 Web 应用程序的路由器。它的许多特点包括：

100%推断的 TypeScript 支持类别安全的绝对和相对导航嵌套路由和布局路由集成的路由加载 API（数据、天然资源、暂停）为 state-while-revalidate 缓存设计（TanStack 加载器、TanStack 查询、SWR 等）手动路由 prefetchingSuspense-like 的路由过渡异步路由元素和错误边界类别安全的 JSON-first 搜索参数状态管理 API路径和搜索参数 Schema 校验Serach 参数导航 API自定义 Serach 参数解析器/序列化器支持Serach 参数中间件路由匹配中间件

官方给出了一张对比图，仅供参考。

大致能看出，TanStack Router 的主要优势在于类别安全、SWR 策略以及 Devtools 支持等等……

如果你采用的是 Next.js，则不需要采用路由，因为它内置了路由机能。

客户端状态管理

redux toolkit[7]

大家都知道，redux sucks！官方为了补救，推出了一系列的 toolkit，把 redux 搞的更复杂了，怎么说呢，大型复杂项目里也许能试试。

Redux Toolkit 软件包旨在成为编写 Redux 逻辑的标准方式。它最初的创建目的是解决 Redux 中的三个常见问题：

“实用性 Redux store 太复杂””我必须添加很多包才能让 Redux 有用””Redux 需要太多样板标识符” 尽管我们不能解决所有用例，但我们试图在 create-react-app 的精神下提供更多许多辅助工具，它们可以抽象化化增设过程、处理最常见的用例，并包含许多有用的实用辅助工具，让用户能简化他们的应用程序标识符。

这些辅助工具对所有的 Redux 用户都应该有益。不论你是个新 Redux 用户，还是两个经验多样的用户希望简化现有的应用程序，Redux Toolkit 都能帮助改进你的 Redux 标识符。

多了一堆复杂的概念，又有一堆人要加工资了，又有一堆小弟要被迫自学了。笔者本人是完全不感冒的，辣鸡不如 jotai。

zustand[8]

两个小巧、加速和可扩展的如前所述简化 Flux 原则的骨架状态管理解决方案。它具有如前所述 hooks 的舒适 API，没有样板标识符，也没有过多的观点。

不要因为它看起来可爱而忽视它。它拥有强大的能力，花费了大量天数来解决常见的陷阱，比如可怕的僵尸子问题、React 并发和混合渲染器之间的上下文丢失。在 React 领域，它可能是唯一两个完全解决这些问题的状态管理器。

看起来不错，简洁明了而且是 mutable 风格，不用做一堆复制 object 的骚操作了。

伺服器状态管理

tanstack query[9]

TanStack Query（前身为 React Query）经常被描述为 Web 应用程

虽然大多数传统的状态管理库非常适合处理客户端状态，但在处理异步或伺服器状态时效果不佳。这是因为伺服器状态与众不同。首先，伺服器状态具有以下特点：

共享所有权，因此可能被其他人在你不知情的情况下更改如果不小心处理，可能会在应用程序中变得“过时”

一旦你理解了应用程序中的伺服器状态的性质，你将面临更多挑战，比如：

缓存…（可能是编程中最难的事情之一）将多个请求相同数据的重复请求合并为单个请求在后台预览“过时”的数据了解数据何时“过时”尽快反映数据的预览操控性强化，如分页和惰性加载数据管理伺服器状态的内存和垃圾回收采用结构共享对查询结果进行记忆化

如果你对这个列表不感到压力，那可能意味着你已经解决了所有伺服器状态问题，因此值得获得奖励。然而，如果你和大多数人一样，你可能尚未解决所有或大部份这些挑战，我们只是触及到了表面！

React Query 毫无疑问是管理伺服器状态的最佳库之一。它能直接采用，零实用性，因此能根据你的需求进行定制，随着应用程序的发展。

React Query 让你能够战胜伺服器状态的复杂挑战和障碍，在它开始控制你的应用程序数据之前掌控它。

从技术角度来看，React Query 很可能：

帮助你从应用程序中删除许多复杂和误解的标识符，并用几行 React Query 逻辑替代。使你的应用程序更易于维护，更容易构筑新机能，而无需担心连接新的伺服器状态数据源。对你的最终用户产生直接影响，使你的应用程序感觉比以往更快、更响应。潜在地帮助你节省带宽并提高内存操控性。 2023 React 生态系统，以及我的一些吐槽……

redux-toolkit query[10]

RTK Query 是

RTK Query 是 Redux Toolkit 包中包含的两个可选附加模块，它的机能是构筑在 Redux Toolkit 的其他 API 之上的。

务器上的数据保持同步。这在实现当今应用程序中采用的其他行为时变得更加复杂：

跟踪加载状态以显示 UI 加载指示器避免对相同数据进行重复请求进行乐观预览以提高 UI 响应速度随着用户与 UI 进行交互，管理缓存的生命周期Redux 核心一直非常简洁 – 合作开发人员需要编写所有实际逻辑。这意味着 Redux 从未包含任何内置机能来帮助解决这些用例。Redux 文档教授了许多常见的模式，用作在请求生命周期中分派操作以跟踪加载状态和请求结果，因此 Redux Toolkit 的 createAsyncThunk API 是设计为抽象化化该典型模式的。然而，用户仍然需要编写大量的 reducer 逻辑来管理加载状态和缓存数据。

特的方法：

oks，为模块提供更多数据和 isLoading 字段，并在模块挂载和卸载时管理缓存数据的生命周期RTK Query 提供更多了“缓存条目生命周期”选项，能通过 WebSocket 消息流式传输缓存预览，以pt 采用新体验。 2023 React 生态系统，以及我的一些吐槽……

这复杂的 API 风格，欣赏不来。

Apollo Client[11]

Apollo Client 是两个全面的 JavaScript 状态管理库，可让您采用 GraphQL 来管理本地和

Apollo Client 帮助您以经济、可预测和声明式的方式组织标识符，与现代合作开发实践一致。核心的 @apollo/client 库提供更多了与 React 的内置集成，而更大的 Apollo 社区则维护了与其他流行的视图层的集成。

应该是用 GraphQL 时的状态管理最佳优先选择。

表单处理

Formik[12]

面对现实吧，在 React 中处理表单确实很冗长。更糟糕的是，大多数表单辅助辅助工具做了太多的魔法，因此通常会伴随着明显的操控性损耗。Formik 是两个小型库，能帮助您解决以下三个最令人讨厌的问题：

将值放入和取出表单状态验证和错误消息处理表单提交通过将所有这些放在两个地方，Formik 能让事情井然有序，使得测试、重构和理解您的表单变得轻而易举。

我（@jaredpalmer）在与 @eonwhite 一起构筑两个大型内部管理仪表板时编写了 Formik。由于大约有 30 个独特的表单，很快就明显发现，我们能通过标准化不仅是输入模块，还有数据在表单中的流动方式来获益。

为什么不采用 Redux-Form？到现在为止，您可能会想，“为什么你不只是采用 Redux-Form？”问得好。

根据我们的先知 Dan Abramov 的说法，表单状态本质上是短暂且局部的，因此在 Redux（或任何 Flux 库）中跟踪它是不必要的。Redux-Form 在每次按键时都会多次调用整座顶层 Redux reducer。对于小型应用程序而言这没问题，但如果您采用 Redux-Form，随着 Redux 应用程序的增长，输入延迟将继续增加。Redux-Form 的大小是 22.5 kB（经过最小化和 gzip 压缩），而 Formik 的大小是 12.7 kB。我创建 Formik 的目标是打造两个可扩展且高操控性的表单辅助辅助工具，具有最小化的 API，它能处理那些真正令人讨厌的事情，而将其余部份留给您来处理。import React from “react”

;

import { Formik } from “formik”

;

constBasic =() =>

(

<div> <h1>Anywhere in your app!</h1> <Formik initialValues={{

email: “”, password: “” }}

validate={(values) =>

{

const errors = {};

if (!values.email) {

errors.email = “Required”;

} else if (

!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)

) {

errors.email = “Invalid email address”;

}

return errors;

}}

onSubmit={(values, { setSubmitting }) => {

setTimeout(() => {

alert(JSON.stringify(values, null, 2));

setSubmitting(false);

}, 400);

}}

{({

values,

errors,

touched,

handleChange,

handleBlur,

handleSubmit,

isSubmitting,

/* and other goodies */

}) => (

{errors.email && touched.email && errors.email}

{errors.password && touched.password && errors.password}

Submit

</button> </form>

)}

</Formik> </div>

);

export default

Basic;

React Hook Form[13]

作者自述：我对 React 最大的抱怨就是表单。不是因为我认为 React 在实现表单方面采取了错误的方法，而是因为在采用 React 时，表单是最具诱惑力的问题。

许多架构都有自己的解决方案来处理表单。AngularJS 在这方面做得非常好。格式化流水线、解析流水线、内置验证，根据状态向元素添加和移除类名…这一切都很棒！

直到你需要做许多不符合 AngularJS 设计思路的事情。如果你需要做任何特殊的操作，与表单进行交互就变得非常痛苦！

因此，React 做了它最擅长的事情，将实现的工作交给了我们。事实上，这正是我喜欢 React 的原因！然而，相比起将数据传递给 props，处理表单要更具挑战性。解析数据、格式化、本地状态、prop 的变化…所有这些在 React 中都是挑战。

我之前采用过 Formik，但成果并不太理想。对于普通的表单而言，它表现得很好，但在多步骤表单方面有些困难。虽然后来他们添加了“向导”表单，但采用起来并不太直观。

此外，Formik 依赖于表单元素，因此在控制 Redux 存储时存在许多挑战。

import { useForm } from “react-hook-form”

;

export default function App()

{

const

{

handleSubmit,

watch,

formState

: { errors },

} = useForm();

const onSubmit = (data) => console

.log(data);

console.log(watch(“example”)); // watch input value by passing the name of it return

(

/* “handleSubmit” will validate your inputs before invoking “onSubmit” */ <form onSubmit={handleSubmit(onSubmit)}>

{/* register your input into the hook by invoking the “register” function */}

{/* include validation with required or other standard HTML validation rules */}

{/* errors will return when field validation fails */}

{errors.exampleRequired && <span>This field is required</span>

}

);

}

测试

Vitest[14]React Testing Library[15]Playwright[16]

样式

Tailwind CSS[17]Styled Components[18]Emotion[19] 2023 React 生态系统，以及我的一些吐槽……

Taiwlind 就不需要多如是说了，前段天数太火爆了，而且能和 Styled Components 库结合采用[20]。

关于两个 CSS-in-JS 库，提及这篇该文[21]里作者的归纳：对于简单、高效和不复杂的样式处理，Emotion 是两个很好的 CSS-to-JS 库。另一方面，对于更独特和复杂的样式选项，styled-components 可能是更好的优先选择。就像写 CSS 一样，很大程度上取决于项目增设和个人偏好。

UI 模块库

Material UI[22]Mantine UI[23]Ant Design[24]Chakra UI[25]Headless UI（Tailwind CSS）[26]DaisyUI（Tailwind CSS）[27]shadcn UI（Tailwind CSS）[28]

UI 模块，就看风格和公司需求优先选择，各有各的好处。Headless 是值得一提的，提及这篇全新的 React 模块设计理念 Headless UI里的如是说：UI 是两个自由度非常高的玩意，而构筑 UI 是一种非常品牌化和定制化的新体验。

那么，我们能不能只需复用模块的交互逻辑，布局和样式完全自定义呢？显然，Headless UI 就是干这件事情的。

对于 Headless UI 模块，我们要做到第一件事，就是分析和抽离模块的状态以及交互逻辑。对于 Counter 模块，它的状态逻辑大致如下：

2023 React 生态系统，以及我的一些吐槽…… 我们把这些状态逻辑收敛到两个叫 useCounter 的 React Hook 中。它接收用户传入的机能 API 增设，然后返回两套已处理过的全新 API。

对于用户而言，我们只需把返回的 API 赋予到想赋予的标签上，那么就得到了两个只带交互能力的无头模块。 2023 React 生态系统，以及我的一些吐槽……

最后，我们结合设计稿进行 UI 还原，对编写自定义样式，最终就能实现两个全新数字加减器模块了；

动画

React Spring[29]

React Spring 是两个用作构筑交互式，数据驱动和动画 UI 模块的库。它能为 HTML，SVG，Element，ThreeJS 等元素做动画。

Framer Motion[30]

Framer Motion 是两个简单而强大的 React 动画库。

它为 Framer（面向创意专业人士的 Web 构筑辅助工具）提供更多了令人惊叹的动画和交互机能。零标识符，最大速度。

数据可视化

Victory Charts[31]React Charts JS[32]Recharts[33]

图表库国内还是以 Echarts 为主，不过老外好像不吃这两套？md，和美团拼了。

Recharts 的审美风格看起来挺简洁的，不过应该又要学两套概念。

表格

Tanstack Table[34]

TanStack Table 是两个 headless UI 库，用作为 TS/JS、React、Vue、Solid 和 Svelte 构筑强大的表格和数据网格。

咱们刚刚看到的 headless UI 的概念，这就有例子了。那优点肯定就是多架构适配，样式自由定制了。

国际化（i18n）

react-i18next[35]

react-i18next 是如前所述 i18next 的一款强大的国际化架构，能用作 react 和 react-native 应用，是目前非常主流的国际化解决方案。

根据这篇该文[36]的如是说，i18next 有着以下优点：

如前所述 i18next 不仅限于 react，学一次就能用在其它地方提供更多多种模块在 hoc、hook 和 class 的情况下进行国际化操作适合服务端的渲染历史悠久，始于 2011 年比大多数的后端架构都要年长因为历史悠久所以更成熟，目前还没有 i18next 解决不了的国际化问题有许多应用程序的支持，比如能用应用程序检测当前系统的语言自然环境，从伺服器或者文件系统加载翻译天然资源

formatjs[37]

合作开发辅助工具

React Developer ToolsRedux DevToolsTesting PlaygroundReact Hook Form Dev ToolsTanstack Query Dev Tools欢迎长按图片加 ssh 为好友，我会第一天数和你分享后端行业趋势，自学途径等等。2023 陪你一起度过！

2023 React 生态系统，以及我的一些吐槽……

指南，高级后端、算法自学路线，是我自己一路走来的实践。简历，大厂简历编写指南，是我看了上百份简历后归纳的心血。面经，大厂面试题，集结社区优质面经，助你攀登高峰，看完该文后记得点下赞或者在看，谢谢各位！

参考资料

[1]

2023 的 React 生态系: https://dev.to/ihteshamulhaq510/react-ecosystem-in-2023-5aj4

[2]

vite: https://vitejs.dev/

[3]

nextjs: https://nextjs.org/

[4]

react-router: https://reactrouter.com/en/main

[5]

React Router 基本概念: https://reactrouter.com/en/main/start/concepts

[6]

Tanstack Router: https://tanstack.com/

[7]

redux toolkit: https://redux-toolkit.js.org/

[8]

zustand: https://zustand-demo.pmnd.rs/

[9]

tanstack query: https://tanstack.com/query/latest

[10]

redux-toolkit query: https://redux-toolkit.js.org/rtk-query/overview

[11]

Apollo Client: https://www.apollographql.com/docs/react/

[12]

Formik: https://formik.org/

[13]

React Hook Form: https://www.react-hook-form.com/

[14]

Vitest: https://vitest.dev/

[15]

React Testing Library: https://testing-library.com/docs/react-testing-library/intro/

[16]

Playwright: https://playwright.dev/

[17]

Tailwind CSS: https://tailwindcss.com/

[18]

Styled Components: https://styled-components.com/

[19]

Emotion: https://emotion.sh/docs/introduction

[20]

结合采用: https://www.freecodecamp.org/news/how-to-style-your-react-apps-with-less-code-using-tailwind-css-and-styled-components/

[21]

这篇该文: https://blog.logrocket.com/styled-components-vs-emotion-for-handling-css/

[22]

Material UI: https://mui.com/

[23]

Man time UI: https://mantine.dev/

[24]

Ant Design: https://ant.design/

[25]

Chakra UI: https://chakra-ui.com/

[26]

Headless UI（Tailwind CSS）: https://headlessui.com/

[27]

DaisyUI（Tailwind CSS）: https://daisyui.com/

[28]

shadcn UI（Tailwind CSS）: https://ui.shadcn.com/

[29]

React Spring: https://www.react-spring.dev/

[30]

Framer Motion: https://www.framer.com/motion/

[31]

Victory Charts: https://formidable.com/open-source/victory/docs/

[32]

React Charts JS: https://react-chartjs-2.js.org/

[33]

Recharts: https://recharts.org/en-US/

[34]

Tanstack Table: https://tanstack.com/table/v8

[35]

react-i18next: https://react.i18next.com/

[36]

这篇该文: https://www.jb51.net/article/226050.htm

[37]

formatjs: https://formatjs.io/