feat: 组件卸载添加resolve promise逻辑，防止内存泄漏

IVLIU · Oct 20, 2023 · bf42511 · bf42511
1 parent d598623
commit bf42511
Show file tree

Hide file tree

Showing 11 changed files with 22 additions and 11 deletions.
diff --git a/.parcel-cache/2ecb2ae785209a77 b/.parcel-cache/2ecb2ae785209a77
diff --git a/.parcel-cache/599de3244968e517 b/.parcel-cache/599de3244968e517
diff --git a/.parcel-cache/5ab0f72e1c03aae5.txt b/.parcel-cache/5ab0f72e1c03aae5.txt
@@ -0,0 +1,2 @@
+62893699
+1697783164607299000
diff --git a/.parcel-cache/a9f5484dda8bfe2c b/.parcel-cache/a9f5484dda8bfe2c
diff --git a/.parcel-cache/c18ce38693a82912 b/.parcel-cache/c18ce38693a82912
diff --git a/.parcel-cache/data.mdb b/.parcel-cache/data.mdb
diff --git a/.parcel-cache/lock.mdb b/.parcel-cache/lock.mdb
diff --git a/example/index.html b/example/index.html
@@ -9,6 +9,6 @@
 
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>
diff --git a/example/index.tsx b/example/index.tsx
@@ -11,12 +11,16 @@ const Count = () => {
 
 const App = () => {
   const [visible, setVisible] = React.useState(false);
+  const [destroy, setDestroy] = React.useState(false);
   return (
     <div>
-      <button onClick={() => setVisible(!visible)}>{visible}</button>
-      <Offscreen mode={visible ? 'visible' : 'hidden'}>
-        <Count />
-      </Offscreen>
+      <button onClick={() => setVisible(!visible)}>{visible ? 'hidden' : 'show'}</button>
+      <button onClick={() => setDestroy(true)}>destroy</button>
+      {!destroy && (
+        <Offscreen mode={visible ? 'visible' : 'hidden'}>
+          <Count />
+        </Offscreen>
+      )}
     </div>
   );
 };

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/Repeater.tsx b/src/Repeater.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import type { FC, ReactNode } from 'react';
 
 export const Repeater: FC<{
@@ -9,11 +9,16 @@ export const Repeater: FC<{
   const { mode, children } = props;
   // refs
   const resolveRef = useRef<() => void>();
-  // destroy promise
-  if (resolveRef.current) {
-    resolveRef.current();
-    resolveRef.current = void 0;
+  // methods
+  const resolvePromise = () => {
+    if (typeof resolveRef.current === 'function') {
+      resolveRef.current();
+      resolveRef.current = void 0;
+    }
   }
+  resolvePromise();
+  // effect
+  useEffect(() => resolvePromise, []);
   if (mode === 'hidden') {
     throw new Promise<void>((resolve) => (resolveRef.current = resolve));
   }