如何使用 new ResizeObserver 并正确取消监听以避免内存泄漏？

Question

如何正确使用 ResizeObserver 并避免内存泄漏？ 在现代前端开发中，ResizeObserver 是一个强大的工具，用于监听元素尺寸变化。然而，如果不正确取消监听，可能会导致内存泄漏。例如，当组件卸载时，若未清理观察者，相关对象将无法被垃圾回收。 常见问题：在 React 中使用 ResizeObserver 时，忘记在组件卸载时调用 observer.disconnect()，导致旧组件的引用一直存在。正确的做法是在 useEffect 的返回值中添加清理逻辑，确保组件销毁时移除所有观察目标。 解决方法：始终在不再需要 ResizeObserver 时调用 disconnect() 方法，或使用 unobserve(target) 移除特定目标。通过良好的生命周期管理，可以有效避免内存泄漏问题。 你是否遇到过类似问题？如何优化 ResizeObserver 的使用？

Answer 1

1. ResizeObserver 的基本使用

在前端开发中，ResizeObserver 是一个用于监听 DOM 元素尺寸变化的 API。它的基本用法非常简单，只需创建一个 ResizeObserver 实例，并调用其 observe 方法来监听目标元素。

const observer = new ResizeObserver((entries) => {
    for (let entry of entries) {
        console.log('Element size:', entry.contentRect);
    }
});

observer.observe(document.querySelector('#my-element'));
    

然而，在实际项目中，特别是在 React 或 Vue 等框架中使用时，需要特别注意内存管理问题。

2. 常见问题：内存泄漏

如果在组件卸载或页面切换时未正确清理 ResizeObserver，可能会导致内存泄漏。例如，在 React 中：

• 组件卸载后，观察者仍然保持对已卸载组件中 DOM 元素的引用。
• 这会导致垃圾回收机制无法释放这些对象，从而占用内存。

以下是一个典型的错误示例：

useEffect(() => {
    const observer = new ResizeObserver((entries) => {
        // 处理逻辑
    });
    observer.observe(ref.current);
}, []);
    

在这个例子中，缺少清理逻辑，观察者不会被移除。

3. 解决方案：生命周期管理

为避免上述问题，必须在组件卸载时清理 ResizeObserver。以下是优化后的代码示例：

useEffect(() => {
    const observer = new ResizeObserver((entries) => {
        for (let entry of entries) {
            console.log('Element size:', entry.contentRect);
        }
    });

    if (ref.current) {
        observer.observe(ref.current);
    }

    return () => {
        observer.disconnect();
    };
}, []);
    

通过在 useEffect 的返回值中调用 disconnect()，可以确保组件销毁时移除所有观察目标。

4. 高级优化：按需清理

除了 disconnect() 清理所有目标外，还可以使用 unobserve(target) 来移除特定目标。这种做法更适合复杂场景，例如动态添加和移除多个观察目标。

方法	描述
disconnect()	停止观察所有目标
unobserve(target)	仅停止观察指定目标

下面是一个按需清理的示例：

function handleRemoveTarget(element) {
    observer.unobserve(element);
}
    

5. 流程图：ResizeObserver 生命周期管理

sequenceDiagram
        participant Component
        participant Observer
        Component->>Observer: create and observe
        Component->>Observer: update logic
        Component->>Observer: disconnect on unmount

通过流程图可以看出，正确的生命周期管理是避免内存泄漏的关键。