refactor(dep): 优化显示/禁用关联多余渲染

- [email protected]
umijs · Mar 22, 2021 · 3d72fcb · 3d72fcb
1 parent 2f85b10
commit 3d72fcb
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 19 deletions.
diff --git a/docs/private/depRefactor.tsx b/docs/private/depRefactor.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Form } from 'sula';
+
+export default () => {
+  return (
+    <Form
+      fields={[
+        {
+          name: 'a',
+          label: 'A',
+          field: 'input',
+        },
+        {
+          name: 'b',
+          label: 'B',
+          field: 'input',
+          dependency: {
+            visible: {
+              relates: ['a'],
+              inputs: [['1']],
+              output: false,
+              defaultOutput: true,
+            },
+          },
+        },
+        {
+          name: 'c',
+          label: 'C',
+          field: 'input',
+          dependency: {
+            disabled: {
+              relates: ['a'],
+              inputs: [['1']],
+              output: true,
+              defaultOutput: false,
+            },
+          },
+        },
+      ]}
+    />
+  );
+};
diff --git a/docs/private/private.md b/docs/private/private.md
@@ -2,9 +2,11 @@
 group:
   title: 对内测试
   order: 99
-title: request
+title: internal
 order: 0
 ---
 
 
 <code title="请求测试" src="./request.tsx" />
