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 小时。立即免费试用卡拉云。

扩展阅读：

• 7 款顶级好用的 laravel admin 后台框架推荐测评
• 横测最棒的 6 款 Mongodb gui 管理工具
• React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能
• 顶级好用的 React 表单设计生成器，可拖拽生成表单
• React form 表单验证终极教程