• 售前

  • 售后

热门帖子
入门百科

深入浅析React refs的简介

[复制链接]
我爱霍启刚掖 显示全部楼层 发表于 2021-8-14 15:00:55 |阅读模式 打印 上一主题 下一主题

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

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

在某些情况下,我们会通过使用
  1. refs
复制代码
来更新组件,但这种方式并不保举,更多情况我们是通过
  1. props
复制代码
  1. state
复制代码
的方式举行去重新渲染子元素
过多使用
  1. refs
复制代码
,会使组件的实例大概是
  1. DOM
复制代码
结构袒露,违反组件封装的原则
比方,制止在
  1. Dialog
复制代码
组件里袒露
  1. open()
复制代码
  1. close()
复制代码
方法,最好传递
  1. isOpen
复制代码
属性
但下面的场景使用
  1. refs
复制代码
非常有用:
       
  • 对Dom元素的焦点控制、内容选择、控制   
  • 对Dom元素的内容设置及媒体播放   
  • 对Dom元素的操纵和对组件实例的操纵   
  • 集成第三方 DOM 库
到此这篇关于React refs 的理解的文章就介绍到这了,更多相干React refs 的理解内容请搜刮脚本之家以前的文章或继承欣赏下面的相干文章渴望各人以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作