说说对React refs 的理解?应用场景?

先了解,是什么?

React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render方法中创建的 React元素。
本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点。

如何去使用?


传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素
传入对象,对象是通过 React.createRef() 方式创建出来,使用时获取到创建的对象中存在 current 属性就是对应的元素
传入函数,该函数会在 DOM 被挂载时进行回调,这个函数会传入一个 元素对象,可以自己保存,使用时,直接拿到之前保存的元素对象即可
传入hook,hook是通过 useRef() 方式创建,使用时通过生成hook对象的 current 属性就是对应的元素

使用场景


在某些情况下,我们会通过使用refs来更新组件,但这种方式并不推荐,过多使用refs,会使组件的实例或者是DOM结构暴露,违反组件封装的原则;

但下面的场景使用refs非常有用:

对Dom元素的焦点控制、内容选择、控制
对Dom元素的内容设置及媒体播放
对Dom元素的操作和对组件实例的操作
集成第三方 DOM 库
 

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

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

相关文章

springboot集成websocket全全全!!!

一、界面展示 二、前置了解 1.什么是websocket WebSocket是一种在单个TCP连接上进行全双工通信的持久化协议。 全双工协议就是客户端可以给我们服务器发数据 服务器也可以主动给客户端发数据。 2.为什么有了http协议 还要websocket 协议 http协议是一种无状态,非…

铭飞CMS cms/content/list接口存在SQL注入 附POC

@[toc] 铭飞CMS cms/content/list接口存在SQL注入 附POC 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用…

内存函数的学习

额外知识点 第一个 假设c为int类型,(char)c之后,之后如果还用变量c的话,c依然为int类型。()强制转换操作符并不会永久改变原本的变量类型。 第二个 \0在打印时不会显示出来 第三个 void …

增强客户获取能力:探索 B 端影片行销的影响

01 B端企业短视频营销的价值与难点 短视频营销在当今的市场中越来越受到重视。有数据显示,越来越多的市场人将尝试增加短视频营销的预算,并且在2023年,每5个市场人中就有1个人将尝试短视频营销。相较于内容深、信息量大的长视频,…

免费的ChatGPT分享

免费的ChatGPT 以下是一些免费的ChatGPT平台和工具: 零声教学AI助手 零声教育内部使用的ChatGPT,提供智能对话和问题解答功能。 Ora.ai 一个可以自定义的AI聊天机器人,可以根据个人需求进行定制和训练。 ChatGPT 人工智能聊天机器人&a…

避免约束系数过大的2种技巧

相关文章: 《数学建模中提升目标、变量和约束的紧凑度的几种技巧》 《计算机存储精度引起的模型数值问题》 如前文所述,当数学模型当中的约束系数过大时,会增加模型的求解难度,这一点会在预处理当中改善;另一方面是&am…

串口通信(7)-C#串口通信通信帮助类实例

本文讲解C#串口通信通信帮助类实例 首先创建winform项目添加界面和控件 UI界面 namespace SerialPortDemo {partial class MainForm{/// <summary>/// 必需的设计器变量。/// </summary>private System.ComponentModel.IContainer components = null;/// <sum…

zabbix-proxy配置及邮件配置

一、下载配置server&#xff0c;agent端 下载zabbix-server&#xff0c;server客户端 # 备注&#xff1a;zabbix源不能和epel源同时存在&#xff0c;要给epel源注释了 # 更新下载zabbix源 [rootzabbix-server ~]# rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64…

c#委托学习笔记1

委托三步骤 第一步&#xff1a;定义委托 //第一步&#xff1a;1 声明委托(定义委托) //对于声明委托的解释如下&#xff1a; //解释a&#xff1a;函数指针 //解释b&#xff1a;委托就是定义函数的形状&#xff08;形态&#xff09; // 即&#xff1a;返回值类型&#x…

【AI-1】卷积神经网络

分享些AI的知识点&#xff0c;主要聊一下深度学习中的卷积神经网络。 机器学习分哪些分支&#xff1f; 监督学习&#xff08;Supervised Learning&#xff09;&#xff1a;在监督学习中&#xff0c;模型通过使用带有标签的训练数据来学习输入和输出之间的映射关系。监督学习的…

