作为 React 开发人员，你需要尝试这 10 个 NPM 包

作为 Web 开发者，我们每天都会使用多个 NPM 包，原因多种多样，从简单的功能（例如为console.log()终端语句添加颜色）到功能齐全的前端库（例如 React）。这些包提高了我们的生产力，并节省了大量时间，因为我们无需重写那些已经被大量用户多次实现的代码。

在本文中，我将向您介绍 10 个 NPM 软件包，无论您是正在学习 React 还是已经是经验丰富的用户，都应该了解一下。我们将涵盖多个领域，从 UI 框架到基于实用程序的软件包。闲话少叙，让我们开始吧。

材质 UI

Material UI可能是为 React 构建的最佳 UI 框架之一，它允许你利用 Google 的 Material Design 构建一致的设计系统。Material UI 提供了 50 多个组件（例如卡片、进度条、模态框等等）来帮助你构建和设计，你可以根据自己的需求进一步设置主题。如果要我向 React 开发者推荐一个 UI 框架，Material UI 无疑是我的首选。

链接到 NPM 包

Redux 工具包

尽管 ReduxuseContext和useReducerhooks 已经减少了在现代应用程序中使用 Redux 的需求，但仍然有很多代码库使用 Redux 进行全局状态管理。在我看来，Redux 仍然是一项值得学习的宝贵技能，并且确实有其自身的用例。然而，在 React 应用程序中设置 Redux 所需的大量样板代码可能会让人不知所措，尤其是对于初学者而言。

Redux Toolkit 的目标就是解决这个问题！它被宣传为 Redux 开发官方、专业、功能齐全的高效工具集，并且 Redux 官方团队强烈推荐用它来编写 Redux 逻辑。下次选择 Redux Toolkit 而不是普通的 Redux，对您和您的代码库都有好处。

链接到 NPM 包

React 图标

React Icons是一款出色的软件包，它整合了十多个热门图标集的图标，例如 Font Awesome、Material Icons、Ant Design Icons 等等。只需安装一个软件包，即可轻松访问所有您喜爱的图标，而无需逐个安装。通过 ES6 导入，您可以确保只导入您想要使用的图标。

链接到 NPM 包

React Google 登录

OAuth，即开放授权 (Open Authorization)，允许用户通过其他服务提供商（例如 Google、Facebook、Twitter、GitHub 等）注册或登录您的网站。您一定注意到许多热门网站上都有“使用 Google 登录”按钮。React Google Login允许您实现相同的功能，并简化授权流程。您只需要一个 Google 的 API 密钥，即可使用这个简单的软件包在您的网站中实现 Google OAuth。

链接到 NPM 包

福米克

Formik负责处理所有重复性工作，例如跟踪值状态、更改处理程序、提交处理程序、验证等等，让在 React 中构建表单这项繁琐的工作变得轻松。这个表单库小巧简洁，鼓励您减少编写表单代码的时间，专注于构建更重要的功能。它拥有完善的文档，并有专门的教程帮助您快速上手。

链接到 NPM 包

反应查询

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

React Query是一个优秀的数据获取库，非常适合此用例。React Query 不仅支持数据获取，还支持缓存、同步、更新服务器状态、分页，甚至懒加载。所有让你与后端交互更高效的功能都包含在这个库中，我强烈建议你尝试一下。除了性能提升之外，它还能让你的代码库更简洁、更易于维护。

链接到 NPM 包

样式化组件

Styled Components是一个 CSS-in-JS 库，它使用 JavaScipt 的带标签模板字面量来创建带样式的 HTML 组件。为什么你应该考虑使用这个而不是常规的 CSS 方法呢？好问题！Styled Components 为你的自定义样式元素提供了类似组件的结构，从而节省了你className大量的代码编写时间。此外，它还具有一些实用的功能，例如自动添加供应商前缀和自动关键 CSS。由于 Styled Components 使用常规 CSS 语法，你可以快速过渡到它。

链接到 NPM 包

Axios

Axios是一个基于 Promise 的 HTTP 客户端，它基于XMLHttpRequest接口，可以帮助你发起 HTTP 请求来获取数据。不过，等等，这不正是原生fetch()应用的用途吗？没错。与其他包一样，这个包的目标是简化流程并提供更多功能，例如自动 JSON 数据转换、拦截请求和响应数据、防范 XSRF、取消请求，并提供更简洁的 API 来发起 HTTP 请求。

链接到 NPM 包

帧运动

Framer Motion是一款出色的 React 动画和动效库，能够提升你的网站互动性和视觉趣味。只需访问其落地页，你就会惊叹于它极致的易用性和丰富的功能，涵盖了常规动画、手势动画、拖动动画、滚动动画等等。这么说吧：如果你正在寻找动画库，Framer Motion 绝对是你的不二之选。

链接到 NPM 包

重新选择

如果你正在使用 Redux，并希望通过避免不必要的高开销计算来提升性能，那么这个特殊的包就尤其有用。简而言之，Reselect是一个选择器库，它允许你通过memoization和 memoized selectors高效地计算 Redux store 中的派生数据。如果性能是你的 React-Redux 应用的关键，那么一定要试试 Reselect。

链接到 NPM 包

这就是我列出的 10 个 NPM 软件包，如果你正在使用 React，我觉得你应该看看。如果你正在使用 React，请告诉我你使用了哪些软件包来简化你的工作流程并提高效率，我很想听听你的想法。在此之前，祝你编程愉快！