perf: table, close #4787

Author: tangjinzhou

components/_util/raf.ts

@@ -6,7 +6,7 @@ let id = 0;
 const ids: RafMap = {};
 
 // Support call raf with delay specified frame
-export default function wrapperRaf(callback: () => void, delayFrames = 1): number {
+export default function raf(callback: () => void, delayFrames = 1): number {
   const myId: number = id++;
   let restFrames: number = delayFrames;
 
@@ -26,11 +26,11 @@ export default function wrapperRaf(callback: () => void, delayFrames = 1): numbe
   return myId;
 }
 
-wrapperRaf.cancel = function cancel(pid?: number) {
+raf.cancel = function cancel(pid?: number) {
   if (pid === undefined) return;
 
   cancelAnimationFrame(ids[pid]);
   delete ids[pid];
 };
 
-wrapperRaf.ids = ids; // export this for test usage
+raf.ids = ids; // export this for test usage

components/vc-table/Table.tsx

@@ -448,12 +448,15 @@ export default defineComponent<TableProps<DefaultRecordType>>({
         onScroll({ currentTarget: scrollBodyRef.value });
       }
     };
-
+    let timtout;
     const onFullTableResize = ({ width }) => {
-      if (width !== componentWidth.value) {
-        triggerOnScroll();
-        componentWidth.value = fullTableRef.value ? fullTableRef.value.offsetWidth : width;
-      }
+      clearTimeout(timtout);
+      timtout = setTimeout(() => {
+        if (width !== componentWidth.value) {
+          triggerOnScroll();
+          componentWidth.value = fullTableRef.value ? fullTableRef.value.offsetWidth : width;
+        }
+      }, 100);
     };
 
     watch([horizonScroll, () => props.data, () => props.columns], () => {

components/vc-table/hooks/useFrame.ts

@@ -1,41 +1,29 @@
+import raf from '../../_util/raf';
 import type { Ref, UnwrapRef } from 'vue';
-import { onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, ref, shallowRef } from 'vue';
 
 export type Updater<State> = (prev: State) => State;
 
-/**
- * Execute code before next frame but async
- */
 export function useLayoutState<State>(
   defaultState: State,
 ): [Ref<State>, (updater: Updater<State>) => void] {
-  const stateRef = ref<State>(defaultState);
-  // const [, forceUpdate] = useState({});
-
-  const lastPromiseRef = ref<Promise<void>>(null);
-  const updateBatchRef = ref<Updater<State>[]>([]);
+  const stateRef = shallowRef<State>(defaultState);
+  let rafId: number;
+  const updateBatchRef = shallowRef<Updater<State>[]>([]);
   function setFrameState(updater: Updater<State>) {
     updateBatchRef.value.push(updater);
-
-    const promise = Promise.resolve();
-    lastPromiseRef.value = promise;
-
-    promise.then(() => {
-      if (lastPromiseRef.value === promise) {
-        const prevBatch = updateBatchRef.value;
-        // const prevState = stateRef.value;
-        updateBatchRef.value = [];
-
-        prevBatch.forEach(batchUpdater => {
-          stateRef.value = batchUpdater(stateRef.value as State) as UnwrapRef<State>;
-        });
-
-        lastPromiseRef.value = null;
-      }
+    raf.cancel(rafId);
+    rafId = raf(() => {
+      const prevBatch = updateBatchRef.value;
+      // const prevState = stateRef.value;
+      updateBatchRef.value = [];
+      prevBatch.forEach(batchUpdater => {
+        stateRef.value = batchUpdater(stateRef.value as State);
+      });
     });
   }
   onBeforeUnmount(() => {
-    lastPromiseRef.value = null;
+    raf.cancel(rafId);
   });
 
   return [stateRef as Ref<State>, setFrameState];