refactor: createrefHooks to ref

antdv-demo

@@ -1 +1 @@
-Subproject commit 19713260a1fcd951d75129e542f40c8e7c1bac35
+Subproject commit 68d4ed26e381b03b4d90701184a724b892f213e2

components/_util/PortalWrapper.js

@@ -2,7 +2,6 @@ import PropTypes from './vue-types';
 import switchScrollingEffect from './switchScrollingEffect';
 import setStyle from './setStyle';
 import Portal from './Portal';
-import createRefHooks from './createRefHooks';
 
 let openCount = 0;
 const windowIsUndefined = !(
@@ -142,7 +141,7 @@ export default {
         <Portal
           getContainer={this.getDomContainer}
           children={children(childProps)}
-          {...createRefHooks(this.savePortal)}
+          ref={this.savePortal}
         ></Portal>
       );
     }

components/_util/createRefHooks.js

@@ -1,14 +0,0 @@
-const createRefHooks = fn => {
-  return {
-    onVnodeBeforeMount: vnode => {
-      fn((vnode.component && vnode.component.ctx) || vnode.el, vnode.key);
-    },
-    onVnodeUpdated: vnode => {
-      fn((vnode.component && vnode.component.ctx) || vnode.el, vnode.key);
-    },
-    onVnodeUnmounted: vnode => {
-      fn(null, vnode.key);
-    },
-  };
-};
-export default createRefHooks;

components/switch/index.jsx

