如何判断useEffect的触发源，实现差异化条件执行逻辑？

可以通过 useRef 跟踪状态的上一次值，在单个 useEffect 里精准判断触发源，同时控制组件首次挂载时不执行逻辑，完美匹配你的需求：

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

const YourComponent = () => {
  const [currentTab, setCurrentTab] = useState('open');
  const [searchParams, setSearchParams] = useState('');
  // 跟踪上一次的状态值
  const prevCurrentTabRef = useRef(currentTab);
  const prevSearchParamsRef = useRef(searchParams);
  // 标记是否是首次挂载
  const isMounted = useRef(false);

  useEffect(() => {
    // 首次挂载时直接返回，不执行任何逻辑
    if (!isMounted.current) {
      isMounted.current = true;
      return;
    }

    // 判断是否由 currentTab 变化触发
    if (prevCurrentTabRef.current !== currentTab) {
      prevCurrentTabRef.current = currentTab;
      if (condition) { // 替换成你的实际判断条件
        // 执行 currentTab 触发时的逻辑
        // useEffect logic
      }
    } 
    // 判断是否由 searchParams 变化触发（两者同时变化时优先执行searchParams逻辑）
    else if (prevSearchParamsRef.current !== searchParams) {
      prevSearchParamsRef.current = searchParams;
      // 直接执行 searchParams 触发时的逻辑
      // useEffect logic
    }
  }, [currentTab, searchParams, condition]); // 注意将 condition 加入依赖数组

  // 组件其他逻辑...
  return <div>Your Component</div>;
};

关键说明： #

• 用 prevCurrentTabRef 和 prevSearchParamsRef 记录状态的上一次值，对比当前值就能确定是哪个状态变化导致了 useEffect 执行
• isMounted ref 用来跳过首次挂载时的执行，解决拆分多个 useEffect 时挂载触发的问题
• 如果你的 condition 是依赖其他状态或 props 的值，一定要加入依赖数组；如果是静态判断，可以忽略

内容的提问来源于stack exchange，提问作者Joe Hill