求助：移动端视图下移除ReactJs组件中指定初始化函数

核心思路 #

通过监听窗口宽度变化，判断当前是否处于移动端视图，动态决定执行目标函数并清理另一个函数的副作用（如果存在）。下面提供两种实用实现方案：

方案1：监听窗口 resize 事件 #

适合需要自定义阈值的场景，逻辑直观易调整。

import { useState, useEffect } from 'react';

const MyComponent = () => {
  // 自定义移动端宽度阈值，可根据需求修改
  const MOBILE_THRESHOLD = 768;
  const [isMobileView, setIsMobileView] = useState(false);

  // 移动端保留的函数
  const funcA = () => {
    console.log('执行移动端专属逻辑');
    // 此处添加你的移动端业务代码，比如初始化移动端导航、适配布局等
  };

  // 桌面端需要移除的函数
  const funcB = () => {
    console.log('执行桌面端专属逻辑');
    // 此处添加你的桌面端业务代码，比如初始化大屏图表、侧边栏展开逻辑等
  };

  // 清理函数：处理函数的副作用（如定时器、事件监听），避免内存泄漏
  const cleanupFunc = (target) => {
    if (target === 'B') {
      // 示例：清除funcB创建的定时器
      // clearTimeout(funcBTimer);
      console.log('清理funcB的副作用');
    }
    if (target === 'A') {
      // 同理处理funcA的副作用
      console.log('清理funcA的副作用');
    }
  };

  // 判断当前窗口是否为移动端
  const checkMobileStatus = () => {
    setIsMobileView(window.innerWidth < MOBILE_THRESHOLD);
  };

  // 初始化监听窗口尺寸变化
  useEffect(() => {
    checkMobileStatus();
    window.addEventListener('resize', checkMobileStatus);

    // 组件卸载时移除监听并清理所有副作用
    return () => {
      window.removeEventListener('resize', checkMobileStatus);
      cleanupFunc('A');
      cleanupFunc('B');
    };
  }, []);

  // 根据视图类型切换执行函数
  useEffect(() => {
    if (isMobileView) {
      cleanupFunc('B'); // 先清理桌面端函数的副作用
      funcA();
    } else {
      cleanupFunc('A'); // 先清理移动端函数的副作用
      funcB();
    }

    // 视图切换时清理上一次执行函数的副作用
    return () => {
      isMobileView ? cleanupFunc('A') : cleanupFunc('B');
    };
  }, [isMobileView]);

  return <div>业务组件内容</div>;
};

export default MyComponent;

方案2：使用 matchMedia 媒体查询监听 #

比resize监听更高效，仅在媒体查询状态变化时触发回调，适合遵循标准响应式断点的场景。

import { useState, useEffect } from 'react';

const MyComponent = () => {
  // 定义移动端媒体查询规则，可根据需求修改断点
  const mobileQuery = window.matchMedia('(max-width: 767px)');
  const [isMobileView, setIsMobileView] = useState(mobileQuery.matches);

  const funcA = () => {
    console.log('执行移动端专属逻辑');
  };

  const funcB = () => {
    console.log('执行桌面端专属逻辑');
  };

  const cleanupFunc = (target) => {
    if (target === 'B') {
      // 清理funcB的副作用，比如移除事件监听
      // window.removeEventListener('scroll', funcBScrollHandler);
      console.log('清理funcB的副作用');
    }
    if (target === 'A') {
      console.log('清理funcA的副作用');
    }
  };

  useEffect(() => {
    // 媒体查询状态变化的回调
    const handleMediaChange = (e) => {
      setIsMobileView(e.matches);
    };

    mobileQuery.addEventListener('change', handleMediaChange);
    // 初始化时执行对应函数
    isMobileView ? funcA() : funcB();

    // 组件卸载时移除监听并清理副作用
    return () => {
      mobileQuery.removeEventListener('change', handleMediaChange);
      cleanupFunc('A');
      cleanupFunc('B');
    };
  }, []);

  useEffect(() => {
    if (isMobileView) {
      cleanupFunc('B');
      funcA();
    } else {
      cleanupFunc('A');
      funcB();
    }

    return () => {
      isMobileView ? cleanupFunc('A') : cleanupFunc('B');
    };
  }, [isMobileView]);

  return <div>业务组件内容</div>;
};

export default MyComponent;

注意事项 #

• 若函数包含异步操作、定时器、DOM事件监听等副作用，必须在cleanupFunc中处理，避免内存泄漏
• 可根据业务需求调整移动端宽度阈值或媒体查询规则
• 如果函数需要频繁执行（不推荐），可添加防抖逻辑优化性能

内容的提问来源于stack exchange，提问作者Sahil Mangukiya