每个 React 程序员必备的 10 个 NPM 包

我们作为web开发人员，出于各种原因，在日常工作中往往会用到各种各样的NPM软件包，从简单的，如在终端上给console.log()
语句添加颜色，到成熟的前端库，如React。这些软件包无需重写，已经经历了大量用户的多次实锤，因此可以大大提高生产效率，为我们节省了很多时间。

在这篇文章中，我将向大家介绍10个NPM软件包。不管你是正在学习React，还是已经是有经验的开发者，都很有必要看一看。这些软件包将涉及多个领域，例如从UI框架到基于实用程序的包。事不宜迟，让我们开始吧。

1. Material UI

Material UI或许是针对React构建的最好的UI框架之一，它允许你在利用Google Material Design的同时构建一致的设计系统。Material UI通过提供超过50+个组件，例如tab卡片，进度条，模态窗口等，来帮助进行构建和设计App，以便于我们可以根据需要进一步深入主题。如果一定要我向React开发人员推荐UI框架，那么Material UI无疑将是我的首选。

NPM包安装地址：https://www.npmjs.com/package/@material-ui/core

2. Redux Toolkit

尽管useContext
和useReducer
钩子已减少了在现代应用程序中使用Redux的需求，但在很多代码库中，使用Redux管理全局状态的情况并不少见。在我看来，Redux仍然是值得学习的宝贵技能，且确实存在实际用例。不过，在React应用程序中设置Redux所需要的模板数量之大可能会让人不知所措，特别是对于初学者而言。

Redux Toolkit旨在解决这一问题！它被宣传为是一个官方的、有见地的、包含电池管理的工具集，以进行高效的Redux开发，同时官方Redux团队强烈推荐用Redux Toolkit来编写Redux逻辑。选择Redux Toolkit而不是常规Redux用于代码库，自己动手，丰衣足食。

NPM包安装地址：https://www.npmjs.com/package/@reduxjs/toolkit

3. React Icons

React Icons是一个很棒的软件包，它整合了来自十多个流行图标集，例如Font Awesome，Material Icons，Ant Design Icons等的图标。这样一来，你只需安装一个软件包即可轻松访问所有喜欢的图标，而不必分别一个个去安装了。通过ES6导入，可以确保仅导入你想要使用的图标。

NPM包安装地址：https://www.npmjs.com/package/react-icons

4. React Google Login

OAuth或Open Authorization可以让用户通过第三方应用，例如Google，Facebook，Twitter，GitHub等，注册或登录到你的网站。在许多主流网站上，往往会有“使用Google登录”之类的按钮。React Google Login允许实现相同的功能，并使得授权过程变得毫不费力。所有你需要的就是来自Google的API密钥，便可以使用此简单的程序包在网站中实现Google OAuth。

NPM包安装地址：https://www.npmjs.com/package/react-google-login

5. Formik

Formik通过处理所有重复性的工作，例如跟踪值状态，变更处理程序，提交处理程序，验证等等，使在React中构建表单的艰苦工作变得轻松起来。此表单库小巧又简单，可协助你减少编写表单代码的时间。另外其文档也很齐全，并有专门的教程供学习了解。

NPM包安装地址：https://www.npmjs.com/package/formik

6. React Query

全栈web应用程序的一个重要部分是从后端API或服务器状态中获取数据，并将数据加载到组件或全局状态中。如果你使用的是Redux，则此过程可能会在useEffect
钩子中触发操作：在安装完组件时从后端获取数据。那么，有没有更好的替代方法呢？

React Query也是一个出色的数据获取库，是此用例的理想候补。不仅可以获取，而且React Query还可以缓存、同步、更新服务器状态、分页甚至是延迟加载。这个库包含了所有可以更富有成效地与后端交互的内容，因此强烈推荐尝试一下。除了提高性能外，它还将帮助使代码库更简洁，更可维护。

NPM包安装地址：https://www.npmjs.com/package/react-query

7. Styled Components

Styled Components是一个CSS-in-JS库，简单来说就是在js中写css。它允许在JavaScipt中编写一个带标签的模板字符串，可用来创建样式化的HTML组件。为什么要在常规CSS上考虑这方面呢？好问题！Styled Components为自定义样式化元素提供了类似组件的结构，可避免多次键入className。此外，它还具有一些有价值的功能，例如自动生成前缀和自动创建关键CSS。由于Styled Components使用常规CSS语法，因此你完全能够快速从传统CSS过渡到它。

NPM包安装地址：https://www.npmjs.com/package/styled-components

8. Axios

Axios是基于promise的HTTP客户端，且客户端基于XMLHttpRequest
接口，从而可帮助你发出HTTP请求以获取某些数据。但是，等等，这不是本地fetch()
的用途。没错，事实正是如此。与其他软件包一样，此软件包的目标是简化流程并提供更多功能，例如自动化JSON数据转换，拦截请求和响应数据，防御XSRF攻击，取消请求，并为你提供一个更简单的API来处理HTTP请求。

NPM包安装地址：https://www.npmjs.com/package/axios

9. Framer Motion

Framer Motion是绝佳的React动画库，可使得网站更具交互性，看上去更有趣。只要访问登录页面，你就会被它的简单易用以及提供的功能（包括常规动画，基于手势的动画，拖动动画，滚动动画等等）所震撼。可以这样说：如果你正在寻找动画库，那么Framer Motion一定是最佳选择。

NPM包安装地址：http://npmjs.com/package/framer-motion

10. Reselect

如果你正在使用Redux并试图通过避免不必要的昂贵计算来提高性能，则此特殊的软件包会尤其有用。简而言之，Reselect是一个选择器库，允许你通过备忘录和备忘的选择器来高效地从Redux存储中计算派生数据。如果性能是你React-Redux应用程序的关键，那么千万不要忘了Reselect。

NPM包安装地址：https://www.npmjs.com/package/reselect

这就是我列出的10个NPM软件包，如果你使用React，那么建议你不妨一阅。也欢迎大家说一下自己使用什么软件包来使得工作流程更简单，更高效。最后，祝大家编程愉快！

（文本完）