React Hooks：仅监听单个状态变化并依赖其他状态更新新状态的实现及useEffect依赖警告解决

嘿，作为曾经也在React Hooks依赖问题上踩过坑的开发者，我太懂你的困扰了！你想要只监听stateThatSeldomChange的变化，同时在触发时能拿到最新的stateThatFrequentlyChange，又不想加它到依赖数组里引发不必要的重执行，对吧？下面给你几个靠谱的解决方案：

方案一：用useRef保存频繁变化的状态 #

这是最常用的解决思路，利用useRef的特性——它的current属性可以保存最新值，而且不会触发组件重渲染，也不需要加到useEffect的依赖数组里。

具体步骤：

1. 声明一个ref来存储stateThatFrequentlyChange的最新值
2. 用一个独立的useEffect监听stateThatFrequentlyChange的变化，实时更新ref
3. 在目标useEffect里，通过ref.current获取最新的stateThatFrequentlyChange值

代码示例：

const Parent = (props) => { 
  const frequentStateRef = useRef(stateThatFrequentlyChange);

  // 实时更新ref，保存最新的频繁变化状态
  useEffect(() => {
    frequentStateRef.current = stateThatFrequentlyChange;
  }, [stateThatFrequentlyChange]);

  useEffect(() => { 
    // 这里用ref.current拿到最新的stateThatFrequentlyChange
    let newSomeOtherState = doSomething(frequentStateRef.current, stateThatSeldomChange) 
    setSomeOtherState(newSomeOtherState) 
  }, [stateThatSeldomChange, doSomething]) 
  // 注意：如果doSomething是组件内部定义的函数，需要用useCallback包裹，避免每次渲染都创建新函数，否则还是要加到依赖里

  return <Child data={someOtherState} /> 
}

方案二：合理使用ESLint忽略（谨慎使用） #

如果你非常确定闭包不会导致问题（比如stateThatFrequentlyChange的最新值在useEffect触发时一定能通过其他方式获取，或者这个逻辑对过时值不敏感），可以在警告那一行添加ESLint忽略注释：

useEffect(() => { 
  let newSomeOtherState = doSomething(stateThatFrequentlyChange, stateThatSeldomChange) 
  setSomeOtherState(newSomeOtherState) 
}, [stateThatSeldomChange]) 
// eslint-disable-next-line react-hooks/exhaustive-deps

⚠️ 注意：这只是“绕过”警告，不是“解决”问题，除非你完全清楚闭包的风险，否则不推荐优先用这个方法。

方案三：重构逻辑，用useMemo替代useEffect #

如果someOtherState只是用来计算衍生数据，不需要作为状态存储，那可以直接用useMemo来推导，这样依赖关系会更清晰：

const Parent = (props) => { 
  const someOtherState = useMemo(() => {
    return doSomething(stateThatFrequentlyChange, stateThatSeldomChange)
  }, [stateThatFrequentlyChange, stateThatSeldomChange])

  return <Child data={someOtherState} /> 
}

不过这个方案的前提是你不需要把someOtherState作为状态（比如不需要单独修改它），只是单纯的衍生数据。如果必须用状态存储，那还是回到方案一更合适。

最后再提醒一下：React的依赖警告不是凭空来的，它是为了避免闭包过时导致的bug，所以尽量优先用方案一这种从根源解决问题的方式，而不是直接忽略警告哦～

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