罗田县升平网络工作室,一家专业从事网站建设的工作室

罗田县社区

 找回密码
 加入罗田县社区

QQ登录

只需一步,快速开始

快捷登录

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。
查看: 139|回复: 0

深入浅析React refs的简介

[复制链接]

497

主题

700

帖子

795

积分

社区达人

积分
795
发表于 2021-8-7 13:16:43 | 显示全部楼层 |阅读模式


一、是什么

Refs在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS)
React中的Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素
本质为ReactDOM.render()返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点
二、如何使用

创建ref的形式有三种:
       
  • 传入字符串,使用时通过 this.refs.传入的字符串的格式获取对应的元素   
  • 传入对象,对象是通过 React.createRef()  方式创建出来,使用时获取到创建的对象中存在 current 属性就是对应的元素   
  • 传入函数,该函数会在 DOM 被挂载时进行回调,这个函数会传入一个 元素对象,可以自己保存,使用时,直接拿到之前保存的元素对象即可   
  • 传入hook,hook是通过 useRef() 方式创建,使用时通过生成hook对象的 current 属性就是对应的元素
传入字符串
只需要在对应元素或组件中ref属性
  1. class MyComponent extends React.Component {  constructor(props) {    super(props);    this.myRef = React.createRef();  }  render() {    return <div ref="myref" />;  }}
复制代码
访问当前节点的方式如下:
  1. this.refs.myref.innerHTML = "hello";
复制代码
传入对象
refs通过React.createRef()创建,然后将ref属性添加到React元素中,如下:
  1. class MyComponent extends React.Component {  constructor(props) {    super(props);    this.myRef = React.createRef();  }  render() {    return <div ref={this.myRef} />;  }}
复制代码
当ref被传递给render中的元素时,对该节点的引用可以在ref的current属性中访问
  1. const node = this.myRef.current;
复制代码
传入函数
当ref传入为一个函数的时候,在渲染过程中,回调函数参数会传入一个元素对象,然后通过实例将对象进行保存
  1. class MyComponent extends React.Component {  constructor(props) {    super(props);    this.myRef = React.createRef();  }  render() {    return <div ref={element => this.myref = element} />;  }}
复制代码
获取ref对象只需要通过先前存储的对象即可
  1. const node = this.myref
复制代码
传入hook
通过useRef创建一个ref,整体使用方式与React.createRef一致
  1. function App(props) {  const myref = useRef()  return (    <>      <div ref={myref}></div>    </>  )}
复制代码
获取ref属性也是通过hook对象的current属性
  1. const node = myref.current;
复制代码
上述三种情况都是ref属性用于原生HTML元素上,如果ref设置的组件为一个类组件的时候,ref对象接收到的是组件的挂载实例
注意的是,不能在函数组件上使用ref属性,因为他们并没有实例
三、应用场景

在某些情况下,我们会通过使用refs来更新组件,但这种方式并不推荐,更多情况我们是通过props与state的方式进行去重新渲染子元素
过多使用refs,会使组件的实例或者是DOM结构暴露,违反组件封装的原则
例如,避免在Dialog组件里暴露open()和close()方法,最好传递isOpen属性
但下面的场景使用refs非常有用:
       
  • 对Dom元素的焦点控制、内容选择、控制   
  • 对Dom元素的内容设置及媒体播放   
  • 对Dom元素的操作和对组件实例的操作   
  • 集成第三方 DOM 库
到此这篇关于React refs 的理解的文章就介绍到这了,更多相关React refs 的理解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:http://www.jb51.net/article/218222.htm
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
打赏鼓励一下!
*罗田县社区ltxbbs.cn 罗田人自己的社区!
回复

使用道具 举报

回帖中禁止出现的内容,违者将被直接永久禁止访问,删除ID处理 :1.违反法律法规 ,包括但不限于出现带有政治、色情、暴恐信息等内容;2.恶意攻击内容,包括但不限于:恶意攻击党和政府、辱骂跟帖者、攻击主题发布者、不服从论坛管理、挑衅管理者、挑战版规等;3.广告、推广内容,尤其出现带有病毒、恶意代码、广告链接等内容,包括但不限于:QQ号、文字QQ号、微信号、手机号、文字手机号、第三方网址、单位公司名称、网站名称等;4.回帖贴出该主题隐藏资源链接或其它主题隐藏资源链接的行为。

浏览排行

(34042)2019-11-5 公共云钱包资金盘骗局揭秘: 网络传销+原始股骗局合体!

(18647)2019-12-20 12月17日 邓智天法院直播庭审疑问全解答!

(18149)2019-12-1 环保币GEC资金盘骗局最新消息: 即将崩盘!

(13144)2018-12-24 罗田县人民法院公布【第五批失信被执行人名单】 ...

(12836)2019-11-3 曝光!PTFX已经崩盘跑路,投资者血流成河!

(8651)2019-12-15 满足你对女同事的幻想 风骚秘书阿朱销魂眼神勾魂摄魄

(8277)2018-12-24 【失信曝光】罗田县人民法院第二期失信被执行人公告

(8198)2019-12-11 公安定性了, 趣码是非法传销! 趣码怎么退回365元?

(8097)2019-12-17 淘小铺传销还是忽悠? 搞社交电商, 淘小铺也要凉!!

(7979)2018-10-17 罗田县人民政府“12345”市民服务热线服务指南

最新发表

[升平网络工作室]2021-9-24 [2021-09-24]罗田天气预报

[升平网络工作室]2021-9-23 9月23日罗田新闻

[升平网络工作室]2021-9-23 徐寿辉大道改造提升工程如火如荼有序推进

[升平网络工作室]2021-9-23 全县第十六次党代会代表选举工作会召开

[升平网络工作室]2021-9-23 罗田县县乡两级人大代表换届选举拉开序幕

[升平网络工作室]2021-9-23 周黎参加县政府综合口第一选区县人大代表换届选举

[升平网络工作室]2021-9-23 郝爱芳以普通选民身份参加党群口选区选举投票活动

[升平网络工作室]2021-9-23 骆驼坳镇选举产生县乡两级人大代表

[升平网络工作室]2021-9-23 公交司机拾金不昧,传递社会正能量

[升平网络工作室]2021-9-23 《清清的义水河》在人民会场公演

QQ|Archiver|手机版|小黑屋|罗田县社区LTXBBS.CN ( 鄂ICP备18029072号-1 )|网站地图


手机扫一扫继续访问
[免责声明]
本站系本网编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
如涉及作品内容、版权和其它问题,请在30日内与本网联系,我们将在第一时间删除内容!
[声明]本站文章版权归原作者所有 内容为作者个人观点 本站只提供参考并不构成任何投资及应用建议。

进入社区 | 发表新帖 | 百度收录 |
技术提供:罗田县升平网络工作室
站长Email:admin@ltxbbs.cn
投诉电话(刮开查看):15374567400

GMT+8, 2021-9-24 07:11 , Processed in 0.151220 second(s), 32 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表