react中使用ResizeObserver来观察元素的size变化

在 React 中使用 ResizeObserver 来观察元素的大小变化，可以通过创建一个自定义 Hook 来封装 ResizeObserver 的逻辑，并在组件中使用这个 Hook。以下是一个完整的示例，展示了如何在 React 中使用 ResizeObserver 来观察元素的大小变化。

自定义 Hook

首先，创建一个自定义 Hook 来封装 ResizeObserver 的逻辑：

import { useEffect, useRef, useState } from 'react';const useResizeObserver = () => {const [size, setSize] = useState({ width: 0, height: 0 });const elementRef = useRef(null);useEffect(() => {const resizeObserver = new ResizeObserver(entries => {for (let entry of entries) {setSize({width: entry.contentRect.width,height: entry.contentRect.height});}});if (elementRef.current) {resizeObserver.observe(elementRef.current);}return () => {if (elementRef.current) {resizeObserver.unobserve(elementRef.current);}resizeObserver.disconnect();};}, []);return [elementRef, size];
};export default useResizeObserver;

解释

1. useResizeObserver Hook：创建一个自定义 Hook，返回一个 ref 和元素的大小。
2. useState：用于存储元素的大小。
3. useRef：用于引用要观察的元素。
4. useEffect：在组件挂载时创建 ResizeObserver 实例，并在组件卸载时清理观察器。
5. resizeObserver.observe：开始观察元素的大小变化。
6. resizeObserver.unobserve 和 resizeObserver.disconnect：停止观察元素的大小变化并断开观察器。

使用自定义 Hook

在组件中使用这个自定义 Hook 来观察元素的大小变化：

import React from 'react';
import useResizeObserver from './useResizeObserver';const MyComponent = () => {const [elementRef, size] = useResizeObserver();return (<div><div ref={elementRef} style={{ width: '50%', height: '200px', backgroundColor: 'lightblue' }}>Resize me!</div><p>Width: {size.width}px</p><p>Height: {size.height}px</p></div>);
};export default MyComponent;

解释

1. useResizeObserver Hook：在组件中调用自定义 Hook，获取 ref 和元素的大小。
2. ref 属性：将 ref 赋值给要观察的元素。
3. 显示元素的大小：在组件中显示元素的宽度和高度。