函數(shù)組件有函數(shù)作用域，每次render時(shí)，聲明的方法會(huì)生成新的引用，聲明的普通變量會(huì)重新聲明并賦值初始值，而useRef和useState會(huì)保留狀態(tài)。

useState、useRef、變量的區(qū)別
1. useState
組件更新不會(huì)改變之前的狀態(tài)，可以保存狀態(tài)。值變化，會(huì)render，視圖會(huì)更新，setState是異步的，同一個(gè)函數(shù)內(nèi)設(shè)置的，不能實(shí)時(shí)獲取到最新的值。

const [state, setState] = useState(0)
const fn = () => {setState(1)console.log(state) //輸出0
}

使用場(chǎng)景： 當(dāng)我們需要在狀態(tài)改變的時(shí)候重新渲染視圖，那么我們就使用 useState 來(lái)保存我們的狀態(tài)

2. useRef保存的值
組件更新不會(huì)改變之前的狀態(tài)，可以保存狀態(tài)。值變化，不會(huì)render，視圖不會(huì)更新。設(shè)置的值是同步的，同一個(gè)函數(shù)內(nèi)設(shè)置的，能實(shí)時(shí)獲取到最新的值。

const num = useRef(0)
const fn = () => {num.current = 1console.log(num.current) //輸出1
}

使用場(chǎng)景： 如果我們只是想保存狀態(tài)不影響視圖更新，而且可以同步更新&獲取我們的狀態(tài)，那么就使用 useRef。
注意事項(xiàng)：

ref.current 不可以作為其他 hooks（useMemo, useCallback, useEffect）依賴項(xiàng)；
ref.current 的值發(fā)生變更并不會(huì)造成 re-render, Reactjs 并不會(huì)跟蹤 ref.current 的變化。
3. 變量（組件內(nèi)）
變量在每次組件重新渲染的時(shí)候都會(huì)被重新進(jìn)行賦值為初始值，所以如果你想要保留之前操作的狀態(tài)的話就不要使用變量。
使用場(chǎng)景： 建議組件內(nèi)不使用

3. 變量（組件外）
組件外定義的 global 變量，是屬于全局的。如果代碼中有多個(gè)相同的組件，那這個(gè) global 變量在全局是同一個(gè)，他們會(huì)互相影響。
?

參考：react中useState、useRef、變量之間的區(qū)別_useref和usestate區(qū)別-CSDN博客