踩雷react-useRef钩子函数

news2024/9/25 23:16:37

今天测试提了一个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.coloradmin.cn/o/1078952.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CentOS 安装MySQL 详细教程

参考:https://www.cnblogs.com/dotnetcrazy/p/10871352.html 参考:https://www.cnblogs.com/qiujz/p/13390811.html 参考:https://blog.csdn.net/darry1990/article/details/130419433 一、安装 一、进入安装目录 将账户切换到root账户下,进入local目录下 cd /usr…

mysql面试题42:主键使用自增ID还是UUID,并且说下原因

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 其他的分布式主键使用方案,可以看下这篇文章:《有哪些合适的分布式主键方案》 面试官:主键使用自增ID还是UUID,并且说下原因 自增ID 自增ID(Auto I…

免费主机|永久免费空间|php虚拟主机|博客主机|论坛主机|免费域名|云主机

免费主机|永久免费空间|php虚拟主机|博客主机|论坛主机|免费域名|云主机 在出教程之前准备好久,测试搭建轻量论坛无压力 选用稳定免费域名➕免费主机分销给,可以套CDN使用 坚持免费时间是大厂不能媲美,刚开始做网站时用的是这个分销&#…

分类预测 | MATLAB实现KOA-CNN-GRU开普勒算法优化卷积门控循环单元数据分类预测

分类预测 | MATLAB实现KOA-CNN-GRU开普勒算法优化卷积门控循环单元数据分类预测 目录 分类预测 | MATLAB实现KOA-CNN-GRU开普勒算法优化卷积门控循环单元数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现KOA-CNN-GRU开普勒算法优化卷积门控循环单…

华为OD机考算法题:找终点

目录 题目部分 解读与分析 代码实现 题目部分 题目找终点难度易题目说明给定一个正整数数组,设为nums,最大为100个成员,求从第一个成员开始,正好走到数组最后一个成员,所使用的最少步骤数。 要求: 1.第…

系统架构师备考倒计时26天(每日知识点)

详细的项目范围说明书,是项目成功的关键。 范围定义的输入包括以下内容: ① 项目章程。如果项目章程或初始的范围说明书没有在项目执行组织中使用,同样的信息需要进一步收集和开发,以产生详细的项目范围说明书。 ② 项目范围管理计划。 ③ 组…

性能优化-中间件tomcat调优

Tomcat作用 主要有三个: 管理Servlet应用的生命周期。Tomcat可以管理和控制Servlet应用程序的启动、停止、暂停和恢复等生命周期过程,确保Servlet应用的稳定运行和有序管理。把客户端请求的url映射到对应的servlet。Tomcat作为一个Web服务器,可以将客户端发送的HTTP请求URL…

【算法-贪心】无重叠区间-力扣 435 题

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

c++视觉处理----固定阈值操作:Threshold()函数,实时处理:二值化,反二值化,截断,设为零,反向设为零

固定阈值操作: Threshold()函数 cv::threshold() 函数是OpenCV中用于执行固定阈值二值化操作的函数。它可以用来将图像中的像素值根据用户定义的阈值转换为二进制值(0或255),以便进行图像分割、物体检测和特征提取等任务。 cv::…

迁移Linux服务器用户数据(将一个服务器的Linux用户数据迁移到另一个Linux服务器用户的流程)

文章目录 1、打包源Linux服务器用户的数据2、发送源Linux服务器用户的数据3、查看目的服务器用户接受到的数据 1、打包源Linux服务器用户的数据 先来到根目录,再使用tar命令打包数据:tar czvf root.zip.gz ./* 2、发送源Linux服务器用户的数据 在根目…

【深度学习】深度学习实验二——前馈神经网络解决上述回归、二分类、多分类、激活函数、优化器、正则化、dropout、早停机制

一、实验内容 实验内容包含要进行什么实验,实验的目的是什么,实验用到的算法及其原理的简单介绍。 1.1 手动实现前馈神经网络解决上述回归、二分类、多分类问题 分析实验结果并绘制训练集和测试集的loss曲线。 原理介绍:回归问题使用的损失函…

【手写数字识别】GPU训练版本

SVM Adaboost Bagging 完整代码 I import torch import torch.nn.functional as F from torch.utils.data import DataLoader, TensorDataset from torchvision import transforms, datasets import matplotlib.pyplot as plt# 超参数 batch_size 64 num_epochs 10# 数据…

计算机网络第三章——数据链路层(二)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 3.4.2 停止等待协议为什么要有停止等待协议无差错情况有差错的情况 停等协议性能分析脑图时刻 3.4.3 后退n帧协议后退n帧协议中的滑动窗口GBN发送方必须响应的三件事…

智能晾衣架丨以科技解放双手

以往的晾衣架大多是平放式、手摇式居多,为衣物的晾晒提供了一个“栖身之所。”随着科技的日新月异,智能家居的产品越来越多。晾衣架也不例外,一款带有语音控制升降、同时具备照明和消毒的多功能衣架也已深入生活,正被人们所接受。…

算法题系列12·字符串判断子序列

目录 题目描述 实现 题目描述 给定字符串 s 和 t ,判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些(也可以不删除)字符而不改变剩余字符相对位置形成的新字符串。(例如,"ace"是"…

RabbitMQ与springboot整合

1、基本概念 Server:接收客户端的连接,实现AMQP实体服务;Connection:连接,应用程序与Server的网络连接,TCP连接;Channel:信道,消息读写等操作在信道中进行。客户端可以建…

Python 图形化界面基础篇:发布应用程序到不同平台

Python 图形化界面基础篇:发布应用程序到不同平台 引言步骤1:准备应用程序1.1 处理依赖关系1.2 创建用户文档1.3 处理平台差异 步骤2:创建安装程序2.1 使用cx_Freeze创建独立包2.2 使用 PyInstaller 创建可执行文件2.3 使用其他工具 步骤3&am…

如何在 Spring Boot 中进行数据备份

在Spring Boot中进行数据备份 数据备份是确保数据安全性和可恢复性的关键任务之一。Spring Boot提供了多种方法来执行数据备份,无论是定期备份数据库,还是将数据导出到外部存储。本文将介绍在Spring Boot应用程序中进行数据备份的不同方法。 方法1: 使用…

CSS图文悬停翻转效果完整源码附注释

实现效果截图 HTML页面源码 <!DOCTYPE html> <html><head><meta http-equiv="content-type

正点原子嵌入式linux驱动开发——Linux内核移植

之前的两篇笔记&#xff0c;简单了解了一下Linux内核顶层 Makefile和Linux内核的启动流程&#xff0c;本篇内容来学习一下如何将ST官方提供的Linux内核移植到正点原子的STM32MP157开发板上。通过本章的学习&#xff0c;将掌握如何将半导体厂商提供的Linux BSP包移植到自己的平台…