React中useEffect含多个依赖时如何仅响应首个更新忽略其余依赖变更？

原生useEffect不能直接实现该需求，需要结合具体场景做额外处理。

首先明确React的默认行为：React 18 已经支持自动批量更新，如果你是在React管控的场景（比如组件事件回调、Hook同步逻辑）下同步修改a、b、c三个状态，这些变更会被合并为一次重渲染，对应的useEffect只会执行一次，这种场景你不需要做任何额外处理。
只有当状态变更发生在React管控之外的异步场景（比如setTimeout回调、原生DOM事件监听、Promise链式回调里的多次setState），才会触发多次重渲染，导致useEffect重复执行。

针对需要处理的场景，有几个常用的实现方案：

• 防抖封装（请求类场景首选）
  给useEffect的回调加短时长防抖，只要所有依赖变更都落在防抖时间窗口内，就只会触发一次执行，适配性最高：

  useEffect(() => {
    // 防抖时长可根据业务调整，100-300ms基本可以覆盖所有同步变更的时间间隔
    const timer = setTimeout(() => {
      // 你原有发送数据库请求的逻辑
    }, 200)
    return () => clearTimeout(timer)
  }, [a, b, c])
  

• 自定义触发规则过滤
  用ref存储上一次的依赖值和执行锁，按需过滤不需要的执行场景：

  // 存储上一次的依赖值
  const prevDepsRef = useRef({a, b, c})
  // 执行锁，避免短时间重复执行
  const execLockRef = useRef(false)
  
  useEffect(() => {
    // 锁生效时直接跳过执行
    if (execLockRef.current) return
    // 加锁200ms
    execLockRef.current = true
    setTimeout(() => execLockRef.current = false, 200)
  
    // 也可以自定义变更校验规则，比如仅单个依赖变更时才执行
    // const changedCount = [a !== prevDepsRef.current.a, b !== prevDepsRef.current.b, c !== prevDepsRef.current.c].filter(Boolean).length
    // if (changedCount > 1) return
  
    // 原有业务逻辑
    prevDepsRef.current = {a, b, c}
  }, [a, b, c])
  

• 合并状态变更
  如果a、b、c的修改逻辑可控，你可以把三者合并为同一个状态对象，更新时一次性修改所有属性，从根源上避免多依赖分批变更的问题：

  // 合并三个参数为同一个状态
  const [params, setParams] = useState({a: '', b: '', c: ''})
  // 修改时一次性更新所有字段
  setParams(prev => ({...prev, a: 'newA', b: 'newB', c: 'newC'}))
  
  useEffect(() => {
    // 数据库请求逻辑
  }, [params])
  

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