react中useRef的应用

这篇具有很好参考价值的文章主要介绍了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值的问题

在实现获取评论列表时,我希望每次只获取一定数量的评论,当用户浏览到页面底端时再获取新的评论,在实现过程中我用到了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])




实践出真知,在项目中发现问题,寻找解决问题的方法,大江不止兮水长流,不断积累,丰富阅历,提升能力。文章来源地址https://www.toymoban.com/news/detail-458958.html

到了这里,关于react中useRef的应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React钩子函数之useRef的基本使用

    React钩子函数中的useRef是一个非常有用的工具,它可以用来获取DOM元素或者保存一些变量。在这篇文章中,我们将会讨论useRef的基本使用。 首先,我们需要知道useRef是如何工作的。它返回一个可变的ref对象,这个对象可以在组件的整个生命周期中被访问。当我们需要获取DOM元

    2024年02月10日
    浏览(35)
  • React Hooks的useState、useRef使用

    React Hooks 是 React 16.8 版本引入的新特性,它允许你在不编写 class 的情况下使用 state 和其他 React 特性。其中, useState  和  useRef  是两个常用的 Hooks。 1. useState useState  是一个允许你在函数组件中添加 state 的 Hook。 使用说明: useState  返回一个状态变量和一个设置该变量的函

    2024年02月02日
    浏览(45)
  • 3.react useRef使用与常见问题

    https://zh-hans.legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function

    2024年02月12日
    浏览(43)
  • React 使用 useRef() 获取循环中所有子组件实例

    之前项目中使用了 antd pro 中的 可编辑表格 (EditableProTable) ,在页面中表格要经过多层遍历后组成的新页面,所以我将之抽成了一个公用的组件,另外在遍历的最外层需要通过一个按钮统一提交表格数据,但是提交数据之前需要对每一个表格进行非空校验。 遍历中引入组件这

    2024年02月11日
    浏览(34)
  • 如何为 Flutter 应用程序创建环境变量

    我们为什么需要环境变量? 主要用于存储高级机密数据,如果泄露可能会危及您产品的安全性。这些变量本地存储在每个用户的本地系统中,不应该签入存储库。每个用户都有这些变量的副本。 在根项目中创建一个名为 .env 的文件夹(文件夹名称由您选择) 在 .gitignore 中添

    2024年02月11日
    浏览(54)
  • 何为股票期权交易:从概念解读到交易策略应用

    您是否仍将股票期权仅仅视为一种炒股的方式呢?今天,我将带领您深入探讨 股票期权交易的深层奥秘。 首先,让我们详细剖析一下何为股票期权。 所谓股票期权,即是指拥有在某个时刻以事先约定好的价格购买或出售某种股票的权利。 这意味着投资者有权在一段时间内在

    2024年01月21日
    浏览(41)
  • 随着AI的广泛应用与普及,我国医疗行业也正逐步进入智能医疗时代,如何在医疗行业借助AI提升患者的治疗能力,降低

    作者:禅与计算机程序设计艺术 随着近年来医疗技术的飞速发展,人们越来越关注人工智能(Artificial Intelligence, AI)技术对医疗工作的影响。以往人们所熟知的机器学习、计算机视觉等技术主要用于科学研究、工程制造,而现在,医疗行业也越来越注重人工智能技术的应用。从

    2024年02月07日
    浏览(56)
  • 【AIGC调研系列】Easy Scraper类工具如何为AIGC应用增效

    Easy Scraper类工具主要包括Data Scraper、NoCoding Data Scraper、Listly和Simplescraper等。这些工具通过在浏览器中安装的插件形式,允许用户从HTML网页中提取数据并导入到Excel或其他格式文件中[1][3][11]。例如,Data Scraper是一个Chrome扩展,可以让用户抓取任何HTML网页的数据并导出到Excel表

    2024年03月16日
    浏览(36)
  • 如何为WPF应用程序制作一个虚拟键盘?这里有答案(Part 1)

    Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序,同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等,创建的应用程序可靠且结构良好,非常容易维护,其直观的API将无缝地集成Visual Studio工具箱中。 点击获取Telerik UI for WPF最新版下载 T

    2024年02月09日
    浏览(95)
  • TatukGIS Developer Kernel使用教程:如何为FMX创建第一个应用程序

    概述: TatukGIS Developer Kernel(DK)是一个用于开发自定义地理信息系统(GIS)应用程序以及解决方案的综合性软件开发工具包(SDK)。本篇文章主要介绍用DK11为FMX创建一个应用程序,现在就跟着小编来了解一下吧~ # 31款JAVA开发必备控件和工具 # 界面/文档管理/报表/IDE等4000款

    2024年02月07日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包