React中闭包陷阱的几种情及解决方案

function f1(){
    var num = 10,
    function f2(){
        alert(num)  // 10
    }
}

 const [num, setNum] = useState(0)
  const jia = () => {
    setNum(num + 1)
    console.log(num);
  }
  return (
    <div>
      <h1>{num}</h1>
      <button onClick={() => jia()}>点我+1</button>
    </div>
  )

const [num, setNum] = useState(0)
  const numRef = useRef()
  const jia = () => {
    setNum(num + 1)
    setTimeout(() => {  //模拟异步操作
      console.log(numRef.current.innerText);
    }, 0)
  }
  return (
    <div>
      <h1 ref={numRef}>{num}</h1>
      <button onClick={() => jia()}>点我+1</button>
    </div>
  )

const [num, setNum] = useState(0)
 
  useEffect(() => {
    setInterval(() => {
      setNum(num + 1)
    }, 1000)
  }, [])
 
  return (
    <div>
      <h1>{num}</h1>
    </div>
  )

const [num, setNum] = useState(0)
 
  useEffect(() => {
    let time = setInterval(() => {
      setNum(num + 1)
      clearInterval(time)
    }, 1000)
  }, [num])
 
  return (
    <div>
      <h1>{num}</h1>
    </div>
  )