今天分享一个推荐的React库。注：排名不分先后，根据具体业务场景谨慎使用。一、状态管理（一）ReactReduxRedux是JavaScript应用的状态容器，提供可预测的状态管理。ReactRedux是Redux的官方React绑定。允许您构建在不同环境（客户端、服务器、本机应用程序）中运行且易于测试的一致应用程序。Github：https://github.com/reduxjs/react-redux(2)MobxMobX是一个久经考验的库，它通过使用透明的函数式反应式编程使状态管理变得简单和可扩展。Github：https://github.com/mobxjs/mobx(3)RecoilRecoil是一个用于React应用的实验性状态管理库。它提供了一些单独使用React难以实现的功能，同时兼容React的最新功能。Github:https://github.com/facebookexperimental/Recoil(4)Redux-Sagaredux-saga是一个旨在使应用程序副作用（即异步操作如数据获取和不纯操作如访问浏览器缓存）更容易管理的库，更有效地执行，更容易测试，更好地处理故障。Github：https://github.com/redux-saga/redux-saga2，文档网站（一）DocusaurusDocusaurus是facebook开源的一个项目，用于轻松搭建、部署和维护开源项目网站。使用Docusaurus可以让你专注于你的内容，而只需编写你的Markdown文件。Github：https://github.com/facebook/docusaurus（2）StorybookStorybook是一个UI组件的开发环境，开发者可以通过它浏览组件库，查看各个组件的不同状态，交互开发和测试组件。Github：https://github.com/storybookjs/storybook/（3）ReactStyleguidistReactStyleguidist是一个React设计规范生成器，本地组件开发环境，支持热重载，共享设计规范。它列出了组件propTypes并显示了基于Markdown文件的可编辑的实时使用示例。Github：https://github.com/styleguidist/react-styleguidist3、路由（一）ReactRouterReactRouter是一个完整的React路由解决方案。ReactRouter使UI与URL保持同步。它有一个简单的API，具有强大的功能，如代码缓冲区加载、动态路由匹配和建立正确的位置转换处理。Github：https://github.com/remix-run/react-router(2)ReactLocationReactLocation是客户端React应用程序的路由器。它支持异步路由、深度集成的搜索参数API、可选的JSX路由定义、用于路由加载器缓存的预打包简单缓存实现、与外部缓存和存储的轻松集成等等。Github：https://github.com/TanStack/location4，脚手架（一）创建ReactAppCreateReactApp是官方支持的创建单页React应用的方式。它提供了一个没有配置的现代构建设置。Github：https://github.com/facebook/create-react-app(2)RekitRekit是一个开源脚手架，用于使用React、Redux和React-router构建可扩展的Web应用程序。它帮助开发人员专注于业务逻辑，而不是处理大量的库、模式、配置等。Github：https://github.com/rekit/rekit5、应用程序调试（1）ReactDeveloperToolsReactDevtools浏览器扩展，可以查看ReactChrome和Firefox开发者工具中的组件。可用于检查React组件层次结构并在页面上显示React组件。安装地址：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-CN（2）WhyDidYouRenderWhyDidYouRender由WelldoneSoftware开发，可以找到在开发的时候检测到一些不必要的渲染问题，并告诉我们是什么导致了当前的渲染。Github：https://github.com/welldone-software/why-did-you-render6。动画（一）Animate.cssanimate.css是一个使用CSS3动画制作的CSS动画效果合集，里面包含了很多预设的常用动画，而且使用起来非常简单。GitHub:https://github.com/animate-css/animate.css(2)ReactSpringreact-spring是一个基于spring物理的动画库，满足大部分UI相关的动画需求，提供足够灵活的工具，自信地投射想法进入不断变化的界面。这个库代表了一种现代的动画方法。它继承了animated强大的插值和性能，以及react-motion的易用性。GitHub:https://github.com/pmndrs/react-spring(3)ReactRevealReactReveal是一个高性能的React动画库。它占地面积小，是专门为ES6中的React编写的。它可用于创建各种炫酷的滚动效果显示。GitHub：https://github.com/rnosov/react-reveal(4)React-MotionReact-Motion是一个动画库，可以更轻松地创建和实现逼真的动画。它利用物理学为React元素创建几乎自然的动画。Github：https://github.com/chenglou/react-motion7、可视化（一）ApacheEChartsApacheECharts是一个基于Javascript的数据可视化图表库，提供直观、生动、交互、可定制的数据可视化图表。它是用纯JavaScript编写的，基于zrender，一个全新的轻量级画布库。GitHub:https://github.com/apache/echarts(2)RechartsRecharts是一个用React和D3构建的重新定义的图表库。这个库的主要目的是在React应用程序中轻松编写图表。GitHub：https://github.com/recharts/recharts（3）react-visreact-vis是一套react组件，用于渲染常见的数据可视化图表，如折线图/面积图/条形图、热图、散点图图、等高线图、六角形热图、饼图和圆环图、旭日图、雷达图、平行坐标和树状图。GitHub：https://github.com/uber/react-vis8、UI组件（一）AntDesignGitHub上超过26.9万个项目使用了AntDesign组件库，AntDesignofReact是基于AntDesign的ReactUI设计系统组件库主要用于企业级中后台产品的研发。AntDesign提供了大量优质的组件，非常适合快速构建整个UI框架，也可以只使用单个组件。GitHub:https://github.com/ant-design/ant-design(2)MUIMUI是一个基于谷歌MaterialDesign的简单可定制的React组件库。MUI不仅仅是一个组件库，而是一个完整的设计系统。它具有完整的指南、设计原则和UI设计最佳实践系统。GitHub:https://github.com/mui-org/material-ui(3)ReactBootstrapReact-Bootstrap是比较老的ReactUI组件库之一。它使用React重建前端框架Bootstrap。该库由完全响应和可访问的现成组件组成。所有设计元素都是高度可定制的。GitHub：https://github.com/react-bootstrap/react-bootstrap9、性能优化（一）ReactVirtualizedReactVirtualized是一个响应式组件，可以高效渲染大型列表和表格数据，可以用来解决长列表渲染问题。Github：https://github.com/bvaughn/react-virtualized(2)ReactWindowReactWindow是一个用于高效渲染大型列表和表格数据的React组件。通过仅渲染大型数据集的一部分（刚好足以填充视口）来工作。Github：https://github.com/bvaughn/react-window10，表格（一）ReactHookFormReactHookForm是一个高性能、灵活、易扩展、易用的ReactWeb表单验证库和ReactNative表单验证。GitHub:https://github.com/react-hook-form/react-hook-form(2)FormikFormik是一个可以在React中构建表单的组件。它旨在轻松管理具有复杂验证的表单，同时支持同步和异步表单级和字段级验证。GitHub:https://github.com/jaredpalmer/formik(3)ReactFinalFormReactFinalForm是对FinalForm的一个精简的Reactwrapper，它是一个基于订阅的表单状态管理库，使用了观察者模式，所以只需要更新组件随着表单状态的变化而重新渲染。GitHub：https://github.com/final-form/react-final-form11、富文本编辑器（一）Draft.jsDraft.js是Facebook的一个开源项目，是React项目首选的富文本编辑器框架.它是一个健壮的、可扩展的和可定制的框架。Draft.js遵循与React中的受控组件相同的范例，并提供一个呈现富文本输入的编辑器组件。它还公开了一个EditorStateAPI来处理/存储编辑器组件中的状态更新。GitHub:https://github.com/facebook/draft-js(2)Slate.jsSlate.js是一个受Draft.js启发的富文本编辑器。它是一个可深度定制的React富编辑器框架。与Draft.js类似，它有一个很好的API、一个强大的插件基础设施，以及与React的深度连接。此外，插件生态系统比Draft.js小一点，但其插件的质量会更好。GitHub:https://github.com/ianstormtaylor/slate(3)TinyMCETTinyMCE是一款流行的富文本编辑器。它的目标是帮助其他开发人员构建漂亮的Web内容解决方案。它易于集成，可以部署在基于云、自托管或混合环境中。这种设置使得合并Angular、React和Vue等框架成为可能。它还可以使用50多个插件进行扩展，每个插件都有100多个自定义选项。GitHub:https://github.com/tinymce/tinymce(4)wangEditorwangEditor是一款使用Typescript开发的网页富文本编辑器，轻量、简洁、易用，开源免费。兼容常用PC浏览器：Chrome、Firefox、Safari、Edge、QQ浏览器、IE11。GitHub：https://github.com/wangeditor-team/wangEditor/12、JS中的CSS（一）Styled--Componentsstyled-components可以在JavaScript代码中使用CSS来设置React组件的样式。通过这个库，你可以自定义组件的样式。它将给定的样式打包成一个组件，可以直接使用，不需要组件和样式之间的映射，即创建后就是一个普通的React组件。Github：https://github.com/styled-components/styled-components(2)EmotionEmotion是一个高性能且灵活的CSS-in-JS库。基于许多其他CSS-in-JS库，它允许开发人员使用字符串或对象样式快速设置应用程序样式。Github：https://github.com/emotion-js/emotion13，数据请求（一）AxiosAxios是一个基于promise的网络请求库，工作在node.js和浏览器中。它是同构的（即相同的代码可以在浏览器和node.js中运行）。在服务器端它使用原生的node.jshttp模块，在客户端（浏览器端）它使用XMLHttpRequests。Github：https://github.com/axios/axios(2)ReactQueryReactQuery是一个适用于reacthooks的请求库，可以为任何类型的异步数据提供React状态管理功能，使得在React中获取和缓存，同步和更新服务器数据轻而易举。Github：https://github.com/tanstack/query14。测试（一）JestJest是Facebook开发的JavaScript测试框架。它应该是测试React的首选，因为它是由React的发明者创建的，并且受到React社区的支持和开发。它还支持Babel、TypeScript、Node、Angular和Vue等JS框架。Github：https://github.com/facebook/jest（2）ReactTestingLibraryReactTestingLibrary在DOMTestingLibrary的基础上增加了一些API，主要用于测试React组件。该库在使用过程中并不关注组件的内部实现，更多的是测试。这个库基于react-dom和react-dom/test-utils，是以上两者的轻量级实现。Github：https://github.com/testing-library/react-testing-library(3)VitestVitest是一个由Vite提供支持的极快的单元测试框架。它与Vite的配置、转换器、解析器和插件一致，开箱即用的TypeScript/JSX支持，支持智能和即时监视模式，如用于测试的HMR，用于模拟、标记和监控的内置Tinyspy等。Github:https://github.com/vitest-dev/vitest15,CustomHooks(一)Ahooksahooks是阿里巴巴开源的一套ReactHooks库，封装了大量有用的Hooks。Github：https://github.com/alibaba/hooks(2)ReactUseReactUse是ReactHooks的必备合集。它包括六类Hook：传感器、用户界面、动画效果、副作用、生命周期和状态。Github:https://github.com/streamich/react-use(3)useHooksuseHooks是一个简单易懂的ReactHooks集合。Github：https://github.com/uidotdev/usehooks16，服务端渲染（一）Next.jsNext.js是一个服务端渲染的通用JavaScriptweb应用的小型框架，它建立在React、Webpack和Babel之上，为网站提供了强大的支持。Github：https://github.com/vercel/next.js(2)RazzleRazzle是一个类似于next.js的简单服务器端框架，用于在服务器端渲染React应用程序。更方便的一点是不需要配置。通过将通用的JavaScript应用程序抽象为单个依赖项，然后提取框架、路由和数据。同时，Razzle支持可插拔渲染。Github：https://github.com/jaredpalmer/razzle17，拖拽排序（一）ReactBeautifulDndreact-beautiful-dnd是一个美观易用的React列表拖拽库。其动画效果自然，性能卓越，简洁强大的API易于使用，与标准浏览器的交互非常好。Github:https://github.com/atlassian/react-beautiful-dnd(2)ReactDnDReactDnD是由React和Redux的核心作者DanAbramov创建的一套React高层组件，可以帮助我们构建复杂的拖放界面，同时保持组件解耦。它可以通过拖拽在应用程序的不同部分之间传输数据，组件响应拖放事件改变它的外观和应用程序状态。Github:https://github.com/react-dnd/react-dnd(3)ReactDraggableReact-Draggable库简单易用，将CSS中的transform应用到React组件上，让我们可以在UI中拖动组件.它有不同的属性，可以让你改变组件的行为，是创建直观、用户友好界面的绝佳选择。Github:https://github.com/react-grid-layout/react-draggable18,Internationalization(1)ReactIntlReactIntl提供了一个React组件和一个Mixin，用于国际化Reactweb应用程序。它提供了一种格式化日期、数字和字符串消息的描述性方式。Github：https://github.com/formatjs/formatjs(2)React-i18nextreact-i18next是一个基于i18next的强大的国际化框架，可以在react和react-native应用中使用，是目前非常主流的国际化框架解决方案。Github:https://github.com/i18next/react-i18next19,others(1)ReactideReactide是第一个专门用于Reactweb应用程序开发的IDE。它是一个跨平台桌面应用程序，提供自定义模拟器，不需要构建工具和服务器配置，开箱即用。Reactide将开发带回到打开单个文件的时代，立即在浏览器中呈现项目。借助Reactide，开发人员可以在利用React的强大功能的同时，使用单个ReactJSX文件实现同样的简单性。Github：https://github.com/reactide/reactide(2)GatsbyGatsby是一个基于React构建的静态站点生成器，拥有丰富的插件生态。其主要目标之一是提供具有快速访问速度的网页。它通过自己的缓存、静态页面生成和基于边缘的CDN数据源来实现这一点。Github：https://github.com/gatsbyjs/gatsby(3)ReactHelmetReactHelmet是一个HTML文档头部管理工具，管理文档头部的所有变化。Helmet采用纯HTML标签并输出纯HTML标签。对于React初学者来说非常简单和友好。Github：https://github.com/nfl/react-helmet
