perf: improve performance of ArrayTable (#3574)

alibaba · Nov 28, 2022 · 0c0c3b0 · 0c0c3b0
1 parent d1ee69b
commit 0c0c3b0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/packages/antd/src/array-base/index.tsx b/packages/antd/src/array-base/index.tsx
@@ -125,11 +125,12 @@ export const ArrayBase: ComposedArrayBase = (props) => {
 }
 
 ArrayBase.Item = ({ children, ...props }) => {
-  const index = props.index
-  const record = takeRecord(props.record, props.index)
   return (
     <ItemContext.Provider value={props}>
-      <RecordScope getIndex={() => index} getRecord={() => record}>
+      <RecordScope
+        getIndex={() => props.index}
+        getRecord={() => takeRecord(props.record, props.index)}
+      >
         {children}
       </RecordScope>
     </ItemContext.Provider>

diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -122,6 +122,7 @@ const useArrayTableSources = () => {
 }
 
 const useArrayTableColumns = (
+  dataSource: any[],
   field: ArrayField,
   sources: ObservableColumnSource[]
 ): TableProps<any>['columns'] => {
@@ -133,7 +134,7 @@ const useArrayTableColumns = (
       key,
       dataIndex: name,
       render: (value: any, record: any) => {
-        const index = field?.value?.indexOf(record)
+        const index = dataSource?.indexOf(record)
         const children = (
           <ArrayBase.Item index={index} record={() => field?.value?.[index]}>
             <RecursionField schema={schema} name={index} onlyRenderProperties />
@@ -295,7 +296,7 @@ export const ArrayTable: ComposedArrayTable = observer(
     const prefixCls = usePrefixCls('formily-array-table')
     const dataSource = Array.isArray(field.value) ? field.value.slice() : []
     const sources = useArrayTableSources()
-    const columns = useArrayTableColumns(field, sources)
+    const columns = useArrayTableColumns(dataSource, field, sources)
     const pagination = isBool(props.pagination) ? {} : props.pagination
     const addition = useAddition()
     const defaultRowKey = (record: any) => {

diff --git a/packages/next/src/array-base/index.tsx b/packages/next/src/array-base/index.tsx
@@ -125,11 +125,12 @@ export const ArrayBase: ComposedArrayBase = (props) => {
 }
 
 ArrayBase.Item = ({ children, ...props }) => {
-  const index = props.index
-  const record = takeRecord(props.record, props.index)
   return (
     <ItemContext.Provider value={props}>
-      <RecordScope getIndex={() => index} getRecord={() => record}>
+      <RecordScope
+        getIndex={() => props.index}
+        getRecord={() => takeRecord(props.record, props.index)}
+      >
         {children}
       </RecordScope>
     </ItemContext.Provider>

diff --git a/packages/next/src/array-table/index.tsx b/packages/next/src/array-table/index.tsx
@@ -120,6 +120,7 @@ const useArrayTableSources = () => {
 }
 
 const useArrayTableColumns = (
+  dataSource: any[],
   field: ArrayField,
   sources: ObservableColumnSource[]
 ): TableProps['columns'] => {
@@ -131,7 +132,7 @@ const useArrayTableColumns = (
       key,
       dataIndex: name,
       cell: (value: any, _: number, record: any) => {
-        const index = field.value?.indexOf(record)
+        const index = dataSource?.indexOf(record)
         const children = (
           <ArrayBase.Item
             key={index}
@@ -299,7 +300,7 @@ export const ArrayTable: ComposedArrayTable = observer(
     const prefixCls = usePrefixCls('formily-array-table')
     const dataSource = Array.isArray(field.value) ? field.value.slice() : []
     const sources = useArrayTableSources()
-    const columns = useArrayTableColumns(field, sources)
+    const columns = useArrayTableColumns(dataSource, field, sources)
     const pagination = isBool(props.pagination) ? {} : props.pagination
     const addition = useAddition()