feat: getRectByTaro 方法在小程序内增加缓存以提升性能

522109452 · 522109452 · commit f33e4e9fc39f · 2024-12-05T16:03:34.000+08:00
diff --git a/package.json b/package.json
@@ -105,7 +105,8 @@
     "classnames": "^2.5.1",
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "quick-lru": "^4.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
diff --git a/src/utils/get-rect-by-taro.ts b/src/utils/get-rect-by-taro.ts
@@ -1,6 +1,9 @@
 import { createSelectorQuery } from '@tarojs/taro'
+import QuickLRU from 'quick-lru'
 import { getRect, inBrowser } from './use-client-rect'
 
+const lru = new QuickLRU({ maxSize: 10 })
+
 export interface Rect {
   dataset: Record<string, any>
   id: string
@@ -30,10 +33,16 @@ export const getRectByTaro = async (element: any): Promise<Rect> => {
     }
     // 小程序下的逻辑
     return new Promise((resolve, reject) => {
+      if (lru.has(element)) {
+        resolve(lru.get(element) as Rect)
+      }
       createSelectorQuery()
         .select(`#${element.uid}`)
         .boundingClientRect()
         .exec(([rects]) => {
+          if (rects) {
+            lru.set(element, rects)
+          }
           resolve(rects)
         })
     })
