refactor: 使用react18特效重构BasicTable resize height

src/components/Table/src/BasicTable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable no-param-reassign */
-import React, { useRef, useState, useMemo, useCallback, useLayoutEffect } from 'react'
+import React, { useRef, useState, useMemo } from 'react'
 import PermSelect from '@/pages/Customer/Company/components/PermSelect'
 import { TABLE_COLUMNS_MAP, ColumnStateEnum } from '@/utils/cache/cacheEnum'
 import { isBoolean, isMobile, isNullOrUnDef, isObject, isUnDef } from '@/utils/is'
@@ -14,6 +14,7 @@ import type { ParamsType } from '@ant-design/pro-provider'
 import type { DensitySize } from '@ant-design/pro-table/lib/components/ToolBar/DensityIcon'
 
 import styles from './index.less'
+import { useMemoizedFn, useUpdateLayoutEffect } from 'ahooks'
 
 const BasicTable: {
   <T extends Record<string, any>, U extends ParamsType = ParamsType, ValueType = 'text'>(
@@ -31,7 +32,6 @@ const BasicTable: {
   columnStateType,
   columnsStateMap,
   columns: originalColumns,
-  onColumnsStateChange,
   onSizeChange,
   bordered,
   rowSelection,
@@ -47,7 +47,6 @@ const BasicTable: {
 
   const [defaultPermAuthCache, defaultStaffIds] = getPermAuthCache(mainMenuType)
   const tableElRef = useRef<HTMLElement>(null)
-
   const authColumnsStateMap = getAuthCache(TABLE_COLUMNS_MAP)
   columnsStateMap = (authColumnsStateMap && authColumnsStateMap[ColumnStateEnum[columnStateType]]) || {}
   const [state, setState] = useState({
@@ -55,7 +54,7 @@ const BasicTable: {
     sizeRef: 'middle',
     columnsStateMap: columnsStateMap,
     params: { staffIds: defaultStaffIds, dataPermission: defaultPermAuthCache },
-    dataSource: resetProps.dataSource
+    dataSource: null
   })
 
   const columnsRef = useMemo(() => {
@@ -79,8 +78,10 @@ const BasicTable: {
     paginationRef: !isBoolean(resetProps.pagination)
   })
 
-  useLayoutEffect(() => {
-    state.dataSource && redoHeight(state.dataSource)
+  useUpdateLayoutEffect(() => {
+      console.log('111', state.dataSource)
+
+      state.dataSource && redoHeight(state.dataSource)
   }, [state.dataSource])
 
   /** 增加头部 */
@@ -150,7 +151,7 @@ const BasicTable: {
 
   const computedParams = mainMenuType ? { ...params, ...state.params } : params
 
-  const _request = useCallback(
+  const _request = useMemoizedFn(
     async (_params, _sort, _filter) => {
       if (isUnDef(request)) return undefined
       const result = await request(_params, _sort, _filter)
@@ -163,13 +164,19 @@ const BasicTable: {
     [request]
   )
 
-  const _onLoad = _dataSource => {
+  const _onLoad = useMemoizedFn(_dataSource => {
+
     onLoad?.(_dataSource)
     // TODO: 使用[request]api才对dataSource进行赋值, 规避掉手动设置[dataSource] api 自适应高度失效
     if (!isUnDef(request)) {
+      console.log('11', _dataSource)
       setState({ ...state, dataSource: _dataSource })
     }
-  }
+    // TODO: 手动设置数据源的情况进行自适应宽高调整
+    if (Reflect.has(resetProps, 'dataSource')) {
+      setState({ ...state, dataSource: resetProps.dataSource })
+    }
+  })
 
   return (
     <React.StrictMode>

src/components/Table/src/hooks/useTableScroll.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 import type { ProColumns } from '@ant-design/pro-table'
 import type { RefObject } from 'react'
-import { useState, useMemo } from 'react'
-import { useDebounceFn, useUpdateLayoutEffect } from 'ahooks'
+import { useState, useMemo, useTransition } from 'react'
+import { useDebounceFn, useUpdateEffect, useUpdateLayoutEffect } from 'ahooks'
 import { getViewportOffset } from '@/utils/domUtils'
 import { useWindowSizeFn } from '@/hooks/event/useWindomSizeFn'
 import type { DensitySize } from '@ant-design/pro-table/lib/components/ToolBar/DensityIcon'
@@ -20,11 +20,10 @@ export function useTableScroll({
   sizeRef: DensitySize
   paginationRef: boolean
 }) {
-  // let bodyEl: HTMLElement | null
-  const [tableHeight, setTableHeight] = useState(null)
+  const [, startTransition] = useTransition()
   const [_dataSource, setDataSource] = useState(null)
-
   function calcTableHeight(dataSource: any[]) {
+
     const tableEl = tableElRef.current?.querySelector('.ant-table-wrapper')
     if (!tableEl) return
 
@@ -77,7 +76,7 @@ export function useTableScroll({
     }
     const height = bottomIncludeBody - paddingHeight - paginationHeight - headerHeight
 
-    setTableHeight(dataSource?.length ? height : null)
+    // setTableHeight(dataSource?.length ? height : null)
 
     if (!dataSource?.length) {
       // TODO:针对无数据的情况下，特别设置tboody
@@ -103,18 +102,20 @@ export function useTableScroll({
   }
 
   function redoHeight(dataSource?: any[]) {
-    if (dataSource) {
-      setDataSource(dataSource)
-    }
-    calcTableHeight(dataSource || _dataSource)
+    startTransition(() => {
+      if (dataSource) {
+        setDataSource(dataSource)
+      }
+      calcTableHeight(dataSource || _dataSource)
+    })
   }
-  const { run: debounceRedoHeight } = useDebounceFn(redoHeight, { wait: 80 })
+  // const { run: debounceRedoHeight } = useDebounceFn(redoHeight, { wait: 80 })
 
   // Greater than animation time 80
-  useWindowSizeFn(() => debounceRedoHeight(), 80)
+  useWindowSizeFn(() => redoHeight(), 80)
 
   useUpdateLayoutEffect(() => {
-    debounceRedoHeight()
+    redoHeight()
   }, [selectKeysRef, columnsRef, sizeRef])
 
   const getSrollX = useMemo(() => {
@@ -147,8 +148,8 @@ export function useTableScroll({
   }, [selectKeysRef, columnsRef, tableElRef?.current])
 
   const getScrollRef = useMemo(() => {
-    return { x: getSrollX, y: tableHeight }
-  }, [getSrollX, tableHeight])
+    return { x: getSrollX, y: true }
+  }, [getSrollX])
 
-  return { getScrollRef, redoHeight: debounceRedoHeight }
+  return { getScrollRef, redoHeight }
 }