react中useRef的應(yīng)用使用詳解

更新時間：2023年05月26日 08:18:13 作者：mikumikugo

這篇文章主要介紹了react中useRef的應(yīng)用使用詳解的相關(guān)資料,需要的朋友可以參考下

何為useRef

useRef是隨著react函數(shù)式組件發(fā)展而來的，是react眾多官方hook中的一個，調(diào)用useRef可以返回一個伴隨這組件整個聲明周期不發(fā)生改變的對象，這個對象常見的用途有兩個：

用于綁定dom元素，從而實現(xiàn)對dom元素的操作
用于保存不希望隨著組件重新渲染而改變的值，如定時器

在項目中的應(yīng)用

我在做自己的網(wǎng)站時遇到過一些場景，實現(xiàn)效果與預(yù)想中的不一致，讓我頭大了好一陣子，所幸最終都得到了解決，為了在以后能夠回來看一下，同時記錄學(xué)習(xí)過程中的一些知識點，現(xiàn)將這兩個場景記錄如下。

一、編寫自己的防抖函數(shù)

在編寫登錄注冊功能時，需要對用戶輸入的信息進(jìn)行校驗，包括前端的校驗以及和后端通信的校驗，如果只是前端的校驗還好，如果在用戶輸入的信息每次發(fā)生變化都去和服務(wù)器通信校驗的話，大量的http請求會對服務(wù)器造成壓力，所以我希望對這些行為進(jìn)行防抖處理。

useDebounce.ts

import { useEffect, useRef } from "react"
export const useDebounce = (f:Function,delay:number)=>{
    //使用useRef保存計時器，以此確保在組件更新時始終是同一個計時器，而不是重新創(chuàng)建
    const {current} = useRef<{timmer:any}>({timmer:null})
    useEffect(()=>{
        return ()=>{
            //組件銷毀時清除計時器
            clearTimeout(current.timmer)
        }
    },[])
    return function(...args:any[]){
        //如果計時器存在，則清除該計時器
        if(current.timmer){
            clearTimeout(current.timmer)
        }
        //重新賦值計時器，并在計時結(jié)束后執(zhí)行回調(diào)函數(shù)
        current.timmer = setTimeout(() => {
            f.apply(useDebounce,args)
        }, delay);
    }
}

這里我將防抖函數(shù)寫成了一個自定義的hook，也是寫的第一個hook，調(diào)用時需要傳入兩個參數(shù)，第一個參數(shù)是需要進(jìn)行防抖處理的函數(shù)，第二個參數(shù)是防抖的延時時間，hook返回值是經(jīng)過防抖處理的函數(shù)。

二、解決回調(diào)函數(shù)中獲取不到最新state值的問題

在實現(xiàn)獲取評論列表時，我希望每次只獲取一定數(shù)量的評論，當(dāng)用戶瀏覽到頁面底端時再獲取新的評論，在實現(xiàn)過程中我用到了intersectionObserverAPI，并在它的回調(diào)函數(shù)中引用了組件中的一些state。

當(dāng)我直接在useEffect副作用函數(shù)中進(jìn)行綁定監(jiān)聽的元素時,發(fā)現(xiàn)回調(diào)函數(shù)中的state值一直保持observer對象創(chuàng)建時的值，經(jīng)過查詢相關(guān)資料，得知這可能是因為閉包的影響。解決辦法是使用useRef創(chuàng)建一個對象用于保存observer對象，并在相關(guān)state值發(fā)生變化后釋放原來的observer對象，創(chuàng)建一個新的observer對象，并重新綁定要監(jiān)聽的元素。

//指向要監(jiān)聽的元素
const bref = useRef(null)
//保存observer對象
const observer = useRef<any>()
 
//每當(dāng)comments變化，都會重新創(chuàng)建一個observer對象，其回調(diào)函數(shù)中引用的就是最新的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])
          })
        }

      }
    })
  //取消舊的監(jiān)聽
    if (observer.current) {
      observer.current.unobserve(bref.current)
    }
//保存新的observer對象，并建立新的監(jiān)聽
    observer.current = c
    observer.current.observe(bref.current)
  }, [comments])

實踐出真知，在項目中發(fā)現(xiàn)問題，尋找解決問題的方法，大江不止兮水長流，不斷積累，豐富閱歷，提升能力。

到此這篇關(guān)于react中useRef的應(yīng)用使用詳解的文章就介紹到這了,更多相關(guān)react中useRef的應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: