60+ 实用 React 工具库，助力你高效开发！

大家好，我是若川。持续组织了5个月源码共读活动，感兴趣的可以点此加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。

最近看到一些实用的React工具库，总结了一下分享给大家，避免重复造轮子。希望对你有所帮助~

一、基础

1. React Infinite Scroller

React Infinite Scroller 用于在React项目中无限滚动加载内容。

npm地址：https://www.npmjs.com/package/react-infinite-scroller

2. react-dnd

React DnD是React和Redux核心作者 Dan Abramov创造的一组React 高阶组件，可以在保持组件分离的前提下帮助构建复杂的拖放接口。主要用于组件的拖放。

npm地址：https://www.npmjs.com/package/react-dnd

3. react-beautiful-dnd

react-beautiful-dnd是一款美观且简单易用的 React 列表拖拽库。

npm地址：https://www.npmjs.com/package/react-beautiful-dnd

4. react-icons

使用 react-icons 可以轻松地在 React 项目中包含流行的图标。

npm地址：https://www.npmjs.com/package/react-icons

5. react-share

react-share是一个React 的社交媒体分享按钮和分享次数库。

npm地址：https://www.npmjs.com/package/react-share

6. create-react-app

Create React App 是一个命令行界面工具，让您无需任何配置即可快速创建和运行 React 应用程序。

npm地址：https://www.npmjs.com/package/create-react-app

7. react-intl

React Intl 提供了一个 React 组件和用于国际化 React Web 应用的 Mixin。它提供一个格式化日期、数字、字符串消息的描述方式。

npm地址：https://www.npmjs.com/package/react-intl

8. react-router

react-router 是个用于 React.js 的路由解决方案（routing solution）。它轻松可以同步你的 app 和 URL，同时给嵌套，转换，和服务端渲染一流的支持。

npm地址：https://www.npmjs.com/package/react-router

9. React Virtualized

react-virtualized是一个以高效渲染大型列表和表格数据的响应式组件，可以用来解决长列表渲染问题。

npm地址：https://www.npmjs.com/package/react-virtualized

二、状态管理

1. redux

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。

npm地址：https://www.npmjs.com/package/redux

2. react-redux

Redux 官方提供的 React 绑定库。具有高效且灵活的特性。

npm地址：https://www.npmjs.com/package/react-redux

3. MobX

MobX是一个经久考验的库,使得状态管理简单而且透明、可伸缩的应用功能反应性编程(TFRP)。

npm地址：https://www.npmjs.com/package/mobx

4. redux-saga

redux-saga是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的库，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。

npm地址：https://www.npmjs.com/package/redux-saga

5. redux-thunk

Redux 的 Thunk 中间件。

npm地址：https://www.npmjs.com/package/redux-thunk

三、组件

1. Ant Design

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

官网地址：https://ant.design/index-cn

2. React Select

React Select 是一个开箱即用的 Select 控件。

官网地址：https://react-select.com/home

3. React Hot Toast

React Hot Toast 是一个热门的通知库，包含很多通知的样式。

官网地址：https://react-hot-toast.com/

4. React Content Loader

React Content Loader 可以用于生成列表加载占位组件。

官网地址：https://skeletonreact.com/

5. Sweet Alert

Sweet Alert是一个弹窗组件，包含很多弹窗样式。

官网地址：https://sweetalert.js.org/

6. draftjs

Draft JS 是一个富文本编辑器库。可以无缝地融入 React 应用程序。

官网地址：https://draftjs.org/

7. react-slick

React Slick是一个React轮播组件。

官网地址：https://react-slick.neostack.com/

8. Material-UI

Material-UI是一个简单的、可定制的组件库，用于构建更快、更漂亮、更易使用的 React 应用程序。

官网地址：https://mui.com/zh/getting-started/usage/

9. react-bootstrap

React Bootstrap是一个由 React 构建的 Bootstrap 4 组件。

官网地址：https://react-bootstrap.github.io/

10. react-custom-scrollbars

react-custom-scrollbars 是一个滚动条组件库，可以在web和移动端流畅的使用滚动条，并且可以完全自己定制

npm地址：https://www.npmjs.com/package/react-custom-scrollbars

11. react-dropdown

react-dropdown 是一个简单的下拉组件，灵感来自于react-select。

npm地址：https://www.npmjs.com/package/react-dropdown

12. react-horizontal-scrolling-menu

react-horizontal-scrolling-menu 是一个水平滚动菜单组件。

npm地址：https://www.npmjs.com/package/react-horizontal-scrolling-menu

13. react-calendar

react-calendar 是一个 React 的日历组件。

npm地址：https://www.npmjs.com/package/react-calendar

14. react-datepicker

react-datepicker是一个日期选择组件。

npm地址：https://www.npmjs.com/package/react-datepicker

15. react-table

react-table 是一个强大的表格组件。

npm地址：https://www.npmjs.com/package/react-table

16. react-awesome-button

react-awesome-button 是一个按钮组件库。

npm地址：https://www.npmjs.com/package/react-awesome-button

17. react-compound-slider

react-compound-slider 是一个滑块组件。

npm地址：https://www.npmjs.com/package/react-compound-slider

18. react-checkbox-tree

react-checkbox-tree 是一个复选框组件。

npm地址：https://www.npmjs.com/package/react-checkbox-tree

19. recharts

recharts 是一个React图表库。

npm地址：https://www.npmjs.com/package/recharts

20. react-modal

react-modal 是一个静态动画库组件库。

npm地址：https://www.npmjs.com/package/react-modal

21. react-responsive-carousel

react-responsive-carousel 是一个响应式的轮播组件库。

npm地址：https://www.npmjs.com/package/react-responsive-carousel

22. react-image-lightbox

