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

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

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

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

import React, { useState, useEffect } from 'react';

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

const [windowWidth, setWindowWidth] = useState(window.innerWidth);

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

useEffect(() => {
  const handleResize = () => {
    setWindowWidth(window.innerWidth);
  };

  window.addEventListener('resize', handleResize);

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

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

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

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

return (
  <div>
    <p>当前窗口宽度：{windowWidth}px</p>
  </div>
);

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

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

• 腾讯云云服务器（CVM）
• 腾讯云云函数（SCF）
• 腾讯云云开发（CloudBase）
• 腾讯云云存储（COS）
• 腾讯云人工智能（AI）
• 腾讯云物联网（IoT）
• 腾讯云区块链（BCG）
• 腾讯云游戏多媒体处理（MPS）