react监听浏览器窗口大小

在 React 中，你可以使用 `useEffect` Hook 来监听浏览器窗口大小的变化。具体来说，你可以按照下面的步骤来实现：

1. 在函数组件中引入 `useEffect` Hook：

   import React, { useEffect } from 'react';

2. 在组件内部编写一个处理函数，用于处理窗口大小变化时的逻辑：

   function handleResize() {
     // 处理逻辑
   }

3. 使用 `useEffect` Hook 监听浏览器窗口大小变化，并在组件卸载时清除监听器：

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

在这个例子中，我们使用了空数组 `[]` 作为 `useEffect` 的第二个参数，这意味着我们只想在组件挂载时添加事件监听器，并在组件卸载时进行清理操作，因此我们传递一个空数组作为依赖项，表示该 `useEffect` 只会在组件挂载和卸载时执行。

完整的代码示例：

import React, { useEffect } from 'react';

function MyComponent() {
  function handleResize() {
    // 处理逻辑
  }

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

  return <div>My Component</div>;
}

export default MyComponent;