快捷導(dǎo)航

React中使用ResizeObserver來(lái)觀察元素size變化的方法

更新時(shí)間：2024年12月25日 10:51:33 作者：迷途小碼農(nóng)零零發(fā)

在 React 中使用 ResizeObserver 來(lái)觀察元素的大小變化,可以通過(guò)創(chuàng)建一個(gè)自定義 Hook 來(lái)封裝 ResizeObserver 的邏輯,并在組件中使用這個(gè) Hook,以下是一個(gè)完整的示例,展示了如何在 React 中使用 ResizeObserver 來(lái)觀察元素的大小變化,需要的朋友可以參考下

前言

在 React 中使用 ResizeObserver 來(lái)觀察元素的大小變化，可以通過(guò)創(chuàng)建一個(gè)自定義 Hook 來(lái)封裝 ResizeObserver 的邏輯，并在組件中使用這個(gè) Hook。以下是一個(gè)完整的示例，展示了如何在 React 中使用 ResizeObserver 來(lái)觀察元素的大小變化。

自定義 Hook

首先，創(chuàng)建一個(gè)自定義 Hook 來(lái)封裝 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;

解釋

useResizeObserver Hook：創(chuàng)建一個(gè)自定義 Hook，返回一個(gè) ref 和元素的大小。
useState：用于存儲(chǔ)元素的大小。
useRef：用于引用要觀察的元素。
useEffect：在組件掛載時(shí)創(chuàng)建 ResizeObserver 實(shí)例，并在組件卸載時(shí)清理觀察器。
resizeObserver.observe：開始觀察元素的大小變化。
resizeObserver.unobserve 和 resizeObserver.disconnect：停止觀察元素的大小變化并斷開觀察器。

使用自定義 Hook

在組件中使用這個(gè)自定義 Hook 來(lái)觀察元素的大小變化：

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;