react-image-lightbox 是一个用于显示图片的组件库。

npm地址：https://www.npmjs.com/package/react-image-lightbox

23. react-tabs

react-tabs 是一个选项卡组件。

npm地址：https://www.npmjs.com/package/react-tabs

24. rebass

Rebass是一个用于构建响应式WEB应用的React UI工具包，它有60多种可定制的基础组件，而且风格样式分离，不需要编写自定义的CSS。

官网地址：https://rebassjs.org/

25. react-suite

React Suite是一套转为后端打造的企业级UI组件库，它由 HYPERS 前端团队与 UX 团队共同打造，有大量的通用组件和功能，而且支持 Typescript 与 Flow, 支持服务端渲染。

官网地址：https://rsuitejs.com/

四、动画

1. react-spring

react-spring是基于spring-physics（弹簧物理）的react动画库，动画效果更加流畅、自然。

npm地址：https://www.npmjs.com/package/react-spring

2. react-motion

react-motion是一个强大的react动画库。npm地址：https://www.npmjs.com/package/react-motion

3. react-transition-group

react-transition-group是一个专为动画设计的库。

npm地址：https://www.npmjs.com/package/react-transition-group

4. react-spinner

react-spinner用来创建加载组件。

npm地址：https://www.npmjs.com/package/react-spinner

五、HTTP

1. Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

npm地址：https://www.npmjs.com/package/axios

2. apisauce

apisauce 是一个建立在 axios 之上的 http 客户端。官方介绍：Axios + standardized errors + request/response transforms.

npm地址：https://www.npmjs.com/package/apisauce

3. SuperAgent

SuperAgent 是一个轻量的Ajax API，服务器端（Node.js）客户端（浏览器端）均可使用，SuperAgent具有学习曲线低、使用简单、可读性好的特点,可作为客户端请求代理模块使用，当想处理get,post,put,delete,head请求时，可以考虑使用SuperAgent。

npm地址：https://www.npmjs.com/package/superagent

六、CSS

1. styled-components

styled-components 可以在 JavaScript 代码中使用 CSS 来设置 React 组件的样式。通过这个库可以自定义组件的样式，它会将给定的样式包装成一个组件，可以直接使用这个组件，也不需要组件和样式之间的映射，即创建后就是一个正常的React 组件。

npm地址：https://www.npmjs.com/package/styled-components

2. emotion

emotion是JS库中一种高效灵活的CSS。基于JS库中的许多其他CSS，它允许您使用字符串或对象样式快速设置应用程序样式。它具有可预测的组成，以避免CSS的特殊性问题。

npm地址：https://www.npmjs.com/package/emotion

七、测试

1. @testing-library/react

React Testing Library 基于DOM Testing Library的基础上添加一些API，主要用于测试React组件。该库在使用过程并不关注组件的内部实现，而是更关注测试。该库基于react-dom和react-dom/test-utils，是以上两者的轻量实现。

npm地址：https://www.npmjs.com/package/@testing-library/react

2. Enzyme

Enzyme 来自 airbnb 公司，是一个用于 React 的 JavaScript 测试工具，方便你判断、操纵和遍历 React Components 输出。

npm地址：https://www.npmjs.com/package/enzyme

八、表单

1. react-hook-form

React Hook Form是一个高性能、灵活、易拓展、易于使用的表单校验库，用于React Web＆Native的表单验证。

官网地址：https://react-hook-form.com/

2. Formik

Formik是由React组件和hooks组成，它内置了表单的state管理操作，无需我们在单独为表单建立state，同时使用了Context，能够让表单组件多层嵌套，不再需要我们一层层传递。

npm地址：https://www.npmjs.com/package/formik

3. react-use-form-state

react-use-form-state是一个小型 React Hook，它使用原生表单输入元素来简化管理表单的状态。

npm地址：https://www.npmjs.com/package/react-use-form-state

九、自定义Hooks

1. use-clippy

use-clippy 是一个用 TypeScript 实现的自定义 React Hook，可以用于读取和写入用户的剪贴板。

npm地址：https://www.npmjs.com/package/use-clippy

2. react-window-communication-hook

react-window-communication-hook 可以实现在浏览器上下文（窗口、选项卡、iframes）之间进行通信。

npm地址：https://www.npmjs.com/package/react-window-communication-hook

3. react-speech-kit

react-speech-kit 是一个用于浏览器内语音识别和语音合成的 React hook。简单来说就是可以将声音识别为文字，将文字合成为语音。

npm地址：https://www.npmjs.com/package/react-speech-kit

4. react-script-hook

react-script-hook是一个用于动态加载（并在加载时通知）外部脚本的钩子。

npm地址：https://www.npmjs.com/package/react-script-hook

5. use-mouse-action

use-mouse-action 是一个有三个React hook的库，用于侦听元素或 JSX 元素上的鼠标事件。包括鼠标操作、鼠标按下、鼠标抬起事件。

npm地址：https://www.npmjs.com/package/use-mouse-action

6. @rehooks/online-status

@rehooks/online-status 用于检查网络状态以确定用户是否已连接到网络。

npm 地址：https://www.npmjs.com/package/@rehooks/online-status

7. @rehooks/document-title

@rehooks/document-title 用于更新页面标题（显示在浏览器的选项卡中）。

npm地址：https://www.npmjs.com/package/@rehooks/document-title

8. useHooks

自定义hook库，包含很多实用的Hooks。

官网地址：https://usehooks.com/

9. react-hanger

react-hanger是一个自定义React Hooks库，它包含很多实用的自定义hooks。

npm地址：https://www.npmjs.com/package/react-hanger

················· 若川简介 ·················

你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经写了7篇，点击查看年度总结。
同时，最近组织了源码共读活动，帮助3000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。