英文 | 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
总结
以上内容就是我想与您分享的全部，我认为现在您对何时选择哪个库应该有了很好的了解，如果您还有什么问题，请在留言区告诉我，我们一起互相学习交流。
最后，感谢您的阅读，祝编程愉快！~
学习更多技能
请点击下方公众号
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
