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

news/2024/7/15 18:52:51 标签: react.js, 前端, javascript

先了解,是什么?

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.niftyadmin.cn/n/5283746.html

相关文章

7-1 递归二路归并排序

7-1 递归二路归并排序 本题目要求读入N个整数,采用递归的二路归并排序法进行排序,输出前3轮排序后的结果。 输入格式: 输入不超过100的正整数N和N个整数(空格分隔)。 输出格式: 输出三行,第一行为第一轮排序结果&…

Led驱动框架代码编译与运行

一. 简介 上一篇文章实现了 Led驱动框架,文章地址如下: LED驱动框架代码的实现-CSDN博客 这里对上一篇实现的 Led驱动框架进行编译,然后在开发板上加载 Led驱动模块。 二. Led驱动框架代码编译与运行 1. 编译Led驱动框架代码 前面编写…

Github 2023-12-23 开源项目日报 Top10

根据Github Trendings的统计,今日(2023-12-23统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目6C项目2C项目1Jupyter Notebook项目1HTML项目1Go项目1非开发语言项目1 免费API集体清单 创建周期…

facebook广告企业户对账户有什么要求

Facebook广告企业户对账户的要求如下: 企业账户只能通过代理商开户,需提供营业执照,个人FB账号,FB主页。广告充值,要通过代理商充值。企业广告账户操作要通过Facebook BM平台授权,开户前需自己先创建BM平台…

Bert-vits2-2.3-Final,Bert-vits2最终版一键整合包(复刻生化危机艾达王)

近日,Bert-vits2发布了最新的版本2.3-final,意为最终版,修复了一些已知的bug,添加基于 WavLM 的 Discriminator(来源于 StyleTTS2),令人意外的是,因情感控制效果不佳,去除…

爬虫字典生成工具,CeWL使用教程

爬虫字典生成工具,CeWL使用教程 1.工具概述2.参数解析3.使用实例1.工具概述 CeWL 是一个 ruby 应用程序,它将给定的 URL 爬到指定的深度,可以选择跟随外部链接,并返回一个单词列表,然后可用于密码破解者 Cewl 是黑客武器库中的强大工具,因为它允许创建有针对性的单词列…

C++函数默认值的用法

C函数默认值的用法 在C中&#xff0c;函数允许提供一个默认值。这样&#xff0c;当函数被调用时如果没有提供这些参数的值&#xff0c;编译器会自动使用默认值。示例代码如下&#xff1a; #include <iostream>// 函数声明&#xff0c;指定默认参数 void myFunction(int…

python爬虫之selenium模拟浏览器

1.前言 之前在异步加载&#xff08;AJAX&#xff09;网页爬虫的时候提到过&#xff0c;爬取这种ajax技术的网页有两种办法&#xff1a;一种就是通过浏览器审查元素找到包含所需信息网页的真实地址&#xff0c;另一种就是通过selenium模拟浏览器的方法[1]。当时爬的是豆瓣&…