UML

Notifier 的 UML 主要是根据 Ant Design 的设计画出来的，而在 Material 那边是只有 Snackbar（ = Message ）。

Notifier

Notifier 是实作出「通知」功能的 interface，就像 Portal 一样。

不过 Notifier 的实作比较复杂，是 Portal 的传送功能再进阶，在 React 这边是会用 ReactDOM.render 去建立一个新的实体，会独立於网页应用程序本身的 React DOM。

对 React 还不熟悉的话， React 作为 SPA (Single Page Application) 的运作方式是以 HTML 的一个 div 作为根节点，我们写的 React Code 来达到永远都是同一个 HTML 的单页式应用。

因此，下图中的 Children 与 Trigger Button 其实是处在不同的 DOM 结构中：

How to use

<Button
  variant="contained"
  onClick={() => {
	  Notifier.add({
	    children: 'Children',
	  });
  }}
  >
  Trigger Notifier
</Button>

onClick 时会再创建一个新的 div 节点来把想要呈现的元素 Render 出来，这时候在网页上呈现的 HTML 大概会像下面这样：
（原本的网页应用都是在 root div ，而 notifier 的则会是额外的 notifierRoot。）

<div id="root">
	<button>
	</button>
</div>

<div id="notifierRoot">
	Children
</div>

之後的实战篇会再详细解释 Notifier 的实作，这边先大概对整个运作有点概念就好！

Notification

全域的通知讯息，可以出现在网页中的任何地方，基本上就是在 Notifier 的基础上定义好样式，跟 Portal 和 Popover 的概念一样。

使用情境就是在推送通知给使用者，像是背景下载的东西载好了，网页即时更新了什麽东西要通知给使用者但又不想干扰画面的这些情境会用 Notification。

How to use

import { Button, notification } from 'antd';

const openNotification = () => {
  const args = {
    message: 'Notification Title',
    description:
      'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
    duration: 0,
  };
  notification.open(args);
};

ReactDOM.render(
  <Button type="primary" onClick={openNotification}>
    Open the notification box
  </Button>,
  mountNode,
);

Message

Message 因应使用者操作後显示的讯息元件，通常会固定某个位置，像图中网页的中上方。

它的使用情境会是更即时的互动，像是基本的成功、失败和警告，或是刚进入网页时的欢迎讯息、载入状态等等。

而与 Notification 的差别在於 Message 主要应用在通知使用者互动事件的结果、状态更新或是资讯量不多的通知，通常就一行而已，而 Notification 会涵盖更完整的资讯，长相会像个 Modal，也不一定都跟使用者的互动绑定，主要处理推播这种的使用情境。

How to use

import { message, Button, Space } from 'antd';

const success = () => {
  message.success('This is a success message');
};

const error = () => {
  message.error('This is an error message');
};

const warning = () => {
  message.warning('This is a warning message');
};

ReactDOM.render(
  <Space>
    <Button onClick={success}>Success</Button>
    <Button onClick={error}>Error</Button>
    <Button onClick={warning}>Warning</Button>
  </Space>,
  mountNode,
);

Snackbar

那 Snackbar 就是 Material 版的 Message 而已，就不再多做介绍哩！

小结

Notifier 真的是个水偏深的介面，但今天就先提一些概念并带过大家看看它衍伸的相关元件就好，等到後续实战演练的环节再详细介绍背後的实作逻辑！

明天要介绍的是 TextField ，而它也是我认为初学者很容易搞不清楚的一个介面。

那就明天见啦！