perf: table rerender #1705

Author: tangjinzhou

build/config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  devComponent: 'input',
+  devComponent: 'table',
 };

components/_util/props-util.js

@@ -197,6 +197,12 @@ export function getEvents(child) {
   }
   return { ...events };
 }
+
+// use getListeners instead this.$listeners
+// https://github.com/vueComponent/ant-design-vue/issues/1705
+export function getListeners(context) {
+  return context.$vnode ? context.$vnode.componentOptions.listeners || {} : context.$listeners;
+}
 export function getClass(ele) {
   let data = {};
   if (ele.data) {

components/table/SelectionBox.jsx

@@ -2,7 +2,7 @@ import Checkbox from '../checkbox';
 import Radio from '../radio';
 import { SelectionBoxProps } from './interface';
 import BaseMixin from '../_util/BaseMixin';
-import { getOptionProps } from '../_util/props-util';
+import { getOptionProps, getListeners } from '../_util/props-util';
 
 export default {
   name: 'SelectionBox',
@@ -48,14 +48,13 @@ export default {
 
   render() {
     const { type, rowIndex, ...rest } = getOptionProps(this);
-    const { checked, $attrs, $listeners } = this;
+    const { checked } = this;
     const checkboxProps = {
       props: {
         checked,
         ...rest,
       },
-      attrs: $attrs,
-      on: $listeners,
+      on: getListeners(this),
     };
     if (type === 'radio') {
       checkboxProps.props.value = rowIndex;

components/table/Table.jsx

@@ -17,6 +17,7 @@ import {
   filterEmpty,
   getAllProps,
   getComponentFromProp,
+  getListeners,
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
@@ -1117,7 +1118,7 @@ export default {
           expandIconAsCell,
           emptyText: !(loading.props && loading.props.spinning) && mergedLocale.emptyText,
         },
-        on: this.$listeners,
+        on: getListeners(this),
         class: classString,
       };
       return <VcTable {...vcTableProps} />;

components/table/createBodyRow.jsx

@@ -1,6 +1,7 @@
 import PropTypes from '../_util/vue-types';
 
 import { Store } from './createStore';
+import { getListeners } from '../_util/props-util';
 
 const BodyRowProps = {
   store: Store,
@@ -48,7 +49,7 @@ export default function createTableRow(Component = 'tr') {
       };
 
       return (
-        <Component class={className} {...{ on: this.$listeners }}>
+        <Component class={className} {...{ on: getListeners(this) }}>
           {this.$slots.default}
         </Component>
       );

components/table/index.jsx

@@ -9,6 +9,7 @@ import {
   getSlotOptions,
   camelize,
   getSlots,
+  getListeners,
 } from '../_util/props-util';
 import Base from '../base';
 
@@ -82,7 +83,7 @@ const Table = {
     },
   },
   render() {
-    const { $listeners, $slots, normalize, $scopedSlots } = this;
+    const { $slots, normalize, $scopedSlots } = this;
     const props = getOptionProps(this);
     const columns = props.columns ? this.updateColumns(props.columns) : normalize($slots.default);
     let { title, footer } = props;
@@ -101,7 +102,7 @@ const Table = {
         footer,
         expandedRowRender,
       },
-      on: $listeners,
+      on: getListeners(this),
     };
     return <T {...tProps} />;
   },

components/vc-table/index.js

@@ -11,6 +11,7 @@ import {
   getSlotOptions,
   camelize,
   getSlots,
+  getListeners,
 } from '../_util/props-util';
 const Table = {
   name: 'Table',
@@ -52,15 +53,15 @@ const Table = {
     },
   },
   render() {
-    const { $listeners, $slots, normalize } = this;
+    const { $slots, normalize } = this;
     const props = getOptionProps(this);
     const columns = props.columns || normalize($slots.default);
     const tProps = {
       props: {
         ...props,
         columns,
       },
-      on: $listeners,
+      on: getListeners(this),
     };
     return <T {...tProps} />;
   },

components/vc-table/src/BaseTable.jsx

@@ -4,7 +4,7 @@ import ColGroup from './ColGroup';
 import TableHeader from './TableHeader';
 import TableRow from './TableRow';
 import ExpandableRow from './ExpandableRow';
-import { mergeProps } from '../../_util/props-util';
+import { mergeProps, getListeners } from '../../_util/props-util';
 import { connect } from '../../_util/store';
 function noop() {}
 const BaseTable = {
@@ -49,16 +49,15 @@ const BaseTable = {
         prefixCls,
         childrenColumnName,
         rowClassName,
-        // rowRef,
-        $listeners: {
-          rowClick: onRowClick = noop,
-          rowDoubleclick: onRowDoubleClick = noop,
-          rowContextmenu: onRowContextMenu = noop,
-          rowMouseenter: onRowMouseEnter = noop,
-          rowMouseleave: onRowMouseLeave = noop,
-        },
         customRow = noop,
       } = this.table;
+      const {
+        rowClick: onRowClick = noop,
+        rowDoubleclick: onRowDoubleClick = noop,
+        rowContextmenu: onRowContextMenu = noop,
+        rowMouseenter: onRowMouseEnter = noop,
+        rowMouseleave: onRowMouseLeave = noop,
+      } = getListeners(this.table);
       const { getRowKey, fixed, expander, isAnyColumnsFixed } = this;
 
       const rows = [];

components/vc-table/src/ExpandableTable.jsx

@@ -4,7 +4,7 @@ import { connect } from '../../_util/store';
 import shallowEqual from 'shallowequal';
 import TableRow from './TableRow';
 import { remove } from './utils';
-import { initDefaultProps, getOptionProps } from '../../_util/props-util';
+import { initDefaultProps, getOptionProps, getListeners } from '../../_util/props-util';
 
 export const ExpandableTableProps = () => ({
   expandIconAsCell: PropTypes.bool,
@@ -227,15 +227,15 @@ const ExpandableTable = {
   },
 
   render() {
-    const { data, childrenColumnName, $scopedSlots, $listeners } = this;
+    const { data, childrenColumnName, $scopedSlots } = this;
     const props = getOptionProps(this);
     const needIndentSpaced = data.some(record => record[childrenColumnName]);
 
     return (
       $scopedSlots.default &&
       $scopedSlots.default({
         props,
-        on: $listeners,
+        on: getListeners(this),
         needIndentSpaced,
         renderRows: this.renderRows,
         handleExpandChange: this.handleExpandChange,

components/vc-table/src/Table.jsx

@@ -10,7 +10,7 @@ import ColumnManager from './ColumnManager';
 import HeadTable from './HeadTable';
 import BodyTable from './BodyTable';
 import ExpandableTable from './ExpandableTable';
-import { initDefaultProps, getOptionProps } from '../../_util/props-util';
+import { initDefaultProps, getOptionProps, getListeners } from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 
 export default {
@@ -143,7 +143,7 @@ export default {
     ['rowClick', 'rowDoubleclick', 'rowContextmenu', 'rowMouseenter', 'rowMouseleave'].forEach(
       name => {
         warningOnce(
-          this.$listeners[name] === undefined,
+          getListeners(this)[name] === undefined,
           `${name} is deprecated, please use customRow instead.`,
         );
       },
@@ -509,7 +509,7 @@ export default {
 
   render() {
     const props = getOptionProps(this);
-    const { $listeners, columnManager, getRowKey } = this;
+    const { columnManager, getRowKey } = this;
     const prefixCls = props.prefixCls;
     let className = props.prefixCls;
     if (props.useFixedHeader || (props.scroll && props.scroll.y)) {
@@ -529,7 +529,7 @@ export default {
         columnManager,
         getRowKey,
       },
-      on: { ...$listeners },
+      on: getListeners(this),
       scopedSlots: {
         default: expander => {
           this.expander = expander;