perf: menu

components/_util/store/connect.jsx

@@ -1,9 +1,8 @@
 import shallowEqual from 'shallowequal';
-import { inject, createVNode } from 'vue';
+import { inject, createVNode, watchEffect } from 'vue';
 import omit from 'omit.js';
 import { getOptionProps } from '../props-util';
 import PropTypes from '../vue-types';
-import proxyComponent from '../proxyComponent';
 
 function getDisplayName(WrappedComponent) {
   return WrappedComponent.name || 'Component';
@@ -33,16 +32,14 @@ export default function connect(mapStateToProps) {
       data() {
         this.store = this.storeContext.store;
         this.preProps = omit(getOptionProps(this), ['__propsSymbol__']);
-        return {
+        watchEffect(() => {
-          subscribed: finnalMapStateToProps(this.store.getState(), this.$props),
-        };
-      },
-      watch: {
-        __propsSymbol__() {
           if (mapStateToProps && mapStateToProps.length === 2) {
             this.subscribed = finnalMapStateToProps(this.store.getState(), this.$props);
           }
-        },
+        });
+        return {
+          subscribed: finnalMapStateToProps(this.store.getState(), this.$props),
+        };
       },
       mounted() {
         this.trySubscribe();
@@ -56,7 +53,7 @@ export default function connect(mapStateToProps) {
           if (!this.unsubscribe) {
             return;
           }
-          const props = omit(getOptionProps(this), ['__propsSymbol__']);
+          const props = getOptionProps(this);
           const nextSubscribed = finnalMapStateToProps(this.store.getState(), props);
           if (
             !shallowEqual(this.preProps, props) ||
@@ -86,7 +83,7 @@ export default function connect(mapStateToProps) {
       render() {
         const { $slots = {}, subscribed, store, $attrs } = this;
         const props = getOptionProps(this);
-        this.preProps = { ...omit(props, ['__propsSymbol__']) };
+        this.preProps = { ...props };
         const wrapProps = {
           ...props,
           ...subscribed,
@@ -95,9 +92,8 @@ export default function connect(mapStateToProps) {
           ref: 'wrappedInstance',
         };
         return createVNode(WrappedComponent, wrapProps, $slots);
-        // return <WrappedComponent {...wrapProps} ref="wrappedInstance"></WrappedComponent>;
       },
     };
-    return proxyComponent(Connect);
+    return Connect;
   };
 }

components/menu/MenuItem.jsx

@@ -45,14 +45,13 @@ export default {
       ...tooltipProps,
       placement: 'right',
       overlayClassName: `${rootPrefixCls}-inline-collapsed-tooltip`,
-    };
+      children: (
-    // return <div>ddd</div>;
-    return (
-      <Tooltip {...toolTipProps}>
         <Item {...itemProps} ref="menuItem">
           {getSlot(this)}
         </Item>
-      </Tooltip>
+      ),
-    );
+    };
+    // return <div>ddd</div>;
+    return <Tooltip {...toolTipProps}></Tooltip>;
   },
 };

components/tooltip/Tooltip.jsx

@@ -173,7 +173,7 @@ export default {
     const { getPopupContainer: getContextPopupContainer } = this.configProvider;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
-    let children = filterEmpty(getSlot(this));
+    let children = this.children || filterEmpty(getSlot(this));
     children = children.length === 1 ? children[0] : children;
     let sVisible = $data.sVisible;
     // Hide tooltip when there is no title

components/tooltip/abstractTooltipProps.js

@@ -31,4 +31,5 @@ export default () => ({
   destroyTooltipOnHide: PropTypes.bool.def(false),
   align: PropTypes.object.def(() => ({})),
   builtinPlacements: PropTypes.object,
+  children: PropTypes.any,
 });

components/vc-menu/MenuItem.jsx

@@ -136,10 +136,10 @@ const MenuItem = {
   },
 
   render() {
-    const props = { ...this.$props, ...this.$attrs };
+    const { class: cls, style, ...props } = { ...this.$props, ...this.$attrs };
 
     const className = {
-      [props.class]: props.class,
+      [cls]: !!cls,
       [this.getPrefixCls()]: true,
       [this.getActiveClassName()]: !props.disabled && props.active,
       [this.getSelectedClassName()]: props.isSelected,
@@ -173,9 +173,9 @@ const MenuItem = {
       onMouseenter: props.disabled ? noop : this.onMouseEnter,
     };
 
-    const style = { ...(props.style || {}) };
+    const styles = { ...(style || {}) };
     if (props.mode === 'inline') {
-      style.paddingLeft = `${props.inlineIndent * props.level}px`;
+      styles.paddingLeft = `${props.inlineIndent * props.level}px`;
     }
     menuAllProps.forEach(key => delete props[key]);
     const liProps = {
@@ -186,7 +186,7 @@ const MenuItem = {
     };
     delete liProps.children;
     return (
-      <li {...liProps} style={style} class={className}>
+      <li {...liProps} style={styles} class={className}>
         {getSlot(this)}
         {getComponent(this, 'itemIcon', props)}
       </li>

components/vc-menu/SubPopupMenu.jsx

@@ -116,7 +116,6 @@ const SubPopupMenu = {
       expandIcon: PropTypes.any,
       overflowedIndicator: PropTypes.any,
       children: PropTypes.any.def([]),
-      __propsSymbol__: PropTypes.any, // mock componentWillReceiveProps
     },
     {
       prefixCls: 'rc-menu',

components/vc-menu/util.js

@@ -111,7 +111,6 @@ export const menuAllProps = [
   'onTitleMouseenter',
   'onTitleMouseleave',
   'onTitleClick',
-  '__propsSymbol__',
   'slots',
   'ref',
   'isRootMenu',