Reactjs | 完美用例的完美工具🛠️💥

根据StackOverflow 2021 年的调查， React 非常棒，也是最受欢迎和使用最广泛的 JavaScript 框架之一。使用 React，可以轻松完成从最简单到最复杂的应用程序。但是，基于 React.js 的库太多了，我们常常发现“查找库”是一项艰巨的任务。很多时候，我们甚至无法记住/猜出与该库相关的术语，这使得查找变得更加困难。因此，我将为您介绍所有完美的工具，以完美地使用 React 的用例。

我不会在这里详细介绍。只是对我提到的或根本没有提到的库进行简单的介绍。你会发现它们的文档比这篇文章/文章/博客更有用。

状态管理

React 的一个主要部分是状态管理。但是前端 UI 库中有两种类型的状态管理：

1. UI 状态（例如 UI 方案、明/暗模式等）
2. 数据获取/异步数据状态（例如请求-响应缓存、WebSocket 事件缓存等）

很多人甚至不知道这两种状态管理方式的存在。他们只提供了 Redux/Mobx/XState 等解决方案。但这些只是 UI 状态管理器。虽然其中一些（例如 Redux）已经通过其他包/中间件（例如 rtk-query）支持数据获取，或者最近才开始支持，但仍然不够完善。

数据获取/网络响应缓存需要缓存、过期数据失效、记忆、垃圾回收等操作，而这些操作很难通过 UI 状态管理器手动完成。使用 UI 状态管理器执行这些操作通常会导致内存泄漏/资源占用过高以及其他问题。

客户端状态管理器：

1. zustand：一个真正简单、可扩展、准系统（Bearbones）的状态管理器，没有样板代码，但使用相同的 FLUX 原则。它完全基于 Hooks，并遵循单存储模式。虽然可以创建多个存储，但每个存储都彼此独立。它轻量级、快速，支持 Redux DevTools，可以与其他优秀的状态管理模式库集成immer，并且支持存储中间件。它就像是 React 所缺少的完美状态管理器。
2. Redux：状态管理之神。它甚至支持所有 UI 框架，包括 Dart 的 Flutter。它是实现 FLUX 模式的先驱库。Redux 改变了状态管理的方式。它性能卓越、可配置、生产就绪，并提供强大的 API。在大型生产应用中，它的价值始终得到验证。但它的样板代码过于繁琐。即使 Redux 如此优秀实用，许多人仍然因为它庞大的样板代码而讨厌它。尽管 redux-toolkit 尝试缓解这个问题，但一旦你完成了第一阶段（样板代码），我保证你永远不会后悔使用 Redux。
3. MobX：简单、可扩展的状态管理器，并且与框架无关。MobX 甚至支持 Dart。其架构自由度真正允许人们以任何想要的方式组织状态。与 Redux 一样，它经过实践检验和生产验证。它也基于存储，主要通过可观察对象提供响应式功能。此外，它非常透明，并向最终用户公开其工作方式，这与其他库相比实属罕见。
4. recoil：实验性警告！此状态管理器来自 Facebook。它会创建一个状态图，附加到 React 树上，状态变更从该图的根节点（他们称之为原子）流经纯函数（称为选择器）并传入组件。它无需样板，简单、轻量，兼容 Concurrent React（React 中的此功能即将推出），并且易于使用。它弥补了 React Context API 的不足。
5. jotai：一款基于独立状态模式的出色状态管理器。它无需创建中央存储，而是允许使用单个原子创建/管理状态。没错，这些状态被称为 Atom。它简洁、灵活、轻量且性能卓越。它与 Redux/MobX 出自同一开发者之手，zustand但思维模型有所不同。它与 Redux/MobX 的理念recoil更zustand
6. XState：一种独特的状态管理解决方案，它运用了有限状态机的概念。 “有限状态机是一种计算的数学模型，它描述系统在任何给定时间只能处于一种状态的行为”。乍一看，xstate 可能令人困惑，但一旦你理解了它的含义，一切就都明白了。它是一个简洁的状态管理器

数据获取/异步数据管理库：

