Antd Trigger 类组件结构简析

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