- Published on
React 开发者 2023 年 一定要关注的 13 个工具库
- Authors
- 作者
- zhuima
目录
作为一名现代 React 开发人员，不仅要理解 React 的核心概念，还要精通 React 的整个生态系统。
这包括拥有各种 React 库的知识和经验，您可以在应用程序中使用这些库来简化您的开发过程。
即使你没有必要与他们合作的经验，你至少应该意识到他们的存在和他们解决的问题。
所以，这里有 13 个有用的 React 库，作为 React 开发人员你应该知道。
1. TanStack Query
TanStack Query 是由 Tanner Linsley 开发的 React 开源数据获取库。截至 2023 年 8 月，它在 NPM 上的每周下载量超过 170 万次，在 GitHub 上的下载量超过 35k 颗星。
React 没有一种固执己见的方式来获取数据。这使开发人员可以自由地提出各种数据获取方法。大多数时候，它涉及使用 useEffect 和 useState 钩子或使用一些通用的状态管理库。
TanStack 查询为我们提供了一种在 React 应用程序中获取数据的标准方法，并帮助我们避免编写复杂的逻辑、减少代码行、使我们的代码更易于维护、使我们的应用程序更快等等。
它带有许多惊人的功能，使 React 中的数据获取和开发体验非常棒。这些功能包括自动缓存、自动重新获取、滚动恢复、随提取呈现等。您可以在下面的屏幕截图中查找所有功能。
2. Redux
Redux 是 JavaScript 中的开源状态管理库。截至 2023 年 8 月，它在 GitHub 上拥有超过 58K 星，在 NPM 上的每周下载量超过 780 万次。
根据Redux的官方文档，Redux是JavaScript应用程序的可预测状态容器。它可以帮助您编写行为一致、在不同环境（客户端、服务器和本机）中运行且易于测试的应用程序。最重要的是，它提供了出色的开发人员体验，例如实时代码编辑与时间旅行调试器相结合。（来源：Redux）
Redux 的特性
- 可预测 - 帮助您编写易于测试的应用程序，并跨环境具有一致的行为。
- 集中式 - 帮助您集中应用程序的状态。
- 可调试 - 它提供了自己的 DevTools，可以轻松跟踪应用程序状态的时间线。
- 灵活 - Redux 适用于任何 UI 层，并具有庞大的附加组件生态系统以满足您的需求。（来源：Redux）
它是 React 中最受欢迎的状态管理库之一，使构建大规模工业应用程序变得更加容易。
3. MUI
如果不添加 MUI 核心，任何包含最佳 React 库的列表都是不完整的。这是一个 React 样式库，可帮助您立即构建令人惊叹的 UI。MUI 核心包含四个基础库，用于更快地生成和交付 UI。
Material UI：Material UI是一个实现Google的Material Design的React UI组件库。（来源：材料UI）
Joy UI：Joy UI 是一个设计精美的 React UI 组件库，旨在激发开发过程中的乐趣。（来源：欢乐UI）
Base UI: MUI Base is a library of headless ("unstyled") React UI components and low-level hooks. (Source: Base UI)
Base UI：MUI Base 是一个无头（“无样式”）React UI 组件和低级钩子的库。（来源：基本 UI）
MUI 系统：MUI 系统是 CSS 实用程序的集合，用于使用 MUI 组件库快速布置自定义设计。（来源：MUI系统）
凭借 88K（2023 年 8 月）的 GitHub 明星和每周 290 万次 NPM 下载（2023 年 8 月），MUI 是世界上最受欢迎的 React UI 库之一。
4. React Bootstrap
React Bootstrap 是我们老朋友 Bootstrap 在 React 中的重建版本。它是一个独立的 React Bootstrap 组件 UI 库.js不依赖于 Bootstrap 或 jQuery。
React Bootstrap 提供了一个组件库，具有易于使用的功能、有状态和默认可访问性，使其成为开始构建应用程序 UI 的绝佳选择。
截至 2023 年 8 月，它在 GitHub 上拥有超过 21K 星，在 NPM 上的每周下载量超过 240 万次。
5. React DND
现代 React 应用程序很少是简单的。几乎所有工业应用都具有某种形式的拖放功能。
React DnD 是一个库，可帮助您基于拖放功能构建 React 应用程序。为了实现这一目标，它在引擎盖下使用了HTML5拖放API。
该库使用起来相当简单，在实际应用程序中有许多有趣和创新的用例。截至 2023 年 8 月，它在 GitHub 上拥有超过 19K 星，在 NPM 上的每周下载量超过 180 万次。
6. SWR
Vercel 的 SWR 是我们列表中的第二个数据获取库，也是除了 React Query 之外的另一个不错的选择。
SWR 库比 React Query 小得多，也简单得多，但它提供了许多惊人的功能，如可重用数据获取、悬念、分页、内置缓存等等。
截至 2023 年 8 月，它在 GitHub 上拥有超过 27K 颗星，在 NPM 上的每周下载量超过 120 万次。
7. React Hook Form
React Hook Form 在 React 中构建表单时是王者。它是一个没有任何依赖项的高性能小型库，通过减少代码、隔离重新渲染、加快装载速度等来提高应用的性能。
根据 React Hook Forms 的 GitHub Readme，它具有以下功能：
在构建时充分考虑了性能、UX 和 DX
采用本机 HTML 表单验证
与 UI 库的开箱即用集成
体积小，无依赖关系
支持Zod，超级结构，Joi，Vest，类验证器，io-ts，nope和自定义
截至 2023 年 8 月，该项目在 GitHub 上拥有超过 36K 颗星，在 NPM 上的每周下载量超过 340 万次。在 React 中构建下一个表单之前，请查看此库。
8. Recharts
Recharts 是一个使用 React 和 D3 构建的开源图表库。它是轻量级的，建立在 React 组件上，提供原生 SVG 支持，并使将图表添加到 React 应用程序中变得毫不费力。
它提供了11个内置图表组件，包括面积图，条形图，折线图，饼图等。
截至 2023 年 8 月，该库在 GitHub 上拥有超过 20K 颗星，在 NPM 上的每周下载量超过 130 万次。
9. React Router
React Router 是在 React 应用程序中实现路由的最流行的库。它在 GitHub 上拥有超过 5 万颗星，在 NPM 上每周下载量超过 1000 万次，它是由流行的 Remix 框架 React 背后的同一团队构建的。
它是一个轻量级的、功能齐全的 React JavaScript 库路由库。React 路由器运行在 React 运行的任何地方;在 Web、服务器上（使用 node.js）和 React Native。（来源：React Router GitHub）
React Router 被 Microsoft、Netflix、Twitter、Discord 等顶级公司的开发团队使用。
10. BluePrint
蓝图是一个基于 React 的 Web UI 工具包。它针对为在现代浏览器和 IE11 中运行的桌面应用程序构建复杂的数据密集型 Web 界面进行了优化。（来源：蓝图GitHub）
蓝图有七种不同的 NPM 包：
- blueprintjs/core - 这是包含各种 UI 组件 （30+） 的核心包，用于处理应用程序的所有基本 UI 形成。这些组件包括卡片、按钮、微调器等。
- blueprintjs/datetime - 这个包可以帮助你在 React 中与日期和时间进行交互。我们可以使用它来选择单个日期、日期范围、选择时间等。
- blueprintjs/icons - 此软件包提供了 300 多个矢量 UI 图标，使您的 React 应用程序美观。
- blueprintjs/popover2 - 此软件包具有 Popover 和 blueprintjs/core 的工具提示的后续组件。
- blueprintjs/select - 此软件包提供了 React 组件，用于在应用程序中选择一个项目或选择多个项目。
- blueprintjs/table - 此软件包为您的 React 应用程序提供了一个交互式表组件。
- blueprintjs/timezone - 此软件包可帮助您与应用程序中的各个时区进行交互。
截至 2023 年 8 月，蓝图在 GitHub 上拥有超过 20K 颗星。
11. React Virtualized
React Virtualized 是一个 React 库，可帮助您在 React 中高效地处理大型列表和表格数据。截至 2023 年 8 月，它在 GitHub 上拥有超过 25K 星，在 NPM 上的每周下载量超过 250 万次。
如果您在应用程序中处理大数据，此库将派上用场。
12. React Suite
React Suite 是一组用于企业系统产品的 react 组件库。它是一个经过深思熟虑且开发人员友好的 UI 框架。（来源：React Suite GitHub）
这是一个与众不同的 UI 库。每个组件都经过精心设计，以增加您的应用歧管的美感，并赋予其卓越的触感。
该库确实提供了常规的 UI 组件，如按钮、抽屉、分页、加载器等，但比大多数 UI 组件库具有更好的设计和深度。
截至 2023 年 8 月，它在 GitHub 上拥有超过 7K 颗星，每周 NPM 下载量超过 60，000 次。
13. TailwindCSS
TailwindCSS是一个实用程序优先的CSS框架，用于快速设置网站的样式。它不是一个 React 库，而是一个 CSS 样式框架，也是 React 开发人员中最受欢迎的应用程序样式选项之一。
Tailwind 通过其实用程序类（如 flex 、 pt-4 、 text-centre 等）使构建 UI 变得非常容易。每个类都有预定义的 CSS 值，一旦将特定类分配给特定的 JSX 元素，这些值就会变为活动状态。
例如，如果将 flex 或文本中心的类名分配给 div，则该元素将成为 flex 元素或使文本与中心对齐。
截至 2023 年 8 月，它在 GitHub 上拥有超过 71K 颗星，在 NPM 上的每周下载量超过 600 万次。
总结
你不需要学习所有这些库就可以在 React 中有效地工作，因为它们中的许多都用于相同的目的。例如，MUI、React Bootstrap 和 React Suite 都是 UI 组件库。
因此，与其学习用于相同目的的所有库，不如利用这段时间来处理用于不同目的的库。例如，构建一个 React 应用程序，它使用 React Suite for UI、React Router 进行路由、使用 React Query 进行数据获取，使用 Recharts 来呈现图表。
您不必使用我在上面的段落中告诉您的相同技术堆栈，但我希望您明白这一点。学习用于各种目的的各种库。