+
+<code title="显示关联优化" src="./depRefactor.tsx" />
diff --git a/packages/sula/src/form/Field.tsx b/packages/sula/src/form/Field.tsx
@@ -71,12 +71,15 @@ export default class Field extends React.Component<FieldProps> {
   private cancelRegisterField: () => void | null = null;
 
   componentDidMount() {
-    if(!this.props.name) {
+    if (!this.props.name) {
       return;
     }
-    const { registerField, getFormDependency, getCtx, linkFieldNameAndFieldKey } = this.context.formContext.getInternalHooks(
-      HOOK_MARK,
-    );
+    const {
+      registerField,
+      getFormDependency,
+      getCtx,
+      linkFieldNameAndFieldKey,
+    } = this.context.formContext.getInternalHooks(HOOK_MARK);
 
     this.initFieldSource(getCtx());
 
@@ -95,13 +98,14 @@ export default class Field extends React.Component<FieldProps> {
   }
 
   componentDidUpdate(prevProps: FieldProps) {
-    if(!this.props.name) {
+    if (!this.props.name) {
       return;
     }
-    if(this.props.fieldKey && this.props.fieldKey !== prevProps.fieldKey) {
-      const { linkFieldNameAndFieldKey, unlinkFieldNameAndFieldKey } = this.context.formContext.getInternalHooks(
-        HOOK_MARK,
-      );
+    if (this.props.fieldKey && this.props.fieldKey !== prevProps.fieldKey) {
+      const {
+        linkFieldNameAndFieldKey,
+        unlinkFieldNameAndFieldKey,
+      } = this.context.formContext.getInternalHooks(HOOK_MARK);
 
       const oldFieldName = this.getFieldNameList(prevProps.name!);
 
@@ -112,12 +116,14 @@ export default class Field extends React.Component<FieldProps> {
   }
 
   componentWillUnmount() {
-    if(!this.props.name) {
+    if (!this.props.name) {
       return;
     }
-    const { getFormDependency, unlinkFieldNameAndFieldKey } = this.context.formContext.getInternalHooks(HOOK_MARK);
+    const {
+      getFormDependency,
+      unlinkFieldNameAndFieldKey,
+    } = this.context.formContext.getInternalHooks(HOOK_MARK);
     if (this.props.dependency) {
-
       const formDependency: FormDependency = getFormDependency();
       formDependency.removeDependency(this.getName());
     }
@@ -297,8 +303,8 @@ export default class Field extends React.Component<FieldProps> {
     const {
       field: fieldProps,
       initialSource,
-      initialVisible,
-      initialDisabled,
+      initialVisible = true,
+      initialDisabled = false,
       collect,
       remoteSource,
       itemLayout, // 无cols

diff --git a/packages/sula/src/form/__test__/dependency.test.js b/packages/sula/src/form/__test__/dependency.test.js
@@ -79,6 +79,8 @@ describe('depstore', () => {
         setFieldValue: jest.fn(),
         setFieldSource: jest.fn(),
         getFieldValue: jest.fn(() => 'aaa'),
+        getFieldVisible: jest.fn(),
+        getFieldDisabled: jest.fn(),
         getInternalHooks: () => {
           return depForm;
         },
@@ -301,6 +303,7 @@ describe('depstore', () => {
         setFieldValue: jest.fn(),
         setFieldSource: jest.fn(),
         getFieldValue: jest.fn(() => 'a'),
+        getFieldVisible: jest.fn(),
         getInternalHooks: () => {
           return depForm;
         },
@@ -400,6 +403,7 @@ describe('depstore', () => {
         setFieldValue: jest.fn(),
         setFieldSource: jest.fn(),
         getFieldValue: jest.fn(() => 'aaa'),
+        getFieldVisible: jest.fn(),
         getInternalHooks: () => {
           return depForm;
         },
@@ -410,6 +414,7 @@ describe('depstore', () => {
         [['input3'], 'one'],
         [['input4'], '4'],
       ]);
+      expect(form.getFieldVisible).toHaveBeenCalledWith(['input4']);
       expect(form.setFieldVisible).toHaveBeenCalledWith(['input4'], true);
     });
   });

diff --git a/packages/sula/src/form/dependency/DepStore.ts b/packages/sula/src/form/dependency/DepStore.ts
@@ -189,9 +189,21 @@ export default class DepStore {
                 }
               : form.setFieldSource;
           } else if (type === 'disabled') {
-            fn = form.setFieldDisabled;
+            fn = (_name: FieldNameList, _disabled: boolean) => {
+              const prevDisabled = form.getFieldDisabled(_name);
+              if(prevDisabled !== _disabled) {
+                // 减少不必要的渲染
+                form.setFieldDisabled(_name, _disabled);
+              }
+            };
           } else if (type === 'visible') {
-            fn = form.setFieldVisible;
+            fn = (_name: FieldNameList, _visible: boolean) => {
+              const prevVisible = form.getFieldVisible(_name);
+              if(prevVisible !== _visible) {
+                // 减少不必要的渲染
+                form.setFieldVisible(_name, _visible);
+              }
+            };
           } else {
             fn = form.setFieldValue;
           }

diff --git a/packages/sula/src/form/useFormContext.tsx b/packages/sula/src/form/useFormContext.tsx
@@ -50,6 +50,7 @@ class ContextStore {
 
       getFieldSource: this.getFieldSource,
       getFieldDisabled: this.getFieldDisabled,
+      getFieldVisible: this.getFieldVisible,
 
       setFieldVisible: this.setFieldVisible,
       setFieldDisabled: this.setFieldDisabled,
@@ -100,6 +101,11 @@ class ContextStore {
     return field.getDisabled();
   };
 
+  public getFieldVisible = (name: FieldNamePath) => {
+    const field = this.getField(name);
+    return field.getVisible();
+  };
+
   public setFieldVisible = (name: FieldNamePath, visible: boolean) => {
     const field = this.getField(name);
 

diff --git a/packages/sula/src/types/dependency.ts b/packages/sula/src/types/dependency.ts
@@ -18,6 +18,11 @@ export interface TransedDependency extends Dependency {
   name: FieldNameList;
 }
 
-export type TransedDependencies = Record<DependencyType, TransedDependency[][]>;
 
-export type Dependencies = Record<DependencyType, Dependency >;
+type PartialRecord<K extends keyof any, T> = {
+  [P in K]?: T;
+};
+
+export type TransedDependencies = PartialRecord<DependencyType, TransedDependency[][]>;
+
+export type Dependencies = PartialRecord<DependencyType, Dependency>;