共计 2410 个字符，预计需要花费 7 分钟才能阅读完成。
本文完整版：《5 款 React 实时音讯提醒告诉 (Message/Notification) 组件举荐与测评》
React 音讯提醒告诉组件（Message / Notification）是咱们日常开发中常常应用的组件，它可用作与用户交互的反馈提醒，信息提交胜利、谬误、操作正告等场景应用。原生JavaScript 提供了alert、prompt、confirm 等办法，这三个办法的不反对定制化，应用场景重大受限，特地是 alert 在浏览器外弹窗，体验十分蹩脚。因而要想给用户提供良好的应用体验，咱们须要封装一个定制化较好的 React 音讯提醒组件，这种组件看似简略，但也存在十分多深坑要小心，例如遮罩层、隐没工夫、点击事件的冒泡解决等。
我本人在开发和钻研 Message / Notification 性能组件时，发现其实 Github 上有十分多制作精良，应用场景定位清晰的第三方音讯提醒组件库可用，社区成熟，代码简洁，间接援用即可，齐全没必要本人写，本文给大家举荐 5 款我用过的开源音讯提醒库，各有劣势，可按需自取。
如果你正在搭建后盾管理工具，又不想解决前端问题，举荐应用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API，无需懂前端，仅需拖拽即可疾速搭建属于你本人的后盾管理工具，一周工作量缩减至一天，详见本文文末。
接下来我来介绍一下我用过且感觉不错的 5 款常见的 React Message / Notification 组件，大家可依据本人实现需求自取。
- React Toastify – 专一实时音讯提醒 各类款式随便批改 你想要的它都有
- React Hot Toast – 动效丰盛、代码简洁、款式自定义、轻量级音讯提醒组件
- Notistack – 轻量级，适宜根底提醒的利用场景
- React Notification System – 带有按钮的音讯弹窗组件，给用户更多交互
- Reapop – UI 丑陋、多种可定义款式、动效丰盛、轻量级
React Toastify – 专一实时音讯提醒 各类款式随便批改 你想要的它都有
react-toastify 是简洁高效的音讯提醒组件库，惯例的胜利、谬误、正告款式随便筛选。配置简略，几秒钟就能实现你须要的提醒音讯款式，更不用说惯例的色彩、字体、字号、弹出地位等细节，更是随便批改。
- 傻瓜式配置，10 秒钟实现所有设置工作
- 可定制开发，简略便捷
- 可敞开滑动动画成果
- 可在提示框中嵌入 React 组件
- 可定义每个 toast 行为
- 有进度条显示
- 白天夜间模式主动切换
扩大浏览：《7 款顶级好用的 React 挪动端 ui 组件库测评举荐》
React Hot Toast – 动效丰盛、代码简洁、款式自定义、轻量级音讯提醒组件
react-hot-toast 音讯提醒组件库，可配置自定义操作，提示框持续时间，文本款式，图表款式等，提示框可带按键，与用户有更多的交互。react-hot-toast 的动画成果十分细腻，不仅有提示框自身的弹出成果，提示框左侧的 icon 也蕴含丰盛的动画成果，让引入 react-hot-toast 的我的项目看起来十分高级。
- CSS 成果易于自定义
- 轻量级 – 小于 5KB
- Promise API
- 反对 Emoji 表情
- 丰盛的动画成果
扩大浏览：《6 款好用的 React table 表格组件测评举荐》
Notistack – 轻量级，适宜根底提醒的利用场景
notistack 提醒音讯组件库性能十分简洁，胜利、谬误、正告、信息这些基本功能外，还有个可与用户交互的提示框，内嵌了一个点击事件的按钮，可让用户在看到提醒后，执行一个事件。notistack 款式高度可定制，改几个参数，让提示框合乎你的网站格调，一个组件解决所有提醒问题。
扩大浏览：《6 款最棒的开源 React admin 后盾治理框架测评》
React Notification System – 带有按钮的音讯弹窗组件，给用户更多交互
react-notification-system 并不是一个简单的音讯提醒组件，但它的款式非常丰盛，惯例的胜利、谬误、正告之外，还有带款式的按钮可与用户进行交互，也有强正告框，弹出后始终悬停在屏幕上，直至用户点击敞开才会小时。
扩大浏览：《7 款开源顶级 React ui 组件库举荐测评》
Reapop – UI 丑陋、多种可定义款式、动效丰盛、轻量级
reapop UI 十分丑陋，内置三种可选款式，微软风、Linux 风和 Bootstrap 风，配置非常简单，简略改个布尔值就能够了。Reapop 提示框的动效很细腻，不仅有惯例的滑动弹出，还有闪现和突变弹出等成果。当然，Reapop 也能够在提示框上加上两组按钮，不便咱们在提醒用户的同时，让用户执行触发绝对应的事件。
扩大浏览：《React Echarts 应用教程 – 如何在 React 中退出图表》
音讯提醒组件及卡拉云
本文介绍了 5 款 React 实时音讯提醒告诉 (Message/Notification) 组件，尽管这些组件库能够防止咱们反复造轮子，但即便如此，前端调试有时也十分令人抓狂。如果不想解决前端问题，举荐应用卡拉云，卡拉云内置各类组件，无需懂任何前端，仅需拖拽即可疾速生成。
卡拉云可帮你疾速搭建企业外部工具，下图为应用卡拉云搭建的外部广告投放监测零碎，无需懂前端，仅需拖拽组件，10 分钟搞定。你也能够疾速搭建一套属于你的后盾管理工具。
卡拉云是新一代低代码开发平台，与前端框架 Vue、React 等相比，卡拉云的劣势在于不必首先搭建开发环境，间接注册即可开始应用。开发者齐全不必解决任何前端问题，只需简略拖拽，即可疾速生成所需组件，可一键接入常见数据库及 API，依据疏导简略几步买通前后端，数周的开发工夫，缩短至 1 小时。立刻收费试用卡拉云。
扩大浏览：
- 7 款顶级好用的 laravel admin 后盾框架举荐测评
- 横测最棒的 6 款 Mongodb gui 管理工具
- React 实现 PDF 文件在线预览 – 手把手教你写 React PDF 预览性能
- 顶级好用的 React 表单设计生成器，可拖拽生成表单
- React form 表单验证终极教程