何為useRef
useRef是隨著react函數式組件發展而來的，是react眾多官方hook中的一個，調用useRef可以返回一個伴隨這組件整個聲明周期不發生改變的對象，這個對象常見的用途有兩個：
- 用于綁定dom元素，從而實現對dom元素的操作
- 用于保存不希望隨著組件重新渲染而改變的值，如定時器
在項目中的應用
我在做自己的網站時遇到過一些場景，實現效果與預想中的不一致，讓我頭大了好一陣子，所幸最終都得到了解決，為了在以后能夠回來看一下，同時記錄學習過程中的一些知識點，現將這兩個場景記錄如下。
一、編寫自己的防抖函數
在編寫登錄注冊功能時，需要對用戶輸入的信息進行校驗，包括前端的校驗以及和后端通信的校驗，如果只是前端的校驗還好，如果在用戶輸入的信息每次發生變化都去和服務器通信校驗的話，大量的http請求會對服務器造成壓力，所以我希望對這些行為進行防抖處理。
useDebounce.ts
import { useEffect, useRef } from "react"
export const useDebounce = (f:Function,delay:number)=>{
//使用useRef保存計時器，以此確保在組件更新時始終是同一個計時器，而不是重新創建
const {current} = useRef<{timmer:any}>({timmer:null})
useEffect(()=>{
return ()=>{
//組件銷毀時清除計時器
clearTimeout(current.timmer)
}
},[])
return function(...args:any[]){
//如果計時器存在，則清除該計時器
if(current.timmer){
clearTimeout(current.timmer)
}
//重新賦值計時器，并在計時結束后執行回調函數
current.timmer = setTimeout(() => {
f.apply(useDebounce,args)
}, delay);
}
}
這里我將防抖函數寫成了一個自定義的hook，也是寫的第一個hook，調用時需要傳入兩個參數，第一個參數是需要進行防抖處理的函數，第二個參數是防抖的延時時間，hook返回值是經過防抖處理的函數。
二、解決回調函數中獲取不到最新state值的問題
在實現獲取評論列表時，我希望每次只獲取一定數量的評論，當用戶瀏覽到頁面底端時再獲取新的評論，在實現過程中我用到了intersectionObserverAPI，并在它的回調函數中引用了組件中的一些state。
當我直接在useEffect副作用函數中進行綁定監聽的元素時,發現回調函數中的state值一直保持observer對象創建時的值，經過查詢相關資料，得知這可能是因為閉包的影響。解決辦法是使用useRef創建一個對象用于保存observer對象，并在相關state值發生變化后釋放原來的observer對象，創建一個新的observer對象，并重新綁定要監聽的元素。
//指向要監聽的元素
const bref = useRef(null)
//保存observer對象
const observer = useRef<any>()
//每當comments變化，都會重新創建一個observer對象，其回調函數中引用的就是最新的state值
useEffect(() => {
let c = new IntersectionObserver((entries) => {
if (entries[0].intersectionRatio > 0) {
if (page * pageNum <= count) {
const fd = new FormData()
fd.append('articleId', param.articleid)
fd.append('page', page + 1)
fd.append('pageNum', pageNum)
http({ url: '/comment/comments', options: { method: 'POST', body: fd } }).then(res => {
if (count !== res.count) {
setcount(res.res.count)
}
setpage(page + 1)
setcomments([...comments, ...res.res.rows])
})
}
}
})
//取消舊的監聽
if (observer.current) {
observer.current.unobserve(bref.current)
}
//保存新的observer對象，并建立新的監聽
observer.current = c
observer.current.observe(bref.current)
}, [comments])
實踐出真知，在項目中發現問題，尋找解決問題的方法，大江不止兮水長流，不斷積累，豐富閱歷，提升能力。
