perf: performance optimization

bowencool · Nov 20, 2023 · 1efd791 · 1efd791
1 parent 7c0e51b
commit 1efd791
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 41 deletions.
diff --git a/src/createModal/index.tsx b/src/createModal/index.tsx
@@ -55,7 +55,9 @@ export default function createModal<T, R = void>(
   });
   return { destory, promise: defered };
 }
-
+/**
+ * @deprecated use `useModalCreation` instead
+ */
 export function createFunctionWithDefaultProps<T, R = void>(defaultParams: CreateModalProps<T, R>) {
   const newFunction: typeof createModal<T, R> = (params) =>
     createModal<T, R>({ ...defaultParams, ...params });

diff --git a/src/createModal/useModalCreation.tsx b/src/createModal/useModalCreation.tsx
@@ -30,48 +30,51 @@ export function useModalCreation<P, Q = void>(
 ] {
   const holderRef = React.useRef<ElementsHolderRef>(null);
 
-  /**
-   * @description Create a one-off modal dialog dynamically without maintenance loading and visible.
-   * @description.zh-CN 动态创建一次性的模态框，不需要维护 loading 和 visible。
-   */
-  function createModal<T, R = void>(params: CreateModalProps<T, R>): CreateModalReturn<T, R> {
-    let _resolve: (value: R | PromiseLike<R>) => void, _reject: (reason?: any) => void;
-    const defered = new Promise<R>((resolve, reject) => {
-      _reject = reject;
-      _resolve = resolve;
-    });
+  const createModal = React.useCallback(
+    /**
+     * @description Create a one-off modal dialog dynamically without maintenance loading and visible.
+     * @description.zh-CN 动态创建一次性的模态框，不需要维护 loading 和 visible。
+     */
+    function createModal<T, R = void>(params: CreateModalProps<T, R>): CreateModalReturn<T, R> {
+      let _resolve: (value: R | PromiseLike<R>) => void, _reject: (reason?: any) => void;
+      const defered = new Promise<R>((resolve, reject) => {
+        _reject = reject;
+        _resolve = resolve;
+      });
 
-    let unmountFunc: Function | undefined;
-    function destory() {
+      let unmountFunc: Function | undefined;
+      function destory() {
+        setTimeout(() => {
+          unmountFunc?.();
+          _reject('destory');
+        });
+      }
+      /**
+       * https://github.com/ant-design/ant-design/issues/23623
+       * Sync render blocks React event. Let's make this async.
+       */
       setTimeout(() => {
-        unmountFunc?.();
-        _reject('destory');
+        unmountFunc = holderRef.current?.patchElement(
+          <TmpComp<T, R>
+            key={`modal-${uuid++}`}
+            afterClose={destory}
+            {...defaultProps}
+            {...params}
+            onOk={(values?: T) => {
+              const Result = params.onOk?.(values);
+              _resolve(Result || (values as R));
+              return Result;
+            }}
+            onCancel={(e) => {
+              params.onCancel?.(e);
+              _reject('cancel');
+            }}
+          />,
+        );
       });
-    }
-    /**
-     * https://github.com/ant-design/ant-design/issues/23623
-     * Sync render blocks React event. Let's make this async.
-     */
-    setTimeout(() => {
-      unmountFunc = holderRef.current?.patchElement(
-        <TmpComp<T, R>
-          key={`modal-${uuid++}`}
-          afterClose={destory}
-          {...defaultProps}
-          {...params}
-          onOk={(values?: T) => {
-            const Result = params.onOk?.(values);
-            _resolve(Result || (values as R));
-            return Result;
-          }}
-          onCancel={(e) => {
-            params.onCancel?.(e);
-            _reject('cancel');
-          }}
-        />,
-      );
-    });
-    return { destory, promise: defered };
-  }
+      return { destory, promise: defered };
+    },
+    [],
+  );
   return [<ElementsHolder key="modal-holder" ref={holderRef} />, createModal];
 }