chore: Opt of form store (#143)

* unique fetch store

* downgress to string path match

* trigger warning when not have a checker

* revert NameMap

Author: zombieJ

src/Field.tsx

@@ -186,11 +186,10 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
   // Trigger by store update. Check if need update the component
   public onStoreChange: FieldEntity['onStoreChange'] = (prevStore, namePathList, info) => {
     const { shouldUpdate, dependencies = [], onReset } = this.props;
-    const { getFieldsValue }: FormInstance = this.context;
-    const values = getFieldsValue(true);
+    const { store } = info;
     const namePath = this.getNamePath();
     const prevValue = this.getValue(prevStore);
-    const curValue = this.getValue();
+    const curValue = this.getValue(store);
 
     const namePathMatch = namePathList && containsNamePath(namePathList, namePath);
 
@@ -242,7 +241,7 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
         if (
           shouldUpdate &&
           !namePath.length &&
-          requireUpdate(shouldUpdate, prevStore, values, prevValue, curValue, info)
+          requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)
         ) {
           this.reRender();
           return;
@@ -277,7 +276,7 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
           dependencies.some(dependency =>
             containsNamePath(namePathList, getNamePath(dependency)),
           ) ||
-          requireUpdate(shouldUpdate, prevStore, values, prevValue, curValue, info)
+          requireUpdate(shouldUpdate, prevStore, store, prevValue, curValue, info)
         ) {
           this.reRender();
           return;

src/interface.ts

@@ -83,7 +83,11 @@ export interface ValidateErrorEntity {
 }
 
 export interface FieldEntity {
-  onStoreChange: (store: Store, namePathList: InternalNamePath[] | null, info: NotifyInfo) => void;
+  onStoreChange: (
+    store: Store,
+    namePathList: InternalNamePath[] | null,
+    info: ValuedNotifyInfo,
+  ) => void;
   isFieldTouched: () => boolean;
   isFieldDirty: () => boolean;
   isFieldValidating: () => boolean;
@@ -115,29 +119,45 @@ export type InternalValidateFields = (
 ) => Promise<Store>;
 export type ValidateFields = (nameList?: NamePath[]) => Promise<Store>;
 
+// >>>>>> Info
 interface ValueUpdateInfo {
   type: 'valueUpdate';
   source: 'internal' | 'external';
 }
 
+interface ValidateFinishInfo {
+  type: 'validateFinish';
+}
+
+interface ResetInfo {
+  type: 'reset';
+}
+
+interface SetFieldInfo {
+  type: 'setField';
+  data: FieldData;
+}
+
+interface DependenciesUpdateInfo {
+  type: 'dependenciesUpdate';
+  /**
+   * Contains all the related `InternalNamePath[]`.
+   * a <- b <- c : change `a`
+   * relatedFields=[a, b, c]
+   */
+  relatedFields: InternalNamePath[];
+}
+
 export type NotifyInfo =
   | ValueUpdateInfo
-  | {
-      type: 'validateFinish' | 'reset';
-    }
-  | {
-      type: 'setField';
-      data: FieldData;
-    }
-  | {
-      type: 'dependenciesUpdate';
-      /**
-       * Contains all the related `InternalNamePath[]`.
-       * a <- b <- c : change `a`
-       * relatedFields=[a, b, c]
-       */
-      relatedFields: InternalNamePath[];
-    };
+  | ValidateFinishInfo
+  | ResetInfo
+  | SetFieldInfo
+  | DependenciesUpdateInfo;
+
+export type ValuedNotifyInfo = NotifyInfo & {
+  store: Store;
+};
 
 export interface Callbacks {
   onValuesChange?: (changedValues: Store, values: Store) => void;

src/useForm.ts

@@ -19,6 +19,7 @@ import {
   StoreValue,
   Meta,
   InternalFieldData,
+  ValuedNotifyInfo,
 } from './interface';
 import { HOOK_MARK } from './FieldContext';
 import { allPromiseFinish } from './utils/asyncUtil';
@@ -134,9 +135,14 @@ export class FormStore {
     this.validateMessages = validateMessages;
   };
 
+  // ========================== Dev Warning =========================
+  private timeoutId: number = null;
+
   private warningUnhooked = () => {
-    if (process.env.NODE_ENV !== 'production') {
-      setTimeout(() => {
+    if (process.env.NODE_ENV !== 'production' && !this.timeoutId) {
+      this.timeoutId = window.setTimeout(() => {
+        this.timeoutId = null;
+
         if (!this.formHooked) {
           warning(
             false,
@@ -441,8 +447,13 @@ export class FormStore {
     });
   };
 
-  private getFields = (): InternalFieldData[] =>
-    this.getFieldEntities(true).map(
+  private getFields = (): InternalFieldData[] => {
+    console.time('getFieldEntities');
+    const entities = this.getFieldEntities(true);
+    console.timeEnd('getFieldEntities');
+
+    console.time('map fields');
+    const fields = entities.map(
       (field: FieldEntity): InternalFieldData => {
         const namePath = field.getNamePath();
         const meta = field.getMeta();
@@ -459,6 +470,10 @@ export class FormStore {
         return fieldData;
       },
     );
+    console.timeEnd('map fields');
+
+    return fields;
+  };
 
   // =========================== Observer ===========================
   private registerField = (entity: FieldEntity) => {
@@ -503,9 +518,15 @@ export class FormStore {
     info: NotifyInfo,
   ) => {
     if (this.subscribable) {
+      const mergedInfo: ValuedNotifyInfo = {
+        ...info,
+        store: this.getFieldsValue(true),
+      };
+      console.time(`notify ${info.type}`);
       this.getFieldEntities().forEach(({ onStoreChange }) => {
-        onStoreChange(prevStore, namePathList, info);
+        onStoreChange(prevStore, namePathList, mergedInfo);
       });
+      console.timeEnd(`notify ${info.type}`);
     } else {
       this.forceRootUpdate();
     }
@@ -605,7 +626,9 @@ export class FormStore {
     const { onFieldsChange } = this.callbacks;
 
     if (onFieldsChange) {
+      console.time('getFields');
       const fields = this.getFields();
+      console.timeEnd('getFields');
 
       /**
        * Fill errors since `fields` may be replaced by controlled fields