perf: table #3531

Author: tangjinzhou

.prettierignore

@@ -28,4 +28,5 @@ components/style/color/*.less
 .huskyrc
 .gitmodules
 *.png
+v2-doc/
 

components/_util/store/PropTypes.js

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import Checkbox from '../checkbox';
 import Radio from '../radio';
 import { SelectionBoxProps } from './interface';
@@ -11,52 +11,21 @@ export default defineComponent({
   inheritAttrs: false,
   props: SelectionBoxProps,
 
-  setup() {
+  setup(props) {
     return {
-      unsubscribe: null,
+      checked: computed(() => {
+        const { store, defaultSelection, rowIndex } = props;
+        let checked = false;
+        if (store.selectionDirty) {
+          checked = store.selectedRowKeys.indexOf(rowIndex) >= 0;
+        } else {
+          checked =
+            store.selectedRowKeys.indexOf(rowIndex) >= 0 || defaultSelection.indexOf(rowIndex) >= 0;
+        }
+        return checked;
+      }),
     };
   },
-  data() {
-    return {
-      checked: false,
-    };
-  },
-
-  created() {
-    this.checked = this.getCheckState(this.$props);
-  },
-
-  mounted() {
-    this.subscribe();
-  },
-
-  beforeUnmount() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  },
-  methods: {
-    getCheckState(props): boolean {
-      const { store, defaultSelection, rowIndex } = props;
-      let checked = false;
-      if (store.getState().selectionDirty) {
-        checked = store.getState().selectedRowKeys.indexOf(rowIndex) >= 0;
-      } else {
-        checked =
-          store.getState().selectedRowKeys.indexOf(rowIndex) >= 0 ||
-          defaultSelection.indexOf(rowIndex) >= 0;
-      }
-      return checked;
-    },
-    subscribe() {
-      const { store } = this;
-      this.unsubscribe = store.subscribe(() => {
-        const checked = this.getCheckState(this.$props);
-        this.setState({ checked });
-      });
-    },
-  },
-
   render() {
     const { type, rowIndex, ...rest } = { ...getOptionProps(this), ...this.$attrs } as any;
     const { checked } = this;

components/_util/store/Provider.jsx

@@ -5,7 +5,7 @@ import Menu from '../menu';
 import classNames from '../_util/classNames';
 import { SelectionCheckboxAllProps } from './interface';
 import BaseMixin from '../_util/BaseMixin';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 
 function checkSelection({
   store,
@@ -17,7 +17,7 @@ function checkSelection({
 }) {
   return byDefaultChecked
     ? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
-    : data[type]((item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0);
+    : data[type]((item, i) => store.selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0);
 }
 
 function getIndeterminateState(props) {
@@ -53,7 +53,7 @@ function getIndeterminateState(props) {
       byDefaultChecked: true,
     });
 
-  if (store.getState().selectionDirty) {
+  if (store.selectionDirty) {
     return someCheckedNotByDefaultChecked;
   }
   return someCheckedNotByDefaultChecked || someCheckedByDefaultChecked;
@@ -64,7 +64,7 @@ function getCheckState(props) {
   if (!data.length) {
     return false;
   }
-  if (store.getState().selectionDirty) {
+  if (store.selectionDirty) {
     return checkSelection({
       ...props,
       data,
@@ -94,29 +94,18 @@ export default defineComponent({
   inheritAttrs: false,
   props: SelectionCheckboxAllProps,
 
-  setup() {
+  setup(props) {
     return {
       defaultSelections: [],
-      unsubscribe: null,
-    };
-  },
-  data() {
-    const { $props: props } = this;
-
-    return {
-      checked: getCheckState(props),
-      indeterminate: getIndeterminateState(props),
+      checked: computed(() => {
+        return getCheckState(props);
+      }),
+      indeterminate: computed(() => {
+        return getIndeterminateState(props);
+      }),
     };
   },
 
-  watch: {
-    propsSymbol: {
-      handler() {
-        this.setCheckState(this.$props);
-      },
-    },
-  },
-
   created() {
     const { $props: props } = this;
     this.defaultSelections = props.hideDefaultSelections
@@ -132,55 +121,11 @@ export default defineComponent({
           },
         ];
   },
-
-  mounted() {
-    this.subscribe();
-  },
-
-  beforeUnmount() {
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  },
   methods: {
-    checkSelection(props, data, type, byDefaultChecked) {
-      const { store, getCheckboxPropsByItem, getRecordKey } = props || this.$props;
-      // type should be 'every' | 'some'
-      if (type === 'every' || type === 'some') {
-        return byDefaultChecked
-          ? data[type]((item, i) => getCheckboxPropsByItem(item, i).defaultChecked)
-          : data[type](
-              (item, i) => store.getState().selectedRowKeys.indexOf(getRecordKey(item, i)) >= 0,
-            );
-      }
-      return false;
-    },
-
-    setCheckState(props) {
-      const checked = getCheckState(props);
-      const indeterminate = getIndeterminateState(props);
-      this.setState(prevState => {
-        const newState: any = {};
-        if (indeterminate !== prevState.indeterminate) {
-          newState.indeterminate = indeterminate;
-        }
-        if (checked !== prevState.checked) {
-          newState.checked = checked;
-        }
-        return newState;
-      });
-    },
-
     handleSelectAllChange(e) {
       const { checked } = e.target;
       this.$emit('select', checked ? 'all' : 'removeAll', 0, null);
     },
-    subscribe() {
-      const { store } = this;
-      this.unsubscribe = store.subscribe(() => {
-        this.setCheckState(this.$props);
-      });
-    },
 
     renderMenus(selections) {
       return selections.map((selection, index) => {