英文 | https://javascript.plainenglish.io/45-npm-packages-to-solve-16-react-problems-a9ab18946224
翻译 | 杨小爱
React 简直太棒了，它很受欢迎且性能良好。但是 React 的一个重要方面是，它并没有包含所有的解决方案。
这就是为什么我们需要寻找其他的库来解决一些问题的原因。如果您是初学者，那么您必须花费大量时间寻找问题的最佳解决方案。
今天我们将进行比较讨论，以了解更多有关 react 中不同问题的替代解决方案。
01、全局状态管理
在 99% 的应用程序中，组件之间共享状态是强制性的。并且有一些很好的解决方案 - 本地和外部。
受到推崇的
如果你问我一个解决方案，我会说 Redux。不是因为它是最好的，而是因为它是最实用的。许多公司已经在使用它，您将不得不在某个时候使用它。
redux 与 react-redux
此外，生态系统也很棒。您几乎可以找到任何问题的解决方案。一些与 redux 一起使用的很棒的库是：
- redux-thunk -> 用于处理异步操作。
- redux-persist -> 用于在本地存储数据（离线支持）。
- reselect -> 用于更快地存储查询。
备择方案
- context -> 内置于 React。适合简单使用。不利于性能。特别是如果您有大量变化的数据。
- recoil -> 旨在解决特定问题。不适用于所有用例。您可以先弄清楚它后，在考虑是否使用。
- mobx -> 遵循观察者模式。适合反应式编程。不应在任何新项目中使用。
02、服务器状态管理
如果您的应用程序严重依赖某些外部数据源，那么管理该数据（缓存、预取等）对于性能至关重要。
受到推崇的
我个人是 react-query 的超级粉丝，还有很多像我一样的人。它就像魔术一样工作。
- recat-query
它处理缓存陈旧数据，以及更多开箱即用的功能。它简单、强大且可配置！
备选方案
游戏中还有另一个名为 SWR 的玩家。这是一个类似于 React Query 的库。
- swr
这个库的主要好处是它是由 Vercel 构建的。他们是创建 NextJS 的人。因此，在使用 NextJS 时，您可以期待更好的性能。
03、Scaffolding
从头开始创建 React 应用程序很复杂。设置 Webpack、Bable 等可能令人生畏！
受到推崇的
NextJS 是我从头开始创建 React 应用程序时的选择。它被称为全栈 React 框架。
- NextJS
在文档中，它说，
Next.js 为您提供生产所需的所有功能的最佳开发人员体验：混合静态和服务器渲染、TypeScript 支持、智能捆绑、路由预取等。无需配置。
最重要的特点是它开箱即用的 SEO 支持。这很棒！你也可以在 React 中做 SEO。但它并不像 Next 那样简单。
备选方案
如果您开始使用 React 或构建一些基本项目，那么您还有其他选择。
- create-react-app -> 构建单页应用程序。适合初学者。
- gatsby -> 构建面向内容的静态网站。不适用于其他用例。
04、表格处理
90% 的 Web 应用程序都有处理表单的需求，而表单的输入是一个很大的痛苦。但我们有一些好消息！
受到推崇的
React hook 表单是用于表单处理的最新和最好的（据我说 :P ）库。它非常高效且灵活。
- react-hook-form
它对一些外部设计库也有很好的支持，比如 material-ui 和 ant-design。
备选方案
这个领域有一些很好的选择。
- Formik -> Formik 带有久经考验的解决方案，用于输入验证、格式化、屏蔽、数组和错误处理。
- redux-form -> 不要使用它。它真的会损害性能。
05、HTTP 调用
在现代世界中，几乎所有网站都依赖于一些外部数据源。所以进行 HTTP 调用非常简单。
受到推崇的
Fetch 是进行 HTTP 调用的推荐方式。
- fetch
它具有有限但强大的功能。它可以支持您 95% 的工作负载。
备选方案
Axios 是对 fetch 的改进。它很受欢迎。
- Axios
它有一些不错的特性，比如内置的 XSRF 保护和自动 JSON 转换以及拦截 HTTP 调用的能力。如果你需要那个，你应该自己去研究。
06、Styling
你将需要Styling。毫无疑问。有多种方法可以为您的应用程序设置样式。
受到推崇的
许多人可能不同意我的看法。但是我认为在 React 应用程序中样式化组件是最好的选择。
- styled-components
它有助于创建具有明确关注点分离的干净组件。此外，它可以通过 props 轻松管理和配置。
备择方案
但是，正如我所说，还有其他很棒的选择！
- plain old css -> 支持开箱即用。对于较小的项目应该没问题。
- sass -> 对 CSS 的改进。它为管理 CSS 提供了很好的功能。适用于中型甚至更大的项目。
- styled-jsx -> 具有许多类似功能的库，例如 styled-components。在这里和那里有一些额外的功能。
07、UI Library
在许多情况下，手工设计所有组件可能不是一个好主意。在这些情况下，使用某种 UI 库可能是个好主意。
受到推崇的
对我来说最通用和可配置的 UI 库是 Material UI。
- material-ui
它非常受欢迎并被许多公司使用。它是高度可配置的，这就是它如此强大的原因。
备选方案
还有一些不错的选择可供检查。
semantic-ui -> 许多内置组件。
ant-design -> 可配置性较低。有限但不错的组件。
chakra-ui -> 最近越来越受欢迎。
08、Documentation
好的文档可以在未来节省 100 多个小时。因此，在项目的早期就积极主动地采用文档库。
受到推崇的
推荐的创建文档的方法是 React StyleGuidist。
- react-styleguidist
它易于使用且功能强大。
备选方案
还有一些其他的选择。
- js-docs -> javascript 的通用文档工具。
- react-docz -> 非常易于使用的文档指南。值得一试。
09、多语言支持
如果您正在全球范围内构建产品，那么您可能希望在 React 应用程序中添加多语言支持。
受到推崇的
React i18next 是在 React 应用程序中实现多语言支持的事实上的选项。
- react-i18next
- i18next
备择方案
还有其他一些不错的选择。
- react-intl
这也支持其他库，如 VueJS 和 Angular。
10、 Animation
动画使您的应用程序栩栩如生。在 React 中使用动画有一些不错的选择。
受到推崇的
纯 CSS 是制作 React 应用程序动画的最佳方式。它简单快捷。此外，这更具性能。
Plain CSS Animations
备选方案
如果您想要现成的东西，那么这里有一些建议给您。
- framer-motion -> 生产就绪动画
- react-awesome-reveal -> 这用于简单的动画来显示组件
- react-spring -> 另一个很棒的随时可用的库。
11、长列表渲染
渲染一个长列表会严重影响应用程序的性能。在这种情况下使用库可能是一个好主意。
受到推崇的
如果你有某种无限滚动的应用程序，那么你应该考虑 React Window。
- react-window
备选方案
如果您不需要无限滚动列表，那么您可以对数据进行分页
- react-paginate
12、代码质量工具
Linters 可以静态地发现代码中的任何错误。使用某种 linter 是个好主意。
受到推崇的
首选解决方案是 Eslint
- eslint
备选方案
- jshint -> 旧库
- tslint -> 打字稿的 Linter。现在不推荐。
13、格式化
具有一致的视觉样式对于任何应用程序都非常重要，而代码格式化程序可以为您完成这项工作！
受到推崇的
- prettier
这对您来说是最好的解决方案。你不需要其他任何东西！
14、分析
数据就是未来。今天的大多数企业都是数据驱动的。因此，为您的应用程序拥有一个好的分析工具非常重要！
受到推崇的
最流行和最强大的工具是 React Ga。
- react-ga
我认为你不需要其他任何东西。
15、测试
我不需要重申测试对于任何应用程序的重要性。
受到推崇的
推荐的方法是 React Testing Library
- react-testing-library
它非常易于使用，并且旨在遵循现实生活中的使用情况。
备选方案
- jest - -> 用于单元测试
- cypress -> 用于端到端测试
16、构建可共享的组件
如果您在一个大型团队中，那么轻松共享组件可能会成为一个大问题！
受到推崇的
如果您正在寻找最完整的解决方案，Storybook 是您的最佳选择。
- Storybook
总结
以上内容就是我想与您分享的全部，我认为现在您对何时选择哪个库应该有了很好的了解，如果您还有什么问题，请在留言区告诉我，我们一起互相学习交流。
最后，感谢您的阅读，祝编程愉快！~
