踩雷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.hqwc.cn/news/131052.html

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

相关文章

大数据软件项目的应用行业

大数据软件项目可以应用于各种不同的行业,以帮助组织更好地理解和利用其数据资产,从而做出更明智的决策、提高效率并推动创新。以下是一些主要行业,大数据软件项目可以发挥重要作用的示例,希望对大家有所帮助。北京木奇移动技术有…

Vue中对路由的进阶学习

路由进阶 文章目录 路由进阶1、路由的封装抽离2、声明式导航2.1、导航链接2.2、高亮类名2.3、跳转传参2.4、动态路由参数可选符 3、Vue路由--重定向4、Vue路由--4045、Vue路由–模式设置6、编程式导航6.1、基本跳转6.2、跳转传参 路由基础入门 1、路由的封装抽离 问题&#x…

整车热管理「升温」,哪些厂商排名电子风扇市场份额TOP10

作为整车热管理系统的关键组成部分,风扇在传统燃油车时代主要是帮助发动机、空调系统进行散热冷却;同时,产品也经历了从硅油风扇到电子风扇(从有刷电机到无刷电机的演进)的升级。 而在新能源汽车的架构中,…

软件测试工程师是做什么的?这是我的理解...

近年来,由于IT行业的人才稀缺,越来越多人转向了IT相关职业。 由于IT软件业的薪资较高,吸引了不少人选择了IT软件专业,IT软件专业包括软件开发、Java工程师、软件测试工程师等。 软件测试工程师主要是负责理解产品的功能要求&…

linux后台运行java项目/ jar包:nohup 命令

1.提出问题 我们把一个 SpringBoot 工程导出为 jar 包,jar 包上传到阿里云 ECS 服务器上,使用 java -jar xxx-xxx.jar 命令启动这个 SpringBoot 程序。此时我们本地的 xshell 客户端必须一直开着,一旦 xshell 客户端关闭,java -j…

百度SEO优化的特点(方式及排名诀窍详解)

百度SEO优化的特点介绍: 百度SEO优化是指对网站进行优化,使其在百度搜索引擎中获得更好的排名,进而获取更多的流量和用户。百度SEO优化的特点是综合性强、效果持久、成本低廉、投资回报高。百度的搜索算法不断更新,所以长期稳定的…

软件测试/测试开发丨为什么接口自动化测试是提升职业技能的关键?

接口测试背景和必要性 接口测试是测试系统组件间接口(API)的一种测试,主要用于检测内部与外部系统、内部子系统之间的交互质量,其测试重点是检查数据交换、传递的准确性,控制和交互管理过程,以及系统间相互…

蓝桥杯 字符串和日期

有一个类型的题目是找到输出图形的规律&#xff0c;然后将其实现。观察下面的图形。你想想你该怎么输出这个图形呢? ABBB#include<stdio.h> int main(){printf(" A\n");printf("BBB\n");return 0; }那么&#xff0c;对于如下的图形&#xff1a; ABB…

c++视觉处理---cv::Sobel()`算子

cv::Sobel()算子 cv::Sobel()是OpenCV库中的函数之一&#xff0c;用于计算图像的Sobel梯度。Sobel梯度是一种常用的图像处理技术&#xff0c;用于检测图像中的边缘和轮廓。 以下是cv::Sobel()函数的一般用法和参数&#xff1a; void cv::Sobel(cv::InputArray src, //…

mysql面试题35:MySQL有关权限的表有哪些?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:MySQL有关权限的表有哪些? MySQL中与权限相关的表主要包括以下几个: user表:存储MySQL用户的基本信息,包括用户名、密码等。可以使用以下命令…

实现动态表单的一种思路 | 京东云技术团队

一、动态表单是什么 区别于传统表单前后端配合联调的开发实现方式&#xff0c;动态表单通过一种基于元数据管理的配置化方法来实现表单的动态生成&#xff0c;并能根据配置自由增改删指定字段。实现特定需求的自助化。 图1.1 传统表单前后台协作模式 图1.2 动态表单前后台协作…

计算机竞赛YOLOv7 目标检测网络解读

文章目录 0 前言1 yolov7的整体结构2 关键点 - backbone关键点 - head3 训练4 使用效果5 最后 0 前言 世界变化太快&#xff0c;YOLOv6还没用熟YOLOv7就来了&#xff0c;如果有同学的毕设项目想用上最新的技术&#xff0c;不妨看看学长的这篇文章&#xff0c;学长带大家简单的…