Logo

菜单

发布于 2026-01-06 0 阅读
0

45 个 NPM 包解决 16 个 React 问题 DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！

45 个 NPM 包解决 16 个 React 问题

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

想阅读更多类似文章，请访问我的博客

注：本文发表于两年前，因此其中一些技术已经过时。

React 确实很棒。它既流行又性能卓越。但 React 的一个重要特点是，它并没有提供所有现成的解决方案。

这就是为什么我们需要寻找其他库的原因，而库有利有弊。如果你是初学者，就必须花费大量时间寻找解决问题的最佳方案。

今天，我们将进行对比讨论，以了解 React 中不同问题的替代解决方案。

1. 全球状态管理

在99%的应用程序中，组件间共享状态是必不可少的。目前已经有一些不错的解决方案——包括原生方案和外部方案。

受到推崇的

如果让我推荐一个解决方案，我会说是Redux。不是因为它最好，而是因为它最实用。很多公司已经在用它了，你迟早也会用到它。

此外，Redux 的生态系统也非常出色。几乎任何问题都能找到解决方案。一些与 Redux 配合使用的优秀库包括：

替代方案

  • jotai -> 几乎可以完美应对所有情况。

  • context -> React 内置。适合简单使用，但性能不佳，尤其是在处理大量动态数据时。

  • 后坐力-> 旨在解决特定问题。并非适用于所有使用场景。请先了解它！您可以在这里了解更多信息。

  • mobx -> 遵循观察者模式，适用于响应式编程，但不应在任何新项目中使用。

2. 服务器状态管理

如果你的应用程序严重依赖某些外部数据源，那么管理这些数据（缓存、预取等）对于性能至关重要。

受到推崇的

我个人非常喜欢它，react-query而且还有很多人和我一样。它简直太神奇了。

它能处理caching过期数据，以及许多其他开箱即用的功能。它简单易用、功能强大且可配置！

选择

游戏中还有另一个名为SWR的参与者。它是一个与React Query类似的库。

这个库的主要优势在于它是由 Vercel 开发的。Vercel 也是 NextJS 的创建者。因此，使用NextJS 时，您可以期待更好的性能。

3. 脚手架

从零开始创建一个 React 应用非常复杂。配置 Webpack、Bable 等工具可能会让人望而生畏！

受到推崇的

如果要从头开始创建一个 React 应用，我会选择NextJS 。它被称为全栈 React 框架。

文档中写道：

Next.js 提供最佳的开发体验，具备生产环境所需的所有功能：混合静态渲染和服务端渲染、TypeScript 支持、智能打包、路由预取等等。无需任何配置。

它最重要的特点是开箱即用的 SEO 支持，这非常棒！React也支持 SEO，但不如 Next 那样直接。

选择

如果你是 React 新手或者正在构建一些基础项目，那么你还有其他选择。

  • create-react-app -> 构建单页应用程序。适合初学者。

  • Gatsby -> 适合构建静态内容型网站，不适用于其他场景。
    更新：Gatsby 现已过时，您可以考虑使用 Astro。

4. 表单处理

90% 的 Web 应用程序都包含某种表单。处理表单输入非常麻烦。但我们有好消息！

受到推崇的

React hook form是目前最新、最棒（我个人认为 :P）的表单处理库。它性能卓越，而且非常灵活。

material-ui它对一些外部设计库（例如[此处应填写相关库名称]）提供了良好的支持ant-design。

如何在 TypeScript 中使用 React Hook 表单
*为您的应用程序构建高性能、简洁的表单* javascript.plainenglish.io

替代方案

这个领域还有一些不错的替代方案。

  • Formik -> Formik 提供经过实战检验的输入验证、格式化、掩码、数组和错误处理解决方案。

  • redux-form-> 不要使用它。它会严重影响性能。

5. HTTP 调用

在现代社会，几乎所有网站都依赖于外部数据源。因此，发出HTTP请求非常简单。

受到推崇的

使用fetch是发起HTTP请求的推荐方式。

它的功能虽然有限，但非常强大，可以满足您95%的工作需求。

选择

Axios比 fetch 更胜一筹，而且非常流行。

它有一些不错的功能，例如内置的 XSRF 防护、自动 JSON 转换以及拦截 HTTP 请求的功能。如果您需要这些功能，那么它值得考虑。

6. 造型

你需要对应用程序进行样式设置，这一点毋庸置疑。有很多方法可以为你的应用程序添加样式。

受到推崇的

可能很多人不同意我的观点。但我认为，在 React 应用中进行样式设计时，styled-components 是最佳选择。

