antd源码解读（二）Tooltip组件解析
引言
antd的Tooltip组件在react-componment/trigger的基础上进行封装，而组件Popover和Popconfirm是使用Tooltip组件的进行pop，在react-componment中，使用到组件tc-trigger的还有menu、select、dropdown、time-picker、calendar等，本文主要对tc-trigger源码进行解读。
结构
项目结构如下：
- index.js，负责外层封装，负责事件绑定与dom渲染控制。
- LazyRenderBox.js，pop内容懒加载warp。
- mock.js 未使用。
- Popup.js，pop的warp，负责控制pop的对齐、动画、宽高。
- PopupInner.js，pop内容warp。
index.js
从render方法入手，需要渲染控制pop显示的节点和pop内容节点两个节点，而pop内容节点一般渲染到body里面，不属于控制pop显示的节点内，render方法代码如下：
const trigger = React.cloneElement(child, newChildProps);
if (!IS_REACT_16) {
return (
<ContainerRender
parent={this}
visible={popupVisible}
autoMount={false}
forceRender={props.forceRender}
getComponent={this.getComponent}
getContainer={this.getContainer}
>
{({ renderComponent }) => {
this.renderComponent = renderComponent;
return trigger;
}}
</ContainerRender>
);
}
let portal;
// prevent unmounting after it's rendered
if (popupVisible || this._component || props.forceRender) {
portal = (
<Portal
key="portal"
getContainer={this.getContainer}
didUpdate={this.handlePortalUpdate}
>
{this.getComponent()}
</Portal>
);
}
return [
trigger,
portal,
];可以看到，index.js渲染了两个节点，trigger和portal，trigger即为通过事件控制portal显示状态的节点，如果react的版本不是16以上，返回ContainerRender组件，ContainerRender组件来自rc-util，该组件主要做的事情就是使用ReactDOM.unstable_renderSubtreeIntoContainer函数，将pop内容渲染到trigger节点之外，与react16提供的APIcreatePortal作用一致，如果是React16，返回了Portal组件，该组件正是利用了createPortal，将组件渲染到特定的dom节点内，但是不管是不是react16，都进行了pop渲染的判断，即popupVisible || this._component || props.forceRender，如果portal不显示且不强制第一次渲染forceRender，portal将不会被渲染到dom中，直到判断为真。
trigger节点通过props决定事件绑定情况，即通过props.trigger属性绑定事件情况，事件控制Popup组件的visible属性，这里就不详细说了。
Popup.js
该组件是pop的warp，渲染在trigger节点之外，通过ReactDOM.unstable_renderSubtreeIntoContainer或createPortal指定渲染的目标节点，也是render方法入手：
render() {
return (
<div>
{this.getMaskElement()}
{this.getPopupElement()}
</div>
);
}返回两个内容，getMaskElement获取遮罩，getPopupElement返回Pop节点，getMaskElement这里就不说了，渲染的视觉效果，绑定了控制pop节点的事件。
getPopupElement返回pop节点，render返回代码如下:
<Animate
component=""
exclusive
transitionAppear
transitionName={this.getTransitionName()}
showProp="xVisible"
>
<Align
target={this.getTarget}
key="popup"
ref={this.saveAlignRef}
monitorWindowResize
xVisible={visible}
childrenProps={{ visible: 'xVisible' }}
disabled={!visible}
align={align}
onAlign={this.onAlign}
>
<PopupInner
hiddenClassName={hiddenClassName}
{...popupInnerProps}
>
{children}
</PopupInner>
</Align>
</Animate>Animate来自组件rc-animate，主要负责显示状态切换时候的动态效果，其中原理是监听控制状态变化的prop属性，即代码中的showProp="xVisible"，当状态变化的时候，延时改变dom的class，一般会有三个状态，分别表示进入中enter-active，消失中leave-active，隐藏hidden三个状态，进入中状态会添加transitionName-enter transitionName-enter-active两个class，消失中会添加transitionName-leave transitionName-leave-active两个class，隐藏状态不添加class，transitionName通过外部传入。
Align来自组件rc-align，主要控制节点的相对于trigger的显示位置，根据传入的target与align决定最后PopupInner显示的位置，此处target是来自于index.js的trigger节点，align也是来自于index.js，主要由index.js的prop.popupPlacement、prop.popupAlign两个属性决定，即方向与偏移量。
最后是PopupInner组件，该组件是也就pop内容组件，内容通过LazyRenderBox包裹。。。
另外，Popup.js还有两个state，targetWidth与targetHeight，即pop的宽高，该属性如果设置有prop.stretch，则计算trigger真是dom节点的宽高，然后对齐。
PopupInner.js
为隐藏状态下的pop添加hidden的class，并包裹懒加载组件LazyRenderBox。
LazyRenderBox.js
只做一件事情，就是将popupInner的chidren进行包裹，当子节点数大于1时，包一层div以方便隐藏状态时候class控制，不用每个节点都添加hidden的class，关键如下：
render() {
const { hiddenClassName, visible, ...props } = this.props;
if (hiddenClassName || React.Children.count(props.children) > 1) {
if (!visible && hiddenClassName) {
props.className += ` ${hiddenClassName}`;
}
return <div {...props}/>;
}
return React.Children.only(props.children);
}最后
该组件主要的实现难点在于rc-animate与rc-align，其他的主要在做事件绑定与class处理。