@@ -6,7 +6,6 @@ import VcSwitch from '../vc-switch';
 import Wave from '../_util/wave';
 import { ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
-import createRefHooks from '../_util/createRefHooks';
 
 const Switch = {
   name: 'ASwitch',
@@ -72,7 +71,7 @@ const Switch = {
       disabled: disabled || loading,
       ...$attrs,
       class: classes,
-      ...createRefHooks(this.saveRef),
+      ref: this.saveRef,
     };
 
     return (

components/tabs/TabBar.jsx

@@ -65,6 +65,7 @@ const TabBar = {
     const renderProps = {
       ...this.$props,
       ...this.$attrs,
+      children: null,
       inkBarAnimated,
       extraContent: tabBarExtraContent,
       prevIcon,

components/tabs/tabs.jsx

@@ -153,6 +153,7 @@ export default {
       tabBarExtraContent,
       renderTabBar: renderTabBarSlot,
       ...restProps,
+      children,
     };
     const contentCls = {
       [`${prefixCls}-${tabPosition}-content`]: true,

components/vc-menu/SubMenu.jsx

@@ -11,7 +11,6 @@ import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
 import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
 import getTransitionProps from '../_util/getTransitionProps';
-import createRefHooks from '../_util/createRefHooks';
 
 let guid = 0;
 
@@ -483,7 +482,7 @@ const SubMenu = {
       ...titleClickEvents,
       style,
       class: `${prefixCls}-title`,
-      ...createRefHooks(this.saveSubMenuTitle),
+      ref: this.saveSubMenuTitle,
     };
 
     // expand custom icon should NOT be displayed in menu with horizontal mode.

components/vc-switch/Switch.jsx

@@ -1,7 +1,6 @@
 import { switchPropTypes } from './PropTypes';
 import BaseMixin from '../_util/BaseMixin';
 import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
-import createRefHooks from '../_util/createRefHooks';
 
 // function noop () {
 // }
@@ -107,7 +106,7 @@ export default {
       'aria-checked': checked,
       disabled,
       class: switchClassName,
-      ...createRefHooks(this.saveRef),
+      ref: this.saveRef,
     };
 
     return (

components/vc-tabs/src/InkTabBarNode.jsx

@@ -8,7 +8,6 @@ import {
   getActiveIndex,
 } from './utils';
 import BaseMixin from '../../_util/BaseMixin';
-import createRefHooks from '../../_util/createRefHooks';
 
 function componentDidUpdate(component, init) {
   const { styles = {}, panels, activeKey, direction } = component.$props;
@@ -117,13 +116,6 @@ export default {
       [className]: true,
       [inkBarAnimated ? `${className}-animated` : `${className}-no-animated`]: true,
     };
-    return (
-      <div
-        style={styles.inkBar}
-        class={classes}
-        key="inkBar"
-        {...createRefHooks(this.saveRef('inkBar'))}
-      />
-    );
+    return <div style={styles.inkBar} class={classes} key="inkBar" ref={this.saveRef('inkBar')} />;
   },
 };

components/vc-tabs/src/ScrollableInkTabBar.jsx

@@ -8,7 +8,7 @@ export default {
   name: 'ScrollableInkTabBar',
   inheritAttrs: false,
   render() {
-    const { default: renderTabBarNode } = this.$slots;
+    const { children: renderTabBarNode } = this.$attrs;
     return (
       <SaveRef
         children={(saveRef, getRef) => (

components/vc-tabs/src/ScrollableTabBarNode.jsx

@@ -4,7 +4,6 @@ import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
 import { getComponent, getSlot } from '../../_util/props-util';
 import { setTransform, isTransform3dSupported } from './utils';
-import createRefHooks from '../../_util/createRefHooks';
 
 function noop() {}
 export default {
@@ -320,13 +319,13 @@ export default {
           [`${prefixCls}-nav-container-scrolling`]: showNextPrev,
         }}
         key="container"
-        {...createRefHooks(this.saveRef('container'))}
+        ref={this.saveRef('container')}
       >
         {prevButton}
         {nextButton}
-        <div class={`${prefixCls}-nav-wrap`} {...createRefHooks(this.saveRef('navWrap'))}>
+        <div class={`${prefixCls}-nav-wrap`} ref={this.saveRef('navWrap')}>
           <div class={`${prefixCls}-nav-scroll`}>
-            <div class={navClasses} {...createRefHooks(this.saveRef('nav'))}>
+            <div class={navClasses} ref={this.saveRef('nav')}>
               {navWrapper(getSlot(this))}
             </div>
           </div>

components/vc-tabs/src/Sentinel.jsx

@@ -1,6 +1,5 @@
 import PropTypes from '../../_util/vue-types';
 import KeyCode from '../../_util/KeyCode';
-import createRefHooks from '../../_util/createRefHooks';
 import { getSlot } from '../../_util/props-util';
 
 const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' };
@@ -33,7 +32,7 @@ export default {
     return (
       <div
         tabIndex={0}
-        {...createRefHooks(setRef)}
+        ref={setRef}
         style={sentinelStyle}
         onKeydown={this.onKeyDown}
         role="presentation"

components/vc-tabs/src/TabBarRootNode.jsx

@@ -1,7 +1,6 @@
 import { cloneElement } from '../../_util/vnode';
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import createRefHooks from '../../_util/createRefHooks';
 import { getSlot } from '../../_util/props-util';
 import { getDataAttr } from './utils';
 function noop() {}
@@ -52,7 +51,7 @@ export default {
         tabIndex="0"
         onKeydown={onKeyDown}
         style={style}
-        {...createRefHooks(this.saveRef('root'))}
+        ref={this.saveRef('root')}
         {...getDataAttr(restProps)}
       >
         {newChildren}

components/vc-tabs/src/TabBarTabsNode.jsx

@@ -3,7 +3,6 @@ import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
 import { getComponent, getPropsData } from '../../_util/props-util';
 import { isVertical } from './utils';
-import createRefHooks from '../../_util/createRefHooks';
 function noop() {}
 export default {
   name: 'TabBarTabsNode',
@@ -67,7 +66,7 @@ export default {
           class={cls}
           key={key}
           style={style}
-          {...createRefHooks(activeKey === key ? saveRef('activeTab') : noop)}
+          ref={activeKey === key ? saveRef('activeTab') : noop}
         >
           {tab}
         </div>
@@ -79,6 +78,6 @@ export default {
       rst.push(node);
     });
 
-    return <div {...createRefHooks(this.saveRef('navTabsContainer'))}>{rst}</div>;
+    return <div ref={this.saveRef('navTabsContainer')}>{rst}</div>;
   },
 };

components/vc-trigger/Trigger.jsx

@@ -12,7 +12,6 @@ import BaseMixin from '../_util/BaseMixin';
 import Portal from '../_util/Portal';
 import classNames from 'classnames';
 import { cloneElement } from '../_util/vnode';
-import createRefHooks from '../_util/createRefHooks';
 
 function returnEmptyString() {
   return '';
@@ -409,7 +408,7 @@ export default {
         popupStyle,
         onAlign: $attrs.onPopupAlign || noop,
         ...mouseProps,
-        ...createRefHooks(this.savePopup),
+        ref: this.savePopup,
       };
       return (
         <Popup ref="popup" {...popupProps}>
@@ -557,8 +556,8 @@ export default {
       return action.indexOf('focus') !== -1 || hideAction.indexOf('blur') !== -1;
     },
     forcePopupAlign() {
-      if (this.$data.sPopupVisible && this._component && this._component.refs.alignInstance) {
-        this._component.refs.alignInstance.forceAlign();
+      if (this.$data.sPopupVisible && this._component && this._component.$refs.alignInstance) {
+        this._component.$refs.alignInstance.forceAlign();
       }
     },
     fireEvents(type, e) {