Notification消息提示组件的实现 竟然有这么多东西
想必大家都用过Notification通知提醒、Message全局提示等全局类的反馈组件。Antd的效果如下：
这种反馈类的组件大致有这些：Toast提示框、Loading加载框、Skeleton骨架屏组件、Notification通知提示框、Message全局提示。最近我从写法和使用上对它们做了一些分类：
如果是对用户的话，可以分为2类：效果可叠加（Notification、Message），效果不可叠加（Loading加载框、Skeleton骨架屏）。
如果是对开发的话，一类写法是<xxx />，一类写法是xx.yy({...})。<xxx />这种写法的组件是跟页面绑定的（意味着如果页面存在了，那么组件的壳子基本上就存在了，当然了，这种写法{false && <xxx />} 的排除在外），而这种写法 xx.yy({...}) 的组件是跟动作绑定的（只有相应动作触发了，组件才会显示）。
那么接下来，我们就要进入正题了，看看如何用 react 来实现Notification这类组件。
一、实现效果与功能
1.1、效果展示
1.2、实现的功能
- 创建可累加提示框效果
- 手动关闭特定的提示框
- 依次自动关闭提示框
二、设计理念
就像上面说的，它是跟着动作绑定的，实现效果要累加，触发动作也要累加。所以想要实现这种效果，首先 组件的写法 的写法就要改变。通用的写法应该是这样：
import { Notification } from 'megatronui';
click = () => {
// 调用下面的方法，页面上出现消息提示
Notification.success({
content: '这是一个成功的通知'
});
}
<button onClick={this.click}>点击出现通知</button>
只有这么写才能保证“组件出现”的时机与点击事件是绑定的。
说完了写法，我们要来看看这个组件都有哪些基础功能。从实现效果来看，本次我们实现的基础功能如下：
- 调用不同的方法，出现不同的消息提示
- 消息提示可以手动关闭，也可以自动关闭
说完了功能，其实接下来应该是如何设计最小单元。但是我觉着 最小单元 的这个东西，应该是在实践中出真知。过早的设计它容易给自己挖坑。
三、组件写法 -- 拿到组件内部方法
上面我们说过，这类组件的写法应该是函数式的，也就是下面这样：
import { Notification } from 'megatronui';
Notification.success({...}); // 成功时的提示
Notification.warning({...}); // 警告时的提示
Notification.error({...}); // 错误时的提示
其实一看到这样的写法，我的脑子里第一个想到的就是 调用子组件的方法。也确实是这样，父组件可以拿到子组件的组件实例，从而调用子组件的任意方法。
拿到子组件实例，对于class组件来说，有2种写法：
第一种写法如下：
import React from 'react';
import { Notification } from './Notification.js';
let ref = React.createRef();
<Notification ref={ref} />
this.ref.current.success();
第二种写法如下：
import React from 'react';
import { Notification } from './Notification.js';
let notificationInstance = null;
new Notification().getInstance(function(obj){
notificationInstance = obj;
});
notification.success();
从写法上，似乎第二种更文雅。毕竟一个公共级组件如果是以第一种方式去给开发用的话，估计是会被喷的。
从可靠性上，似乎也是第二种更可靠。组件维护者可以暴露一些他想暴露的，而对于开发者来说，他能很清晰的看到有哪些方法是可以被使用的。
接下来，我们就把每种写法都具体写一下。
第一种写法
通过ref转发（React.createRef），我们可以拿到子组件实例：
import React from 'react';
// 子组件 Notification组件
class Notification extends React.Component {
constructor(props){
super(props);
}
success = () => {
console.log('点击了成功通知');
}
render(){
return <div className = 'notification-box'></div>
}
}
// 父组件
class App extends React.Component {
constructor(props){
super(props);
this.ref = React.createRef();
}
click = () => {
this.ref.current.success(); // 触发子组件的方法
}
render(){
return <div>
<Notification ref = { this.ref } />
<button onClick={ this.click }> success </button>
</div>
}
}
虽然这种写法可以拿到子组件的方法，但是并不推荐这种写法，原因如下：
- 对于开发来说，使用成本较高。对于组件维护者，编写文档成本较高。
- 这种写法可以称得上是 “第一个吃螃蟹的人”，估计会被使用者喷。
其实也就是写法问题和接受能力问题，真要从技术角度来看的话，这种写法也没啥毛病（哈哈哈）。当然就这个问题，各位大佬们如果有什么见解，也可以在评论区里告知一下小弟。
第二种写法
这种写法其实就是 暴露一个组件的外部方法C，在这个方法里render 组件元素，并声明ref来拿到组件实例，最后，我们还需要callback作为函数C的一个传参，在这个callback里，我们把组件实例相关的东西全部返给用户。
import React from 'react';
// Notification.js文件内容 ===================================================================
class Notification extends React.Component {
success = () =>{
console.log('notification-success');
}
}
Notification.getInstance = function(callback){
let NotificationBox = document.createElement('div');
NotificationBox.classList.add('notification-box');
if (document.body){
document.body.appendChild(NotificationBox); // 插入Notification节点壳子
}
function ref(notificationInstance){ // 回调形式的ref，不知道的赶紧去官网恶补一下
// 因为是回调形式的ref，所以只要组件一挂载，那么ref函数的第一个参数默认就是组件实例
callback({
success: (obj) => notificationInstance.success(obj),
component: notificationInstance
});
}
ReactDOM.createRoot(NotificationBox).render(<Notification ref={ref}></Notification>);
}
export default Notification;
// App.js文件内容如下：========================================================================
import React from 'react';
import Notification from './Notification.js';
let notificationInstance = null;
new Notification.getInstance({}, function (obj){
notificationInstance = obj;
});
class App extends React.Component {
click = () => {
notificationInstance.success();
}
render(){
return <button onClick={this.click}> success </button>
}
}
此时我们再点击一下按钮，就会发现我们已经成功的拿到了子组件的方法。
在接下来的文章里，我们会采用 这种组件写法 来实现Notification组件。
四、如何实现效果累加
这个累加效果就相当于“计数器”。维护一个notices数组，每次 success（）的时候，notices数组 push 相应的对象。最后循环展示notices数组里的内容即可。
// Notification.js文件
class Notification extends React.Component {
constructor(props){
super(props);
this.state = {
notices: []
}
}
// push notices
add = (obj) => {
this.state.notices.push(obj);
this.setState(state => {
return {
...state,
notices: Array.from(state.notices)
}
});
}
// success - action
success = (obj) => {
this.add(obj);
}
render(){
let { notices } = this.props;
return <div className='notification-two-box'>
{
notices.map(item => {
return <div className='notice-box'>
{ item.content }
</div>
})
}
</div>
}
}
// 获取Notification组件实例的方法
Notification.getInstance = function(callback){
if (typeof callback !== 'function'){
console.error('getInstance方法的第一个参数必须是函数');
return
}
let NotificationBox = document.createElement('div');
NotificationBox.classList.add('notification-box');
if (document.body){
document.body.appendChild(NotificationBox);
}
function ref(notificationInstance){
callback({
success: (obj) => notificationInstance.success(obj),
component: notificationInstance
});
}
ReactDOM.createRoot(NotificationBox).render(<Notification ref={ref}></Notification>);
}
export default Notification;
App.js文件内容如下：
import React from 'react';
import Notification from './Notification.js';
let notificationInstance = null;
new Notification.getInstance({}, function (obj){
// 拿到组件实例
notificationInstance = obj;
});
class App extends React.Component {
const clickButton = function (){
// 发送通知
notificationInstance.success({
content: '这是一个成功的通知',
});
}
render(){
return <button> success </button>
}
}
相应的样式如下：
.notification-two-box {
position: fixed;
right: 0px;
width: 300px;
z-index: 100;
}
.notice-box {
width: 100%;
height: 60px;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
position: relative;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
background-color: #fff;
color: #424242;
border-radius: 4px;
box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
}
此时你再点击一下success按钮，我猜，此时的效果一定是出来了，在你的屏幕右侧会出现相应的提示框，而且随着你点击次数的增加，实现的效果也在累加。
五、实现手动关闭
从上一节我们知道，当开发手动去调 notificationInstance.success(obj) 的时候，实际上就是 notices.push 的操作，为了去实现手动关闭通知框，我们需要去给obj加一个独一无二的uuid。然后删除notices数组里指定的uuid的obj即可，代码如下：
Notification.js文件修改如下：
// 省略上一节的代码 ================
let seed = 0;
let now = Date.now();
function getUuid() {
return `uNotification_${now}_${seed++}`;
}
class Notification extends React.Component {
// 省略其他代码 ===========
// push notices
add = (obj) => {
this.state.notices.push(obj);
this.state.notices.forEach(item => {
item.uuid = item.uuid ? item.uuid : getUuid();
});
this.setState(state => {
return {
...state,
notices: Array.from(state.notices)
}
});
}
// remove one notice
remove = (obj) => {
let result = [];
let { notices } = this.state;
for (let index = 0; index < notices.length; index++){
let currentNotice = notices[index];
if (currentNotice.uuid !== obj.uuid){
result.push(currentNotice);
}
}
this.setState(state => {
return {
...state,
notices: Array.from(result)
}
});
}
// close - action
closeNotification = (obj) => {
this.remove(obj);
}
// 省略其他代码 ==================
render(){
let { notices } = this.props;
return <div className='notification-two-box'>
{
notices.map(item => {
return <div className='notice-box'>
{ item.content }
{ item.uuid }
<CloseOutlined onClick={() => this.closeNotification(item)}></CloseOutlined>
<!--
CloseOutlined组件是 阿里antd组件库里的icon图标，
大家可以换成任意组件
-->
</div>
})
}
</div>
}
}
如果你是跟着我的思路走到现在的，那么此时我们应该就可以实现手动关闭提示框啦。
六、实现自动关闭
我们先来看看阿里antd里的Notification组件自动关闭效果：
从阿里的效果来看，这个自动关闭是每个提示框独有的，因为他们关闭的时候是有先后顺序的，并没有一块都消失掉。
所以，此时我们应该做2件事，一个是把notices数组里面的内容独立出来（也就是把提示内容单抽成一个组件Notice），第二个就是在Notice组件里维护定时器的创建于销毁。
6.1、抽取内容组件
Notice.js文件内容新增如下（主要是抽取content、uuid、给Notice组件传递关闭提示框的方法，直接看代码即可）：
import React from 'react';
export default class Notice extends React.Component {
close = () => {
this.clearNoticeTime();
this.props.closeNotification();
}
render(){
let { content, uuid } = this.props;
return <div className = 'notice-box'>
{content}
{uuid}
<CloseOutlined onClick={this.close}></CloseOutlined>
</div>
}
}
Notification.js文件修改如下：
import Notice from './Notice.js';
// 其它代码都不变 ==========================================
class Notification extends React.Component {
// 其它代码都不变 ===================================
// close - action （新增代码）++++++++++++++++++++++++++++++++++
closeNotification = (obj) => {
this.remove(obj);
}
render(){
let { notices } = this.state;
return <div className = 'notification-two-box'>
{
// 新增代码 +++++++++++++++++++++++++++++++++++++++++
notices.map(item => {
return <Notice
content={item.content}
uuid={item.uuid}
closeNotification={() => this.closeNotification(item)}
key={item.uuid}
>
</Notice>
})
}
</div>
}
}
6.2、添加定时关闭功能
这个就是一个普通组件添加定时器的功能，我们需要做的事情如下：
- 在组件创建时，创建定时器。
- 在组件关闭时、销毁时，删除定时器。
Notice.js文件修改如下：
import React from 'react';
import { CloseOutlined, CheckCircleTwoTone } from '@ant-design/icons';
import './notice.css';
export default class Notice extends React.Component {
componentDidMount(){
let { duration = 3 } = this.props;
this.timer = setTimeout(() => {
this.close();
}, duration * 1000);
}
componentWillUnmount(){
// 组件卸载，清除定时器
this.clearNoticeTime();
}
clearNoticeTime = () => {
let self = this;
if (this.timer){
clearTimeout(self.timer);
self.timer = null;
}
}
close = () => {
this.clearNoticeTime();
this.props.closeNotification();
}
render(){
let { content, uuid } = this.props;
return <div className = 'notice-box'>
{/* <CheckCircleTwoTone twoToneColor="#52c41a" /> */}
{content}
{uuid}
<CloseOutlined onClick={this.close}></CloseOutlined>
</div>
}
}
到这里，我们就基本上实现了提示框的自动关闭功能。
最后
以上就是小编带着大家实现了一个最基础的Notification消息提示组件。在上述过程中，如果有哪里讲错了或者没讲明白，欢迎大家在评论区里指正，如果本篇文章对你有用，还请客官不要吝啬手里免费的小赞赞~~
转载自:https://juejin.cn/post/7234816186101301285