5 款 React 实时消息提示通知 (Message/Notification) 组件推荐与测评
本文完整版：《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 小时。立即免费试用卡拉云。
扩展阅读：
版权声明: 本文为 InfoQ 作者【蒋川】的原创文章。
原文链接:【http://xie.infoq.cn/article/627cfe78d06b559a1d84c5692】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
我的微信：HiJiangChuan 2020.09.08 加入
卡拉云 CMO 卡拉云是一套帮助后端程序员搭建企业内部工具的系统，欢迎试用 www.kalacloud.com
评论