首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React Hook -仅监听窗口*宽度*大小的更改

React Hook是React框架中引入的一种新的函数组件编写方式。它允许开发者在不使用类组件的情况下,使用状态和其他React特性。

在React Hook中,可以使用useState Hook来定义状态,以及useEffect Hook来处理副作用。针对监听窗口宽度大小的更改,可以使用useEffect Hook结合window对象的resize事件来实现。

首先,我们需要导入useState和useEffect两个Hook函数:

代码语言:txt
复制
import React, { useState, useEffect } from 'react';

接下来,在函数组件中使用useState来定义窗口宽度状态变量和更新函数:

代码语言:txt
复制
const [windowWidth, setWindowWidth] = useState(window.innerWidth);

然后,使用useEffect来订阅window对象的resize事件,并在事件回调函数中更新窗口宽度状态:

代码语言:txt
复制
useEffect(() => {
  const handleResize = () => {
    setWindowWidth(window.innerWidth);
  };

  window.addEventListener('resize', handleResize);

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

在useEffect的第一个参数中,我们传入一个回调函数,这个回调函数会在组件渲染时执行一次,以及window.innerWidth发生变化时执行。在回调函数中,我们定义了一个handleResize函数,用于更新窗口宽度状态。

在useEffect的第二个参数中,我们传入一个空数组,表示只在组件的初始渲染时执行一次,而不依赖任何其他依赖项。这样可以避免重复订阅和取消订阅resize事件。

最后,我们可以在组件中使用windowWidth状态来根据窗口宽度的变化来做出相应的响应:

代码语言:txt
复制
return (
  <div>
    <p>当前窗口宽度:{windowWidth}px</p>
  </div>
);

这样,我们就可以实现监听窗口宽度大小的更改了。

关于腾讯云相关产品和产品介绍链接地址,建议参考腾讯云官方文档,其中可能包括但不限于:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券