antd 源码解读 notification

正文

请到「今天看啥」查看全文

: true , onClose : args.onClose, key : args.key, style : args.style || {}, className : args.className, })

在这个文件中比较重要的一条代码线就是上面展示的这一条，剩下的代码可以一眼带过，比较特殊的就是他将生成的 notification 实例都存在一个全局常量中，方便第二次使用只要这个实例没有被 destroy。

4. rc-notification/src/index.js

找到入口文件 import Notification from './Notification'; 。

5. rc-notification/src/Notification.jsx

在上面第 3 条我们看到有的一个方法 newInstance 是用来创建新实例，所以我们在这个文件中也可以看到相应的代码 Notification.newInstance = function newNotificationInstance ，在这个函数中我们继续略览代码，看到 ReactDOM.render(<Notification {...props} ref={ref} />, div); 我们知道这是将一个组件渲染在一个 dom 节点，所以下一个查看点就应该是 Notification 这个组件类。

6. rc-notification/src/Notification.jsx

看到文件上面 class Notification extends Component ，可以看到整个组件的实现，我们可以在 render 函数中看到一个循环输出，那就是在循环输出 state 中存的 notice ， state 中的 notice 是通过上面第 3 点展示的代码，获取实例之后使用 notice 函数调用的实例的 add 函数进行添加的。

  const onClose = createChainedFunction(this.remove.bind(this, notice.key), notice.onClose);
  return (<Notice
    prefixCls={props.prefixCls}
    {...notice}
    onClose={onClose}
  >
    {notice.content}
  </Notice>);

7. rc-notification/src/Notice.jsx

  componentDidMount() {
    if (this.props.duration) {
      this.closeTimer = setTimeout(() => {
        this.close();
      }, this.props.duration * 1000);
    }
  }

  componentWillUnmount() {
    this.clearCloseTimer();
  }

  clearCloseTimer = () => {
    if (this.closeTimer) {
      clearTimeout(this.closeTimer);
      this.closeTimer = null

请到「今天看啥」查看全文