perf: cache effect (#218)

docs/demo/first-render.md

@@ -0,0 +1,8 @@
+---
+title: First Render
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/first-render.tsx"></code>

docs/examples/first-render.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import './basic.less';
+import Button from './components/Button';
+
+const Demo = () => {
+  const renderStart = React.useRef(Date.now());
+  const [renderTime, setRenderTime] = React.useState(0);
+
+  React.useEffect(() => {
+    setRenderTime(Date.now() - renderStart.current);
+  }, []);
+
+  return (
+    <>
+      <p>Render Time: {renderTime}ms</p>
+      {Array(10000)
+        .fill(1)
+        .map((_, key) => (
+          <div key={key}>
+            <Button>Default</Button>
+            <Button type="primary">Primary</Button>
+            <Button type="ghost">Ghost</Button>
+            <Button className="btn-override">Override By ClassName</Button>
+          </div>
+        ))}
+    </>
+  );
+};
+
+export default function App() {
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <div style={{ background: 'rgba(0,0,0,0.1)', padding: 16 }}>
+      <h3>默认情况下不会自动删除添加的样式</h3>
+
+      <label>
+        <input type="checkbox" checked={show} onChange={() => setShow(!show)} />
+        Show Components
+      </label>
+
+      {show && (
+        <div>
+          <Demo />
+        </div>
+      )}
+    </div>
+  );
+}

src/hooks/useGlobalCache.tsx

@@ -13,6 +13,8 @@ export type ExtractStyle<CacheValue> = (
   },
 ) => [order: number, styleId: string, style: string] | null;
 
+const effectMap = new Map<string, boolean>();
+
 export default function useGlobalCache<CacheType>(
   prefix: string,
   keyPath: KeyType[],
@@ -84,7 +86,15 @@ export default function useGlobalCache<CacheType>(
       // which will clear cache on the first time.
       buildCache(([times, cache]) => {
         if (polyfill && times === 0) {
-          onCacheEffect?.(cacheContent);
+          if (!effectMap.has(fullPathStr)) {
+            onCacheEffect?.(cacheContent);
+            effectMap.set(fullPathStr, true);
+
+            // 微任务清理缓存，可以认为是单次 batch render 中只触发一次 effect
+            Promise.resolve().then(() => {
+              effectMap.delete(fullPathStr);
+            });
+          }
         }
         return [times + 1, cache];
       });
@@ -97,6 +107,7 @@ export default function useGlobalCache<CacheType>(
           if (nextCount === 0) {
             // Always remove styles in useEffect callback
             register(() => {
+              effectMap.delete(fullPathStr);
               // With polyfill, registered callback will always be called synchronously
               // But without polyfill, it will be called in effect clean up,
               // And by that time this cache is cleaned up.

tests/animation.spec.tsx

@@ -179,7 +179,7 @@ describe('animation', () => {
     });
   });
 
-  it('re-mount should not missing animation style', () => {
+  it('re-mount should not missing animation style', async () => {
     function genComp(cls: string) {
       return () => {
         const [token, hashId] = useCacheToken(theme, [baseToken], {
@@ -210,6 +210,8 @@ describe('animation', () => {
     // Clean up
     document.head.innerHTML = '';
 
+    await Promise.resolve();
+
     // Render again
     render(
       <StyleProvider cache={createCache()}>