踩雷react-useRef钩子函数

今天测试提了一个bug,之前做的有个需求,在触发事件发起请求后,成功响应返回的新的数据没有第一时间渲染到网页上。

方法也都成功更新了数据,就是渲染会慢1-2分钟,排错排了老半天,最后找到了原因。

一般情况下定义变量都是用的钩子函数useState,但是偶尔会遇到一些异步问题需要在别处缝缝补补,某一天菜鸡本人偶然发现使用useRefcurrent也可以存储和访问DOM元素或者一些其他引用,而且是时实的!然后不管三七二十一,遇到懒得解决的异步问题通通使用useRef,就像如下的代码片段。
在这里插入图片描述
![原来用于修改数据的函数](https://img-blog.csdnimg.cn/92aea98c78a0486faaa205c17435b80a.png
在这里插入图片描述
我就忽略一个问题:useRef 创建的引用对象在重新渲染时会保持不变,不会导致组件重新渲染,所以,当我用到antd的table组件,虽然我的 dataSource 属性已经正确绑定到 listDetailRef.current,由于 React 的异步更新机制,就导致了变化会慢一些时间才反映在组件中。

React 通常会采用异步方式来处理状态和属性的变化,以提高性能和效率。

当更新 listDetailRef.current 中的数据时,React 不会立即触发重新渲染。相反,它会将更新放入更新队列中,并在适当的时候批量处理这些更新。这就导致了更新在稍后的某个时刻才会反映在组件中。

至于我先前提到的useState异步问题的解决,我大错特错了,useRefcurrent 属性是不能直接解决使用 useState 时可能遇到的异步问题的!因为它们有不同的用途和行为…

  1. useState 异步更新useState 异步地更新组件的状态。这意味着当你调用 setState 更新状态时,React 并不会立即重新渲染组件。这可能会导致在某些情况下,你访问的状态值不会立即反映最新的值。
  2. useRef 不会触发重新渲染useRef 创建的引用对象的 current 属性是可变的,但它的更新不会触发组件重新渲染。因此,useRef 不会解决 useState 的异步更新问题。

总的来说,useState 用于管理组件的状态,而 useRef 用于在组件渲染期间保持某些值的引用。useState 会引发组件重新渲染,而 useRef 不会。

咱就是说,还是官方说怎么用就怎么用吧……

再区别一下useStateuseRef 的作用和用法:

  1. useState:
    • useState 用于在函数组件中添加状态(state)。通过调用 useState(initialValue),你可以创建一个状态变量,并将其与初始值关联。
    • 当状态变量发生变化时,组件将会重新渲染以反映最新的状态。
    • 例子:const [count, setCount] = useState(0) 会创建一个名为 count 的状态变量,并将其初始值设为 0
  2. useRef:
    • useRef 用于在函数组件中创建一个可变的对象引用,通常用于引用 DOM 元素或其他 React 组件。
    • 不同于状态变量,useRef 创建的引用对象在重新渲染时保持不变,不会导致组件重新渲染。
    • 例子:const myRef = useRef(initialValue) 会创建一个 myRef 对象,并将其初始值设为 initialValue

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/154738.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt如何实现动态背景-视频背景

前言 需求:加载视频作为视频背景,在上层可以进行图片的动画化,或是进行其他操作。 几种方法: 1、直接将视频弄成一个QDialog, 然后再上层在弄一个QDialog,背景透明即可。但遇到一个问题,QDialog没办法局…

物业一站式工单管理系统哪家好?如何提升物业管理和维修服务质量?

在物业管理和维修服务领域,一个高效便捷的工单管理系统扮演着至关重要的角色。它不仅方便了住户提交报修请求,还极大地提高了物业管理和维修团队的工作效率。本文将深入探讨“的修”一站式工单管理系统在物业管理和维修服务中的重要作用。 一、“的修”一…

一款轻量级事件驱动型应用程序框架

QP™/C 实时嵌入式框架 (RTEF) 是专为实时嵌入式 (RTE) 系统量身定制的活动对象计算模型的轻量级实现。QP 既是用于构建由活动对象(参与者)组成的应用程序的软件基础结构,也是用于以确定性方式执…

linux安装filebeat并收集日志到elasticsearch

摘要: 通过filebeat收集服务器上各个应用的日志到elasticsearch,通过tags区分不同的应用创建不同的索引保存日志。 官网地址: https://www.elastic.co/cn/downloads/past-releases#filebeat 安装步骤: 1:下载并解…

C#(Csharp)我的基础教程(四)(我的菜鸟教程笔记)-Windows项目结构分析、UI设计和综合事件应用的探究与学习

目录 windows项目是我们.NET学习一开始必备的内容。 1、窗体类(主代码文件窗体设计器后台代码文件) 主窗体对象的创建:在Program类里面: Application.Run(new FrmMain());这句代码就决定了,当前窗体是项目的主窗体。…

MySQL 主从复制、读写分离

MySQL 主从复制、读写分离 1、MySQL 主从复制1.1什么是主从复制?1.2为什么要读写分离呢?1.3 什么时候要读写分离?1.4主从复制与读写分离1.5mysql支持的复制类型1.6主从复制的工作过程1.7MySQL 读写分离原理1.8目前较为常见的 MySQL 读写分离分…

2023年9月榜单丨飞瓜数据B站UP主排行榜(B站平台)发布!

飞瓜轻数发布2023年9月飞瓜数据UP主排行榜(B站平台),通过充电数、涨粉数、成长指数、带货数据等维度来体现UP主账号成长的情况,为用户提供B站号综合价值的数据参考,根据UP主成长情况用户能够快速找到运营能力强的B站UP…

微信怎样批量添加好友?批量添加好友的好处有哪些?

微信是目前最流行的社交软件之一,不仅可以与亲友保持联系,还能为企业提供更多商机和合作伙伴。为了提高工作效率和增加客户数量,许多企业开始寻找批量自动化添加好友的工具。 那么批量添加好友的好处有哪些呢? ①批量自动化添加好…

微信小程序之本地生活(九宫格)

文章目录 一.创建项目二.配置修改json三.编写WXML四.编写WXSS五.最终效果 一.创建项目 创建新的项目&#xff0c;名称为&#xff1a;本地生活 二.配置修改json 在app.json中删除其他页面 将index改为grid 自动生成新的文件 添加自己的轮播图片 源代码&#xff1a; <!--…

基于FPGA的图像缩小算法实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 将FPGA的处理结果导出到matlab中显示图像效果&#xff1a; 2.算法运行软件版本 vivado2019.2 matlab2022a 3.部分核心程序 timescale 1ns / 1p…

C语言,序列中删除指定数字

题目考点&#xff1a;对continue的运用&#xff08;也可以用&#xff01;来实现&#xff09; 先创建一个数组&#xff0c;数组大小应该要根据题目要求&#xff0c;根据数据范围&#xff0c;要设立一个大小为50的数组。 接着用scanf输入n的值&#xff0c;再设一个循环&#xff…

用ffmpeg删除视频的音轨,让视频静音

ffmpeg -i ~/video/video.mp4 -an -vcodec copy ~/video/muteVideo.mp4 删除以后我们查看muteVideo的文件信息&#xff0c;只有一个Stream&#xff1a;video信息了。 再对比看一下video.mp4的信息&#xff0c;是有两个Stream信息&#xff0c;一个video&#xff0c;一个audio。…

口袋参谋:淘宝卡首屏玩法,1步高效拉升店铺免费流量!

​淘宝上商家都希望自己的商品出现在买家的面前&#xff0c;于是就出现了卡首屏玩法。 那什么是卡首屏呢&#xff1f; 就是使用商品链接或者商品ID通过卡首屏工具&#xff0c;生成卡首屏二维码&#xff0c;使用手淘APP扫一扫后&#xff0c;指定的宝贝就会显示在首屏&#xff…

【Nuget】程序包源

程序包源地址(部分) Azure 中国区的官方 NuGet 程序包源地址 https://nuget.cdn.azure.cn/v3/index.json 官方 NuGet 程序包源地址 V2 https://www.nuget.org/api/v2 官方 NuGet 程序包源地址 V3 https://api.nuget.org/v3/index.json MyGet 上 Eto.Forms 框架的程序包源地址 h…

顺序表的应用——(通讯录)

目录 前提须知&#xff1a; 通讯录的结构&#xff1a; 通讯录的建立&#xff1a; 顺序表的重命名&#xff1a; 顺序表数据类型的更改&#xff1a; 使用通讯录结构体新名字&#xff0c;进行类型重命名的问题&#xff1a; 头文件的添加&#xff1a; 通讯录的初始化和销毁&a…

C语言重点突破(2)指针(二)

本章重点 1. 字符指针 2. 数组指针 3. 指针数组 4. 数组传参和指针传参 1. 字符指针 在我的前一章节&#xff0c;我们提到指针也有类型的区分&#xff0c;有整型指针&#xff0c;浮点型指针&#xff0c;下面我们讲讲字符指针 字符指针的用法通常是将一个字符变量的地址存…

企业安全隐患排查治理系统—隐患上报、整改

安全生产隐患排查治理系统&#xff0c;涵盖了安全隐患排查整治工作的各项基本内容&#xff0c;能对隐患排查整治信息及时、有效地进行跟踪、整改&#xff0c;并将统计数据及时上报。该系统主要分为以下四个模块&#xff1a; 企业信息管理。通过手机扫码即可查询该企业主要风险点…

uniapp上echarts地图钻取

1: 预期效果 通过切换地图 , 实现地图的钻取效果 2: 实现原理以及核心方法/参数 一开始是想利用更换地图数据的形式进行地图钻取 , 这就意味着我们需要准备全国30多个省份的地图数据 , 由于一开始考虑需要适配小程序端 , 如此多的地图文件增加了程序的体积 , 如果使用接口调…

VALSE2023-快速总结

会议快速总结 1. 前言2. 热点词2.1 自监督预训练2.2 MIM(Masked Image Modeling)2.3 MAE(Masked Autoencoders)2.4 clip&#xff08;Contrastive Language-Image Pre-Training&#xff09;模型2.5 对比学习2.6 扩散模型&#xff08;diffustion model&#xff09;2.7 Nerf&#…

智慧工地:助力数字建造、智慧建造、安全建造、绿色建造

智慧工地管理系统融合计算机技术、物联网、视频处理、大数据、云计算等&#xff0c;为工程项目管理提供先进的技术手段&#xff0c;构建施工现场智能监控系统&#xff0c;有效弥补传统监理中的缺陷&#xff0c;对人、机、料、法、环境的管理由原来的被动监督变成全方位的主动管…