react如何解决Hooks闭包陷阱解决方案

import { useState } from 'react';

export default function Demo() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      console.log(count); // 永远打印点击时的 count
    }, 3000);
  };

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>

      <button onClick={handleClick}>
        延迟打印
      </button>
    </>
  );
}

count = 0
点击延迟打印
马上点击 +1 -> count=1
3秒后输出：0

setCount(count + 1);
setCount(count + 1);

console.log(count); // +1

setCount(prev => prev + 1);
setCount(prev => prev + 1);

console.log(count); // +2

setInterval(() => {
   setCount(prev => prev + 1);
},1000);

setCount(count + 1); // count 永远旧

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

export default function Demo() {
  const [count, setCount] = useState(0);

  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count;
  }, [count]);

  const handleClick = () => {
    setTimeout(() => {
      console.log(countRef.current);
    }, 3000);
  };

  return (
      <>
          <button onClick={() => setCount(count+1)}>
             +1
          </button>

          <button onClick={handleClick}>
             打印
          </button>
      </>
  );
}

闭包 -> 拿不到最新 state
ref.current -> 永远最新

useEffect(() => {
   getData(id);
}, []);

useEffect(() => {
   getData(id);
}, [id]);

react-hooks/exhaustive-deps

// eslint-disable-next-line

const getUser = useCallback(() => {
    console.log(id);
}, []);

const getUser = useCallback(() => {
    console.log(id);
}, [id]);

useEffect(() => {
   const timer=setInterval(()=>{
      fetchData(page);
   },1000)

   return ()=>clearInterval(timer)
},[])

function useLatest(value){
   const ref=useRef(value);

   useEffect(()=>{
      ref.current=value;
   },[value])

   return ref;
}

const pageRef = useLatest(page);

useEffect(() => {
   const timer = setInterval(() => {
      fetchData(pageRef.current);
   },1000);

   return ()=>clearInterval(timer);
},[])

const onVisit = useEffectEvent(() => {
   console.log(count);
});

useEffect(()=>{
   window.addEventListener('click',onVisit)

   return ()=>{
      window.removeEventListener('click',onVisit)
   }
},[])

需要最新状态：
→ 用 ref

依赖旧状态更新：
→ 用函数式 setState

effect/callback 使用变量：
→ 补全依赖数组

长生命周期回调：
→ useLatest / useRef

React19：
→ useEffectEvent