10

Antd 组件库中,包含有 Trigger 的组件,它们都有类似的组件结构。以下组件都可以归为这一类:

  • ToolTip

  • Popover

  • PopConfrim

  • Cascader

  • DataPicker

  • TimePicker

  • Select

  • TreeSelect

  • Dropdown

这些组件的特点,就是都有弹框。通过点击, hover, 或是改变焦点的方式,打开或关闭弹框。而这个特点,就是 Trigger 组件所要实现的功能:弹框可见性的控制。

看图

图片描述

图片描述

先看很黄的这一组,Popover/PopConfirm -> Tooltip -> rcTooltip -> rcTrigger -> child

这类组件,可以为弹框传入自定义的内容或组件。Popover 和 PopConfirm 都是从 Tooltip 整容来的,为弹窗添加了常用的功能。

其中,内部组件 Trigger,负责为组件添加监听事件,来控制弹框的可见性。

// rc-trigger\lib\Trigger.js
var ALL_HANDLERS = ['onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur'];

可以看出,Trigger 支持 onClick, onMouseDown, onTouchStart, onMouseEnter, onFocus 来触发弹窗,通过 onClick, onMouseLeave, onBlur 来取消弹窗。弹窗的打开与关闭方式可以不是对应的,例如可以 mouseEnter 打开,click 关闭。我们写弹窗组件的时候,也能把这一部分逻辑抽象出来,感觉应该很棒。

当我们用 React 写弹窗组件的时候,肯定想过要如何添加点击取消功能。使用遮罩,会有一次无效操作,对选框类弹框就不太好了。Antd 的做法是添加全局监听事件,通过判断点击的元素,是否包含在组件或弹框中,即可判断是否为取消弹框的点击。下面是 Antd 中判断组件包含性的方法

function contains(root, n) {
    var node = n;
    while (node) {
        if (node === root) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}

除了添加监听事件,Trigger 还有一个很重要的功能,就是弹框的渲染。Trigger 中的弹框并没有渲染进正常的文档流中,它 mixin 了一个 getContainerRenderMixin 内部组件,该组件通过 React 的非稳定方法 unstable_renderSubtreeIntoContainer(),将组件挂载到 document.body 下。因为如果把弹窗渲染在正常文档流中,组件的定位会受到父元素定位的影响,我们知道,如果父元素为静态定位,定位标的就会变成再父一级元素。将弹窗挂载在 body 下,就能解决这个问题。

虽然弹框脱离了正常文档流,但其仍受父组件控制。而组件包裹的子组件仍然渲染在正常文档流。

// rc-util\lib\getContainerRenderMixin2
_reactDom2["default"].unstable_renderSubtreeIntoContainer(instance, component, instance._container, function callback() {
   instance._component = this;
   if (ready) {
       ready.call(this);
   }
});

绿

图片描述

很绿的一组,也是寄生于 Trigger,但不属于 Tooltip 一族,它们的弹窗内容被传入了定义好的组件,定制性更强。从 Trigger 这一层开始,结构都差不多。

蓝色代表忧伤,看到这么多层嵌套,看着是挺忧伤的。Popup -> Animate -> AnimateChild -> rcAlign -> PopupInner -> LazyRenderBox -> content

图片描述

Popup

Popup 组件负责按参数,配置弹框的各种特性,像要不要遮罩、zIndex设多少、隐藏要不要卸载掉弹框等,把这些属性渲染到功能组件中

Animate

Animate 和 AnimateChild,顾名思义,就是搞动画的。Animate 组件类似于 React 的 ReactTransitionGroup 组件,它会调用子组件中的钩子函数,来控制动画效果。

// rc-animate\lib\AnimateChild.js
componentWillUnmount: function componentWillUnmount() {
    this.stop();
},
componentWillEnter: function componentWillEnter(done) {
    if (_util2["default"].isEnterSupported(this.props)) {
        this.transition('enter', done);
    } else {
        done();
    }
},
componentWillAppear: function componentWillAppear(done) {
    if (_util2["default"].isAppearSupported(this.props)) {
        this.transition('appear', done);
    } else {
        done();
    }
},
componentWillLeave: function componentWillLeave(done) {
    if (_util2["default"].isLeaveSupported(this.props)) {
      this.transition('leave', done);
    } else {
      done();
    }
},

AnimateChild

AnimateChild 在生命周期的钩子函数中,通过改变类名,如改变后缀 -appear, -enter, -leave,来执行动画效果。Antd 动画主要是 CSS3 动画。

.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .make-motion(@className, @keyframeName, @duration);
  .@{className}-enter,
  .@{className}-appear {
    transform: scale(0); // need this by yiminghe
    animation-timing-function: @ease-out-circ;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-out-circ;
  }
}

Align

Align 组件负责对齐元素。前面说了,Popup 脱离了正常文档流,挂在了 document.body 上。那如何把两个风马牛不相及的元素对齐呢?还要考虑到窗口改变时也能对得上。靠的是元素的可视矩阵(区域)计算,说的挺轻巧,反正代码我还没看懂。

// rc-align\node_modules\dom-align\lib\index.js
function domAlign(el, refNode, align) {
    // masive code
}

PopupInner

渲染了个div,添了个 LazyRenderBox 功能组件

LazyRenderBox

这个组件很懒,因为你看不见它的时候,它就不干活了。

shouldComponentUpdate: function shouldComponentUpdate(nextProps) {
    return nextProps.hiddenClassName || nextProps.visible;
},

content

之前的一沓都是套在外面的衣服,你的 content 才是用户想看的。

图片描述

尽管 React 组件树很复杂,但是最终渲染出来的 Dom 树却是格外的清爽。

最后

Antd 不简单,看来写一套靠谱的组件可不是闹着玩的,一些看似简单的功能,实现起来却是十分的复杂。一沓代码看下来,可能就领悟了皮毛,却感觉已经受益匪浅了。


notebin
3k 声望48 粉丝

想写些不一样的东西