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

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

自定义 Hook

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

javascript 复制代码
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 来观察元素的大小变化:

javascript 复制代码
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. 显示元素的大小:在组件中显示元素的宽度和高度。
相关推荐
訾博ZiBo30 分钟前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI30 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
IT_陈寒32 分钟前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪10042 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手44 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ1 小时前
python面向对象
前端·数据库·python
长空任鸟飞_阿康1 小时前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii3581 小时前
快速学完React计划(第一天)
前端·react.js·前端框架
liangshanbo12151 小时前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript