react中useRef的应用使用详解
何为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值的问题
在实现获取评论列表时,我希望每次只获取一定数量的评论,当用户浏览到页面底端时再获取新的评论,在实现过程中我用到了intersectionObserver
API,并在它的回调函数中引用了组件中的一些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的应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
- React中useRef hook的简单用法
- React Hooks的useState、useRef使用小结
- React Hooks中 useRef和useImperativeHandle的使用方式
- react如何利用useRef、forwardRef、useImperativeHandle获取并处理dom
- React Hooks之useRef获取元素示例详解
- 重新理解 React useRef原理
- 教你react中如何理解usestate、useEffect副作用、useRef标识和useContext
- React中useRef的具体使用
- React组件设计过程之仿抖音订单组件
- react如何使用useRef模仿抖音标题里面添加标签内容
最新评论