React hooks：useEffect额外渲染如何减少

Question

参考如下代码：

const [count1,setCount1] = useState(0);
const [count2,setCount2] = useState(0);

useEffect(() => {
    if(onlyCount1IsChanged){
        doStuff(count1, count2)
    }
},[count1, count2])

我想要在useEffect中使用最新的count1, count2，但是我只希望监听count1的变化，才执行useEffect。如何实现？

ps：不希望把count2存为ref，因为可能会有监听count2的useEffect：

useEffect(() => {
    if(onlyCount2IsChanged){
        doStuff2(count2)
    }
},[count2])

Answer 1

useEffect(() => {
    if(onlyCount2IsChanged){
        doStuff2(count2.current)
    }
},[count2.current])

存为ref也能监听啊

---

const [count1, setCount1] = useState(0);
const count2 = useRef(0);
const [total, setTotal] = useState(0);

//如果不添加count2，total=count1 + oldCount2
//如果添加的话，count2变化时，也会更新total值
useEffect(() => {
  setTotal(count1 + count2.current)
},[count1])

return (
   <div> 
        <span>{total}</span>
        <Button onClick={()=>{setCount1(i=>i+1)}}>btn1</Button>,
        <Button onClick={()=>{count2.current++}}>btn2</Button>
   </div>
)

感觉不需要useEffect

const count1 = useRef(0);
const count2 = useRef(0);
const [total, setTotal] = useState(0);


return (
   <div> 
        <span>{total}</span>
        <Button onClick={()=>{count1.current++;setTotal(count1.current+count2.current);}}>btn1</Button>,
        <Button onClick={()=>{count2.current++}}>btn2</Button>
   </div>
)