React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react中useRef的应用

react中useRef的应用使用详解

作者：mikumikugo

这篇文章主要介绍了react中useRef的应用使用详解的相关资料,需要的朋友可以参考下

何为useRef

useRef是随着react函数式组件发展而来的，是react众多官方hook中的一个，调用useRef可以返回一个伴随这组件整个声明周期不发生改变的对象，这个对象常见的用途有两个：

在项目中的应用

我在做自己的网站时遇到过一些场景，实现效果与预想中的不一致，让我头大了好一阵子，所幸最终都得到了解决，为了在以后能够回来看一下，同时记录学习过程中的一些知识点，现将这两个场景记录如下。

一、编写自己的防抖函数

在编写登录注册功能时，需要对用户输入的信息进行校验，包括前端的校验以及和后端通信的校验，如果只是前端的校验还好，如果在用户输入的信息每次发生变化都去和服务器通信校验的话，大量的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])

实践出真知，在项目中发现问题，寻找解决问题的方法，大江不止兮水长流，不断积累，丰富阅历，提升能力。

到此这篇关于react中useRef的应用使用详解的文章就介绍到这了,更多相关react中useRef的应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文