如何在React中实现自定义Hook进行窗口尺寸追踪

发布时间：2024-06-17 15:07:47 来源：亿速云阅读：95 作者：小樊栏目：web开发

在React中实现自定义Hook进行窗口尺寸追踪可以通过以下步骤实现：

创建一个新的文件，命名为useWindowSize.js，并在该文件中编写自定义Hook的逻辑：

import { useState, useEffect } from 'react';

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  useEffect(() => {
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowSize;
};

export default useWindowSize;

在需要使用窗口尺寸的组件中引入该自定义Hook，并调用它：

import React from 'react';
import useWindowSize from './useWindowSize';

const App = () => {
  const windowSize = useWindowSize();

  return (
    <div>
      <p>Window width: {windowSize.width}</p>
      <p>Window height: {windowSize.height}</p>
    </div>
  );
};

export default App;

现在，当组件渲染时，自定义Hook会追踪窗口尺寸的变化，并在窗口大小发生变化时更新组件的状态，从而实现窗口尺寸的追踪。

向AI问一下细节

如何在React中实现自定义Hook进行窗口尺寸追踪

猜你喜欢

最新资讯

相关推荐

相关标签