60+ 实用 React 工具库,助力你高效开发!(上)

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

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


一、基础


1. React Infinite Scroller

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

npm地址:www.npmjs.com/package/rea…


2. react-dnd

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

npm地址:www.npmjs.com/package/rea…


3. react-beautiful-dnd

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

npm地址:www.npmjs.com/package/rea…


4. react-icons

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

npm地址:www.npmjs.com/package/rea…


5. react-share

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

npm地址:www.npmjs.com/package/rea…


6. create-react-app

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

npm地址:www.npmjs.com/package/cre…


7. react-intl

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

npm地址:www.npmjs.com/package/rea…


8. react-router

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

npm地址:www.npmjs.com/package/rea…


9. React Virtualized

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

npm地址:www.npmjs.com/package/rea…


二、状态管理


1. redux

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

npm地址:www.npmjs.com/package/red…


2. react-redux

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

npm地址:www.npmjs.com/package/rea…


3. MobX

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

npm地址:www.npmjs.com/package/mob…


4. redux-saga

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

npm地址:www.npmjs.com/package/red…


5. redux-thunk

Redux 的 Thunk 中间件。

npm地址:www.npmjs.com/package/red…


三、组件


1. Ant Design

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

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


2. React Select

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

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


3. React Hot Toast

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

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


4. React Content Loader

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

官网地址:skeletonreact.com/


相关文章
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
24 0
|
3月前
|
缓存 前端开发 JavaScript
【第58期】React 开发者的 Awesome 库
【第58期】React 开发者的 Awesome 库
55 1
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
100 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
40 0
|
6天前
|
前端开发 API 开发者
React这些新特性在开发效率上有哪些改进
【4月更文挑战第18天】React 18 提升开发效率,引入新Root API `createRoot`优化挂载,支持渐进式升级,减少迁移成本。新增性能工具如Profiler API和Concurrent Mode,自动化批处理提高性能,减少重渲染。服务器组件优化加载速度,减轻客户端负担。开发者可更高效构建和优化React应用。
71 6
|
14天前
|
前端开发 JavaScript
深入了解 React 中的 Ref:不是魔法,是超级工具
深入了解 React 中的 Ref:不是魔法,是超级工具
|
18天前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
15 0
|
24天前
|
JSON API 网络架构
FastAPI+React全栈开发13 FastAPI概述
FastAPI是一个高性能的Python Web框架,以其快速编码和代码清洁性著称,减少了开发者错误。它基于Starlette(一个ASGI框架)和Pydantic(用于数据验证)。Starlette提供了WebSocket支持、中间件等功能,而Pydantic利用Python类型提示在运行时进行数据验证。类型提示允许在编译时检查变量类型,提高开发效率。FastAPI通过Pydantic创建数据模型,确保数据结构的正确性。FastAPI还支持异步I/O,利用Python 3.6+的async/await关键词和ASGI,提高性能。此外,
35 0
|
1月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
32 2