From d67e6e2d72e8ee41137bdfee20f326ecccb3f97c Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Fri, 8 Aug 2025 11:50:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor(RemoteSchemaComponent):=20optimize=20s?=
 =?UTF-8?q?chema=20transformation=20by=20me=E2=80=A6=20(#7353)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(RemoteSchemaComponent): optimize schema transformation by memoizing the result

* refactor(List): extract ListItem component for better readability and maintainability

* refactor(List): rename ListItem to ListItemField and improve readability
---
 .../src/schema-component/antd/list/List.tsx   | 30 ++++++++++---------
 .../core/RemoteSchemaComponent.tsx            |  5 ++--
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/list/List.tsx b/packages/core/client/src/schema-component/antd/list/List.tsx
index 4f6db0faea4..5807ad6d1df 100644
--- a/packages/core/client/src/schema-component/antd/list/List.tsx
+++ b/packages/core/client/src/schema-component/antd/list/List.tsx
@@ -11,12 +11,14 @@ import { css, cx } from '@emotion/css';
 import { FormLayout } from '@formily/antd-v5';
 import { ArrayField } from '@formily/core';
 import { Schema, useField, useFieldSchema } from '@formily/react';
+import { transformMultiColumnToSingleColumn } from '@nocobase/utils/client';
 import { List as AntdList, PaginationProps, theme } from 'antd';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { getCardItemSchema } from '../../../block-provider';
 import { NocoBaseRecursionField } from '../../../formily/NocoBaseRecursionField';
 import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
 import { withSkeletonComponent } from '../../../hoc/withSkeletonComponent';
+import { useMobileLayout } from '../../../route-switch/antd/admin-layout';
 import { SortableItem } from '../../common';
 import { SchemaComponentOptions } from '../../core';
 import { useDesigner } from '../../hooks';
@@ -25,8 +27,6 @@ import { ListDesigner } from './List.Designer';
 import { ListItem } from './List.Item';
 import useStyles from './List.style';
 import { useListActionBarProps, useListBlockHeight } from './hooks';
-import { useMobileLayout } from '../../../route-switch/antd/admin-layout';
-import { transformMultiColumnToSingleColumn } from '@nocobase/utils/client';
 
 const InternalList = withSkeletonComponent(
   (props) => {
@@ -163,17 +163,7 @@ const InternalList = withSkeletonComponent(
               >
                 {field.value?.length
                   ? field.value.map((item, index) => {
-                      return (
-                        <NocoBaseRecursionField
-                          basePath={field.address}
-                          key={index}
-                          name={index}
-                          onlyRenderProperties
-                          schema={
-                            isMobileLayout ? transformMultiColumnToSingleColumn(getSchema(index)) : getSchema(index)
-                          }
-                        ></NocoBaseRecursionField>
-                      );
+                      return <ListItemField key={index} field={field} index={index} schema={getSchema(index)} />;
                     })
                   : null}
               </AntdList>
@@ -189,6 +179,18 @@ const InternalList = withSkeletonComponent(
   },
 );
 
+function ListItemField(props: Readonly<{ field: any; index: number; schema: any }>) {
+  const { isMobileLayout } = useMobileLayout();
+  const schema = useMemo(
+    () => (isMobileLayout ? transformMultiColumnToSingleColumn(props.schema) : props.schema),
+    [isMobileLayout, props.schema],
+  );
+
+  return (
+    <NocoBaseRecursionField basePath={props.field.address} name={props.index} onlyRenderProperties schema={schema} />
+  );
+}
+
 export const List = withDynamicSchemaProps(InternalList) as typeof InternalList & {
   Item: typeof ListItem;
   Designer: typeof ListDesigner;
diff --git a/packages/core/client/src/schema-component/core/RemoteSchemaComponent.tsx b/packages/core/client/src/schema-component/core/RemoteSchemaComponent.tsx
index f2201260413..0aa64120e63 100644
--- a/packages/core/client/src/schema-component/core/RemoteSchemaComponent.tsx
+++ b/packages/core/client/src/schema-component/core/RemoteSchemaComponent.tsx
@@ -63,6 +63,7 @@ const RequestSchemaComponent: React.FC<RemoteSchemaComponentProps> = (props) =>
   const NotFoundComponent = useComponent(NotFoundPage);
   const collectionManagerLoading = useRemoteCollectionManagerLoading();
   const parentSchema = useFieldSchema();
+  const transformedSchema = useMemo(() => schemaTransform(schema || {}), [schema, schemaTransform]);
 
   if (collectionManagerLoading || loading || hidden) {
     return <Spin style={{ width: '100%', marginTop: 20 }} delay={LOADING_DELAY} />;
@@ -77,7 +78,7 @@ const RequestSchemaComponent: React.FC<RemoteSchemaComponentProps> = (props) =>
     <SchemaComponent
       components={components}
       scope={scope}
-      schema={schemaTransform(schema || {})}
+      schema={transformedSchema}
       parentSchema={parentSchema}
     />
   ) : (
@@ -85,7 +86,7 @@ const RequestSchemaComponent: React.FC<RemoteSchemaComponentProps> = (props) =>
       <SchemaComponent
         components={components}
         scope={scope}
-        schema={schemaTransform(schema || {})}
+        schema={transformedSchema}
         parentSchema={parentSchema}
       />
     </FormProvider>