1. react-query：React 缺少的数据获取库，但从更专业的术语来说，它使在 React 应用程序中获取、缓存、同步和更新服务器状态变得轻而易举。在 react-query 出现之前，同步服务器状态和缓存是一项非常繁重的工作，尤其是在你只有 UI 状态管理器的情况下。它免除了手动管理内存、记忆化、缓存和过期数据失效的麻烦。它也适用于 react-native。这也是许多开发者选择 React 而不是其他前端框架的原因之一。
2. swr：与 react-query 非常相似。提供数据获取钩子和轻量级处理，支持 JAM 栈。此外，它还与传输和协议无关。它提供快速页面导航、间隔轮询、数据依赖性、焦点获取时缓存数据重新验证、分页/滚动位置恢复等功能。它与Nextjs 和 Vercel出自同一团队。
3. apollo-client：一个全面的状态管理库，支持使用 GraphQL 管理本地和远程数据。它可用于获取、缓存和修改应用程序数据，同时自动更新 UI。它类似于 React-query，但适用于 GraphQL。它们也共享相同的钩子名称。得益于社区的支持，它实现了跨框架兼容。它是专为 GraphQL 打造的最佳数据获取库。
4. rtk-query：它来自redux-toolkitRedux，如果您使用 Redux/redux-toolkit 作为 UI 状态管理器，它是最佳选择。它简单轻量。与其他工具不同，它不是基于 Store 的。因此所有请求都是独立的。由于它来自 Redux，因此您也可以期待生产级的性能。

造型

组件样式是任何前端项目中非常重要的一部分。最好的方法当然是使用最少的 CSS，但时间最宝贵，所以使用某种框架或预建库总是一个加分项。

使用 JavaScript 进行样式设置也是一种新选择，虽然它需要额外的运行时开销，但提供了高度的可定制性。这被称为 JS 中的 CSS。

另一种既能保持自定义自由，又能降低运行时成本的方法是使用 CSS 预处理器。这些预处理器高度模块化，可定制，并提供易于使用的语法。最终，它们会被编译成可运行的 CSS。

基于 CSS：

1. tailwindcss：高度模块化/可配置，实用至上的 CSS 框架。它拥有自己的 jit（即时）编译器，可以在开发过程中滤除未使用的 CSS 并即时推送 CSS 样式。在生产环境中，使用 可以滤除 100% 未使用的 CSSpurgecss。几乎所有可以通过 CSS 实现的功能，都可以使用 tailwindcss 类来实现。
2. bootstrap：Twitter 的 bootstrap 是最好的 CSS 组件框架之一。它拥有超过 10 年的开发历史，是最成熟的 CSS 框架。它最适合快速构建用户界面。它提供了强大的 CSS 类，可用于构建任何组件。Bootstrap 提供了自己的组件集。此外，还有大量为 Bootstrap 构建的库。因此，您永远不会缺少自定义组件库。
3. scss：scss/sass 是一个 CSS 预处理器，它允许使用相当简单的语法完成所有酷炫的操作。之前 Sass 的编译器是用 Ruby 编写的，但后来用 Dart 重写了。Scss/Sass 也是 Bootstrap 的主要构建块，而之前的 Bootstrap 完全基于 CSS。
4. css 模块：简单来说，所有类名和动画名称默认都限定在本地的 CSS 文件。它在构建时使用每个类末尾的 UUID 来确保该 CSS 文件的类名完全唯一。这是保持组件样式与其他组件样式相互独立的最佳方法。

基于 JS 中的 CSS：

1. styled-components：JS 库中最好的 CSS 之一。它允许使用 JS 新的标签模板函数语法进行样式设置。支持主题设置、样式继承、编辑器 CSS IntelliSense 支持、与其他 CSS 框架交叉兼容，并允许通过样式函数/参数传递/访问 props。
2. emotion：另一个 CSS-in-JS 库，但与框架无关。它提供高性能和易用性。它支持使用对象和字符串进行样式设置。Emotion 对开发者非常友好，因此许多大型 UI 组件库都在使用它。
3. xstyled：这是一个为 React 构建的实用优先的 CSS-in-JS 框架。它可以轻松实现一致的设计系统并随着时间的推移进行扩展。与其他 CSS-in-JS 库不同，它允许通过传递 props 来设置样式。它与 React 的声明式术语完美契合。提供主题支持。它类似于 tailwindcss，但使用 CSS-in-JS 制作。但它不是一个完整的 CSS-in-JS 库。它需要styled-component或 ，@emotion/react @emotion/styled因为它在底层使用了它们。
4. JSS：另一个与框架无关的 CSS-in-JS 库。它简洁、精简，提供所有基本功能，没有任何臃肿，并且拥有插件系统。对于大型 UI 组件框架来说，它是一个不错的选择，因为只要定义好，它就能做很多事情。而且它非常轻量级。

UI 组件

UI 组件只是预先构建的组件，可以根据其他设计基础进行配置/调整。UI 组件可以节省大量开发人员时间，简化开发流程。此外，由于由多人管理，它们通常比手动构建的组件更安全、性能更佳。

