Merge pull request #1641 from sheinsight/perf/table-prevent-rerender-on-visibility-change

perf(table): prevent unnecessary re-render on visibility change

Author: saint3347

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sheinx",
   "private": true,
-  "version": "3.9.10-beta.5",
+  "version": "3.9.10-beta.6",
   "description": "A react library developed with sheinx",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

packages/hooks/src/common/use-resize/index.ts

@@ -15,7 +15,7 @@ export const useResize = (props: UseResizeProps) => {
   useEffect(() => {
     if (!targetRef.current) return;
     const el = targetRef.current;
-    if (el) {
+    if (el && el.offsetParent !== null) {
       setWidth(el.clientWidth);
       setHeight(el.clientHeight);
     }

packages/hooks/src/utils/dom/element.tsx

@@ -41,39 +41,35 @@ export const addResizeObserver = (
 ) => {
   const { direction, timer } = options;
   const [debounceHandler, cleanTimer] = debounce(handler, timer);
-  let h = debounceHandler;
-  let lastWidth: number;
-  let lastHeight: number;
+  let lastWidth: number = el.clientWidth;
+  let lastHeight: number = el.clientHeight;
   if (window.ResizeObserver) {
-    if (direction) {
-      lastWidth = el.clientWidth;
-      lastHeight = el.clientHeight;
-      h = (entry: { contentRect: { width: number; height: number } }[]) => {
-        if (el?.offsetParent === null) {
-          options.lazy && el.setAttribute('data-observer-hidden', 'true');
-          return;
-        }
+    const h = (entry: { contentRect: { width: number; height: number } }[]) => {
+      const { width, height } = entry[0].contentRect;
+      // 元素不可见（display:none）时跳过：offsetParent 为 null 且尺寸为 0
+      if (el?.offsetParent === null && !width && !height) {
+        options.lazy && el.setAttribute('data-observer-hidden', 'true');
+        return;
+      }
 
-        if (options.lazy && el.getAttribute('data-observer-hidden') === 'true') {
-          el.removeAttribute('data-observer-hidden');
-          return;
+      if (options.lazy && el.getAttribute('data-observer-hidden') === 'true') {
+        el.removeAttribute('data-observer-hidden');
+        return;
+      }
+      if (width && direction === 'x') {
+        if (lastWidth !== width) {
+          debounceHandler(entry);
         }
-        const { width, height } = entry[0].contentRect;
-        if (width && direction === 'x') {
-          if (lastWidth !== width) {
-            debounceHandler(entry);
-          }
-        } else if (direction === 'y') {
-          if (height && lastHeight !== height) {
-            debounceHandler(entry);
-          }
-        } else if (lastWidth !== width || lastHeight !== height) {
-          debounceHandler(entry, { x: lastWidth !== width, y: lastHeight !== height });
+      } else if (direction === 'y') {
+        if (height && lastHeight !== height) {
+          debounceHandler(entry);
         }
-        lastWidth = width;
-        lastHeight = height;
-      };
-    }
+      } else if (lastWidth !== width || lastHeight !== height) {
+        debounceHandler(entry, { x: lastWidth !== width, y: lastHeight !== height });
+      }
+      lastWidth = width;
+      lastHeight = height;
+    };
     let observer: ResizeObserver | null = new ResizeObserver(h as ResizeObserverCallback);
     observer.observe(el);
     return () => {

packages/shineout/src/table/__doc__/changelog.cn.md

@@ -1,3 +1,8 @@
+## 3.9.10-beta.6
+2026-03-04
+### 🚀 Performance
+- 优化 `Table` 在祖先元素 `display:none` 后恢复显示时不再触发多余的重新渲染 ([#1641](https://github.com/sheinsight/shineout-next/pull/1641))
+
 ## 3.9.10-beta.2
 2026-02-28
 ### 💎 Enhancement