fix(core): fix memo leak of onFieldReact/onFieldChange (#3231)

* fix(core): fix memo leak of onFieldReact/onFieldChange * test: add some tests
alibaba · Jun 26, 2022 · d1c4451 · d1c4451
1 parent cc1f5d4
commit d1c4451
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 35 deletions.
diff --git a/packages/core/src/__tests__/field.spec.ts b/packages/core/src/__tests__/field.spec.ts
@@ -2253,3 +2253,27 @@ test('field destroyed or display none should not be assign value from patch init
   expect(aa.value).toBe('123')
   expect(form.values).toEqual({ aa: '123' })
 })
+
+test('onFieldReact with field destroyed', () => {
+  const fn = jest.fn()
+  const obs = observable<any>({ value: 123 })
+  const form = attach(
+    createForm({
+      effects() {
+        onFieldReact('aa', () => {
+          fn(obs.value)
+        })
+      },
+    })
+  )
+  const aa = attach(
+    form.createField({
+      name: 'aa',
+    })
+  )
+  obs.value = '321'
+  expect(fn).toBeCalledTimes(2)
+  aa.destroy()
+  obs.value = '111'
+  expect(fn).toBeCalledTimes(2)
+})
diff --git a/packages/core/src/effects/onFieldEffects.ts b/packages/core/src/effects/onFieldEffects.ts
@@ -9,7 +9,6 @@ import {
   IFieldState,
 } from '../types'
 import { createEffectHook, useEffectForm } from '../shared/effective'
-import { onFormUnmount } from './onFormEffects'
 
 function createFieldEffect<Result extends GeneralField = GeneralField>(
   type: LifeCycleTypes
@@ -110,19 +109,13 @@ export function onFieldReact(
   pattern: FormPathPattern,
   callback?: (field: GeneralField, form: Form) => void
 ) {
-  const disposers = []
   onFieldInit(pattern, (field, form) => {
-    disposers.push(
+    field.disposers.push(
       autorun(() => {
         if (isFn(callback)) callback(field, form)
       })
     )
   })
-  onFormUnmount(() => {
-    disposers.forEach((dispose) => {
-      dispose()
-    })
-  })
 }
 export function onFieldChange(
   pattern: FormPathPattern,
@@ -144,26 +137,18 @@ export function onFieldChange(
   } else {
     watches = watches || ['value']
   }
-  const disposers = []
   onFieldInit(pattern, (field, form) => {
     if (isFn(callback)) callback(field, form)
-    disposers.push(
-      reaction(
-        () => {
-          return toArr(watches).map((key) => {
-            return field[key]
-          })
-        },
-        () => {
-          if (isFn(callback)) callback(field, form)
-        }
-      )
+    const dispose = reaction(
+      () => {
+        return toArr(watches).map((key) => {
+          return field[key]
+        })
+      },
+      () => {
+        if (isFn(callback)) callback(field, form)
+      }
     )
-  })
-
-  onFormUnmount(() => {
-    disposers.forEach((dispose) => {
-      dispose()
-    })
+    field.disposers.push(dispose)
   })
 }
diff --git a/packages/core/src/models/Form.ts b/packages/core/src/models/Form.ts
@@ -294,7 +294,7 @@ export class Form<ValueType extends object = any> {
     Component extends JSXComponent
   >(
     props: IFieldFactoryProps<Decorator, Component>
-  ) => {
+  ): Field<Decorator, Component> => {
     const address = FormPath.parse(props.basePath).concat(props.name)
     const identifier = address.toString()
     if (!identifier) return
@@ -304,15 +304,15 @@ export class Form<ValueType extends object = any> {
       })
       this.notify(LifeCycleTypes.ON_FORM_GRAPH_CHANGE)
     }
-    return this.fields[identifier] as Field<Decorator, Component>
+    return this.fields[identifier] as any
   }
 
   createArrayField = <
     Decorator extends JSXComponent,
     Component extends JSXComponent
   >(
     props: IFieldFactoryProps<Decorator, Component>
-  ) => {
+  ): ArrayField<Decorator, Component> => {
     const address = FormPath.parse(props.basePath).concat(props.name)
     const identifier = address.toString()
     if (!identifier) return
@@ -330,15 +330,15 @@ export class Form<ValueType extends object = any> {
       })
       this.notify(LifeCycleTypes.ON_FORM_GRAPH_CHANGE)
     }
-    return this.fields[identifier] as ArrayField<Decorator, Component>
+    return this.fields[identifier] as any
   }
 
   createObjectField = <
     Decorator extends JSXComponent,
     Component extends JSXComponent
   >(
     props: IFieldFactoryProps<Decorator, Component>
-  ) => {
+  ): ObjectField<Decorator, Component> => {
     const address = FormPath.parse(props.basePath).concat(props.name)
     const identifier = address.toString()
     if (!identifier) return
@@ -356,15 +356,15 @@ export class Form<ValueType extends object = any> {
       })
       this.notify(LifeCycleTypes.ON_FORM_GRAPH_CHANGE)
     }
-    return this.fields[identifier] as ObjectField<Decorator, Component>
+    return this.fields[identifier] as any
   }
 
   createVoidField = <
     Decorator extends JSXComponent,
     Component extends JSXComponent
   >(
     props: IVoidFieldFactoryProps<Decorator, Component>
-  ) => {
+  ): VoidField<Decorator, Component> => {
     const address = FormPath.parse(props.basePath).concat(props.name)
     const identifier = address.toString()
     if (!identifier) return
@@ -374,7 +374,7 @@ export class Form<ValueType extends object = any> {
       })
       this.notify(LifeCycleTypes.ON_FORM_GRAPH_CHANGE)
     }
-    return this.fields[identifier] as VoidField<Decorator, Component>
+    return this.fields[identifier] as any
   }
 
   /** 状态操作模型 **/

diff --git a/packages/reactive/src/array.ts b/packages/reactive/src/array.ts
@@ -33,7 +33,7 @@ export class ArraySet<T> {
 
   forEach(callback: (value: T) => void) {
     if (this.value.length === 0) return
-    for (let index = 0, len = this.value.length; index < len; index++) {
+    for (let index = 0; index < this.value.length; index++) {
       callback(this.value[index])
     }
   }