市面上有很多 UI 组件库。其中很多都是完全独立的，也有很多基于更大设计系统的理念和设计模式。

以下是列表：

1. chakra-ui：模块化组件库。它类似于 React 的 tailwindcss，但采用了 style as props 模式。支持高度可配置的主题。可以配置成任何样式，并拥有庞大的组件库。
2. Material-ui： React 生态系统中最著名的 UI 组件库。它提供 200 多个组件，高度可配置，并基于 Google 的 Material-Design 原则。但目前，它存在一个与 Typescript 类型相关的 bug，导致 tsserver 的类型判断速度非常慢。不过，这个问题将在下一个主要更新 v5（目前已处于 Beta 阶段）中修复。这个 bug 很容易拖慢低配置电脑的速度，但如果你拥有一台中高配置的电脑，那就不要放弃，使用它吧。如果你的项目中没有使用 Typescript，它也是个不错的选择。
3. react-bootstrap：著名 CSS 框架 bootstrap 的 React 实现
4. ant-design react： ant-design 基于 ant-design 系统为 React 提供的 UI 组件框架。高度可定制，支持主题设置并提供大量组件。
5. Grommet：响应式、移动优先、精心设计的 React UI 组件库。拥有大量组件，设计精美。简洁、极简、响应速度快。
6. Evergreen：一个灵活、对贡献者友好、提供合理默认样式的 UI 组件框架。它的基础非常美观，提供了极简的设计系统，并且在所有框架中独树一帜。

信息！：我正在构建一个基于tailwindcss的 UI 组件库，它将是一个跨框架库。初期将提供 React 和 Vue 支持，并计划支持 Svelte。它的名字是revind。 该项目需要更多贡献者。如果您想贡献，请访问https://github.com/revindjs/revind或通过Twitter联系我。

表单处理程序

在 React 中处理表单是一件很难的事情。控制、验证输入、提交成功后重置状态、检查输入是否被触发等等，都需要大量的工作。不过幸运的是，有一些表单处理库可以让这一切变得轻而易举。

表单处理程序列表：

1. 福米克
2. 反应钩形式
3. 反应最终形式

GraphQL

图查询语言提供了一种仅获取所需数据的方法，从而节省了用户和服务器的带宽。这是 Facebook 开发的一项基于 HTTP 的技术。它仅使用 HTTP POST 动词来传输数据。它非常先进，并且使 HTTP 连接更加环保。

React 的热门 graphql 库有：

1. Apollo 服务器的Apollo 客户端
2. 通过 Facebook转发
3. urql - 通用 React 查询库

基本 UI 辅助组件/钩子

1. 表格

数据驱动型应用通常需要表格。但手动处理如此大量的动态文本可能会很危险。不过，这些 React Table 库可以帮你解决这个问题。

表库列表：

1. 材质表（最好使用材质用户界面）
2. react-table（来自 react-query 的创建者）
3. MUI-Datatables（material-ui 的另一个最佳匹配）
4. react-virtualized（非常棒，与框架无关）

2.动画库

动画如今已成为一种潮流。每个网站/应用都会加入一些动画，为最终用户带来绝佳的体验。但创建如此精彩的动画并非易事，它需要数学、算法，有时还需要 GPU 加速。不过，以下 React 动画库让这一切变得轻而易举……

动画库列表：

1. 反应弹簧
2. 帧运动
3. 移除
4. 反应移动

3. 加载器/骨架/进度条

从服务器获取数据时，总是需要回退，对吧？显示加载器/骨架/进度条可以让用户更容易等待，并减少网站“首次点击就退出”的评分。

以下是可以与 React 一起使用的很棒的加载器库：

1. 反应内容加载器
2. React-loader-spinner
3. 反应旋转器
4. @tenem/react-nprogress
5. 反应加载骨架
6. React-top-loading-bar

4. 无限滚动

分页方式正在逐渐过时。随着智能手机用户的不断增长，现在使用无限滚动来获取更多数据或无限量数据变得更加便捷。但这样做需要通过ref进行大量的 DOM 操作，因此手动操作存在一定的风险。因此，出现了无限滚动组件/钩子库。

无限滚动组件/钩子库列表：

1. 反应路点
2. React-infinite-scroller
3. 反应列表
4. React-无限滚动组件
5. React-simple-无限滚动

Libreact

另一个很棒的 React 库是libreact。它收集了各种 React 组件，这些组件我们平时用不着，但有时却必不可少。它libreact可以单独提供这些组件，也可以作为集合提供。但无论哪种方式，它几乎都能在我们需要的时候，完美地囊括所有不太重要的组件。