useRef

1. 通过countRef.current解决capture value的现象

countRef.current可以理解为组件内的一个变量,在任何地方都可以访问到
而state是存在capture value，不一定能访问到最新状态

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

const Fetch = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(count + 1)
    }, 500)
    return () => clearTimeout(timer)
  },[count])

  return (
    <div>
      count: {count}
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Fetch />
    </div>
  )
}

export default App

2. 获取dom

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

const Fetch = () => {
  const [count, setCount] = useState(0)
  const btnRef = useRef(null)

  useEffect(() => {
    const handleOnclick = () => {
      setCount(count + 1)
    }
    btnRef.current.addEventListener('click', handleOnclick,false)
    return () => {
      btnRef.current.removeEventListener('click', handleOnclick,false)
    }
  }, [count])

  return (
    <div>
      count: {count}
      <button ref={btnRef}>+1</button>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <Fetch />
    </div>
  )
}

export default App