它有助于创建清晰的组件，并明确区分各个职责。此外，它还可以通过 props 轻松管理和配置。

我现在最喜欢的工具是Tailwind CSS

替代方案

但是，正如我所说，还有其他很棒的替代方案！

  • 纯 CSS -> 开箱即用，完全支持。对于小型项目来说应该足够了。

  • Sass是 CSS 的改进版，它提供了许多管理 CSS 的实用功能，非常适合中型甚至大型项目。

  • styled-jsx -> 一个功能与 styled-jsx 类似的库styled-components，并在此基础上增加了一些额外的功能。

7. UI库

很多情况下，手动设计所有组件可能并非明智之举。此时，使用某种用户界面库或许是个不错的选择。

受到推崇的

对我来说，功能最全面、可配置性最高的 UI 库是 Material UI。

它非常受欢迎，被许多公司使用。它具有高度可配置性，这也是它功能如此强大的原因。

替代方案

此外，还有一些不错的替代方案值得考虑。

8. 文件编制

良好的文档可以在未来节省数百小时的时间。因此，要积极主动，在项目初期就建立文档库。

受到推崇的

创建文档的推荐方法是使用 React StyleGuidist。

它易于使用且功能强大。
以正确的方式编写 React 应用程序文档
*分步入门指南*javascript.plainenglish.io

替代方案

还有其他一些选择。

  • js-docs -> JavaScript 通用文档工具。

  • react-docz -> 非常易用的文档指南。值得一试。

9. 多语言支持

如果你正在开发一款面向全球市场的产品，那么你可能希望在 React 应用中添加多语言支持。

受到推崇的

React i18next是React 应用程序中实现多语言支持的事实标准选项。

替代方案

还有其他一些不错的替代方案。

它还支持 VueJS 和 Angular 等其他库。

只需 6 个简单步骤，即可在 React 中实现多语言支持
javascript.plainenglish.io

10. 动画

动画能让你的应用生动起来。在 React 中，有很多不错的动画实现方式。

受到推崇的

纯 CSS 是为 React 应用添加动画效果的最佳方式。它简单快捷，而且性能更高。

替代方案

如果您想要一些即用型产品，以下是一些推荐。

11. 长列表渲染

渲染过长的列表会严重影响应用程序的性能。在这种情况下，使用库可能是一个不错的选择。

受到推崇的

如果你有一个无限滚动的应用，那么你应该考虑使用React Window。

选择

如果不需要无限滚动列表，那么只需对数据进行分页即可。

如何提升包含 1000 个项目的 React 列表的渲染性能
*确保我们的 Web 应用高效滚动* betterprogramming.pub

12. 代码质量工具

代码检查工具可以静态地找出代码中的任何错误。使用代码检查工具是个好主意。

受到推崇的

首选解决方案是 ESLint

选择

  • jshint -> 旧库

  • tslint -> TypeScript 代码检查工具。目前不推荐使用。

如何为你的 React 应用添加代码检查和格式化功能
*务必正确执行此步骤，否则你的代码会出现问题*javascript.plainenglish.io

13. 格式设置

对于任何应用程序来说，保持一致的视觉风格都非常重要，而代码格式化工具可以帮你完成这项工作！

受到推崇的

这是最适合你的解决方案。你不需要其他任何东西！

14. 分析

数据就是未来。如今大多数企业都是数据驱动型企业。因此，拥有一款优秀的应用程序分析工具至关重要！

受到推崇的

React Ga 是完成这项工作最流行、最强大的工具。

我想你不需要其他任何东西了。

如何设置并将 Google Analytics 添加到您的 React 应用
*Google 让您轻松获取 Web 应用的洞察*javascript.plainenglish.io

15. 测试

测试对于任何应用程序的重要性无需赘述。所以，就是这样。

受到推崇的

推荐的方法是使用 React Testing Library。

它非常易于使用，并且设计符合实际使用情况。

替代方案

  • jest -> 用于单元测试

  • Cypress -> 用于端到端测试

React 测试入门指南
*面向初学者的轻松入门* betterprogramming.pub

16. 构建可共享组件

如果你身处一个大型团队，那么轻松共享组件可能会成为一个很大的问题！

受到推崇的

如果您正在寻找最完整的解决方案，Storybook 是您的理想之选。

就这样。我想现在你应该对何时该选择哪个库有了比较清晰的了解。如果你有任何不同意见，请告诉我。

有什么想说的吗？请通过LinkedIn或个人网站联系我。

文章来源：https://dev.to/mohammadfaisal/45-npm-packages-to-solve-16-react-problems-1ogn
编写自定义 useWindowSi...
如何在 Amazon Linux ...