strace 用法

按照strace官网的描述, strace是一个可用于诊断、调试和教学的Linux用户空间跟踪器。我们用它来监控用户空间进程和内核的交互&#xff0c;比如系统调用、信号传递、进程状态变更等。 常用用法&#xff1a;查看文件的系统调用 -o 文件名 将跟踪输出写入指定的文件而不是st…

宝塔面板 -- 创建第一个自己的网站

文章目录 前言 一、安装宝塔面板 二、注册宝塔面板 三、安装nginx 四、第一个hello world运行 五、总结 文章目录 前言一、安装宝塔面板二、注册宝塔面板三、安装nginx四、第一个hello world运行五、总结 前言 阿里云最近对在校大学生免费每人赠送一台服务器&#xff0c…

展望2023年CSDN博客之星评选

目录 1 前言2 博客的意义3 人工智能对博客的影响4 AI 技术下的成长与分享5 技术的探索6 博客之星评选对于技术人的激励作用7 结语 1 前言 当我们回顾过去&#xff0c;博客不仅仅是一种记录生活、分享经验的方式&#xff0c;更是一个见证自我成长与进步的平台。站在2023年度 CS…

uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)

效果预览 相关代码 页面–我的 src\pages\my\my.vue <!-- 个人资料 --><view class"profile" :style"{ paddingTop: safeAreaInsets!.top px }"><!-- 情况1&#xff1a;已登录 --><view class"overview" v-if"membe…

离散型制造企业为什么要注重MES管理系统的实施

离散型制造企业经常面临三个核心问题&#xff1a;生产什么、生产多少以及如何生产。尽管许多企业都实施了ERP系统&#xff0c;但仍然绕不开MES管理系统的话题。本文将从三个方面详细解释为什么离散型企业需要实施MES管理系统。 一、生产线经常出现的问题 在离散型企业中&#…

Leetcode 45 跳跃游戏 II

题意理解&#xff1a; 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。 还是从初始坐标i0的位置到达最后一个元素&#xff0c;但是问题不是能不能跳到&#xff0c;而是最少几步能跳到最后一个元素。 目标&…

Javascript:DOM对象

Javascript&#xff1a;DOM-获取对象 DOM与JavaScript的关系什么是DOMDOM相关概念DOM 树DOM 节点DOM对象 获取DOM对象通过CSS选择器来获取DOM对象其他方式 操作DOM对象控制DOM对象内容控制DOM对象属性控制HTML标签属性控制CSS样式通过style属性操作CSS通过类名(className) 操作…

详解KMP算法

KMP算法应该是每一本《数据结构》书都会讲的&#xff0c;算是知名度最高的算法之一了&#xff0c;但很可惜&#xff0c;我大二那年压根就没看懂过~~~ 之后也在很多地方也都经常看到讲解KMP算法的文章&#xff0c;看久了好像也知道是怎么一回事&#xff0c;但总感觉有些地方自己…

【QT八股文】系列之篇章1 | QT的基础知识及事件/机制

【QT八股文】系列之篇章1 | QT的基础知识及事件/机制 前言0. 基础Qt/PyQt5介绍/关联Qt的优缺点&#xff08;为什么要用qt来做界面&#xff09;Qt 的核心机制请简要介绍一下Qt中的主窗口&#xff08;MainWindow&#xff09;类&#xff0c;它有哪些重要的函数和成员变量&#xff…

【ArduinoOTA无线(OTA)更新的EASY指南】

【ArduinoOTA无线&#xff08;OTA&#xff09;更新的EASY指南】 1. 前言2. 了解 ESP32 的 ArduinoOTA3. 无线更新案例4. ArduinoOTA入门5. 安装必备组件6. 设置硬件7. ESP32 OTA 的最低代码8. 按照我们的流程学习Arduino编程➜9. 这对OTA来说非常重要10. 通过无线方式将草图上传…