精通React/Vue系列之手把手带你实现一个功能强大的通知提醒框(Notification)

前言

本文是笔者写组件设计的第十篇文章, 今天带大家实现一个比较特殊的组件——通知提醒框(Notification)。 该组件在诸如Antd或者elementUI等第三方组件库中也都会出现,主要用来为用户提供系统通知信息的.我们在调用它时并不像其他组件一样，通过引入组件标签来调用。比如Modal组件，我们一般这样来调用：

<Modal title="xui基础弹窗" centered mask={false} visible={false}>    <p>我是弹窗内容</p>    <p>我是弹窗内容</p>    <p>我是弹窗内容</p>    <p>我是弹窗内容</p></Modal>

但是通知提醒框(Notification)，大多数场景下是使用js API的方式调用：

notification.open({  message: '趣谈前端React',  description: '学前端，学React/vue/Node，快快加入我们吧'});

我们看到的组件效果可能是这样的：

那么我们如何实现这样的调用方式呢？不用急，接下来笔者会一步步教你实现。

先来巩固以下组件的分类法：

• 通用型组件: 比如Button, Icon等.

• 布局型组件: 比如Grid, Layout布局等.

• 导航型组件: 比如面包屑Breadcrumb, 下拉菜单Dropdown, 菜单Menu等.

• 数据录入型组件: 比如form表单, Switch开关, Upload文件上传等.

• 数据展示型组件: 比如Avator头像, Table表格, List列表等.

• 反馈型组件: 比如Progress进度条, Drawer抽屉, Modal对话框等.

• 其他业务类型

熟悉以上分类法是设计任何组件系统的前提，不管你是从零到一开发前端团队的UI库，还是基于已有组件库二次开发业务组件，以上分类法则同样适用。

本文将会使用React来开发该组件，也会使用到Javascript中常用的一些设计模式，比如单例模式，但是不管你使用什么框架来实现，原理都是通用的，如果感兴趣的朋友可以用vue也实现以一下。如果对设计模式不是很了解，可以移步:

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码).

正文

在开始组件设计之前希望大家对css3和js有一定的基础,并了解基本的react/vue语法.我们先来解构一下Notification组件, 一个Notification分为以下几个部分:

每一个区块都可以自定义配置, 也可以组合其他组件.并且我们可以配置提醒框出现的位置，就像antd的组件一样，我们有左上，左下，右上，右下这几个位置可以配置，也可以配置基于这几个位置的偏移量。并且我们都知道，antd或者element这种组件库，会自带一些主题状态，来提高用户的使用效率，比如会有success(成功状态)，warning(警告状态)，error(错误状态)，info(通知状态)等，那么我们自己实现的组件也因该具备这些功能。

以下是笔者使用React实现后的Notification组件效果:

接下来我们来看看通知提醒框(Notification)的具体设计思路。

1. Notification组件设计思路

按照之前笔者总结的组件设计原则,我们第一步是要确认需求. 通知提醒框(Notification)组件一般会有如下需求点:

• 能控制Notification自动关闭的时间

• 能配置Notification渲染节点的输出位置

• 能控制Notification的弹出位置

• 能自