屏幕尺寸改变时触发useEffect_js 屏幕尺寸改变_仅在屏幕尺寸> 720时触发滚动功能 - 腾讯云开发者社区

基础概念

useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用操作。它可以模拟类组件中的生命周期方法，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

类型

useEffect 接受两个参数：

effect：一个函数，用于执行副作用操作。
dependencies：一个数组，包含 effect 所依赖的状态或 props。

应用场景

当需要在组件挂载、更新或卸载时执行某些操作时，可以使用 useEffect。例如，数据获取、订阅、手动更改 DOM 等。

屏幕尺寸改变时触发 `useEffect`

要在屏幕尺寸改变时触发 useEffect，可以将 window.innerWidth 或 window.innerHeight 作为依赖项。

示例代码

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

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

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

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行

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

export default App;

遇到的问题及解决方法

问题：`useEffect` 在每次渲染时都执行

原因：useEffect 的依赖项数组为空，导致它在每次渲染时都执行。

解决方法：将需要监听的状态或 props 添加到依赖项数组中。

useEffect(() => {
  // 副作用操作
}, [dependency]);

问题：内存泄漏

原因：在 useEffect 中添加了事件监听器，但没有在组件卸载时移除。

解决方法：在 useEffect 的返回函数中移除事件监听器。

useEffect(() => {
  const handleResize = () => {
    // 处理 resize 事件
  };

  window.addEventListener('resize', handleResize);

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