React -- useSize Hook 封装

React -- useSize Hook 封装

在开发React应用时,经常需要响应元素尺寸的变化,以提供更好的用户体验。本文将介绍如何封装一个自定义的useSize Hook,它可以监听某个元素的大小变化并返回其宽高。

背景知识

在React中,自定义Hook是一种重用状态逻辑的机制。useSize Hook将返回所观察元素的宽度和高度。

使用useState和useLayoutEffect

引入useStateuseLayoutEffect钩子。useState用来存储元素的宽度和高度,而useLayoutEffect用来订阅尺寸变化。

响应尺寸变化

通过ResizeObserver API,可以监听元素尺寸的变化。当被监听元素尺寸发生变化时,ResizeObserver将执行一个回调函数,在这个回调函数中,用setState更新元素的尺寸信息。

清理工作

为了避免内存泄漏,需要在useLayoutEffect的清理函数中断开ResizeObserver的监听。

完整的 Hook 实现

下面是useSize Hook 的完整代码实现:

jsx 复制代码
import { useState, useLayoutEffect } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

function useSize(target) {
  const [state, setState] = useState(() => {
    return {
      width: target ? target.clientWidth : 0,
      height: target ? target.clientHeight : 0,
    };
  });

  useLayoutEffect(() => {
    if (!target) {
      return () => {};
    }

    const resizeObserver = new ResizeObserver(entries => {
      entries.forEach(entry => {
        setState({
          width: entry.target.clientWidth,
          height: entry.target.clientHeight,
        });
      });
    });

    resizeObserver.observe(target);

    return () => {
      resizeObserver.disconnect();
    };
  }, [typeof target === 'function' ? undefined : target]);

  return state;
}

export default useSize;

这个Hook将返回一个包含widthheight属性的对象,且会在被观察元素的尺寸变化时更新这两个属性。结合实际情况,你可以很容易地将这个Hook集成到你的React组件中。

使用方式

你可以在组件中调用useSize,并传递一个DOM元素引用(ref)作为参数。这个Hook将返回该元素的宽度和高度。

jsx 复制代码
  const chartRef = useRef(null);
  const size = useSize(chartRef.current);

小结

useSize Hook 提供了一种简洁而又高效的方式来监听和响应React元素的尺寸变化。使用这种模式可以减少冗余代码,并提高组件的可维护性。

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试