• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

深入浅析React refs的简介

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、是什么

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属性

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref="myref" />;
  }
}

访问当前节点的方式如下:

this.refs.myref.innerHTML = "hello";

传入对象

refs通过React.createRef()创建,然后将ref属性添加到React元素中,如下:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

ref被传递给render中的元素时,对该节点的引用可以在refcurrent属性中访问

const node = this.myRef.current;

传入函数

ref传入为一个函数的时候,在渲染过程中,回调函数参数会传入一个元素对象,然后通过实例将对象进行保存

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={element => this.myref = element} />;
  }
}

获取ref对象只需要通过先前存储的对象即可

const node = this.myref 

传入hook

通过useRef创建一个ref,整体使用方式与React.createRef一致

function App(props) {
  const myref = useRef()
  return (
    <>
      <div ref={myref}></div>
    </>
  )
}

获取ref属性也是通过hook对象的current属性

const node = myref.current;

上述三种情况都是ref属性用于原生HTML元素上,如果ref设置的组件为一个类组件的时候,ref对象接收到的是组件的挂载实例

注意的是,不能在函数组件上使用ref属性,因为他们并没有实例

三、应用场景

在某些情况下,我们会通过使用refs来更新组件,但这种方式并不推荐,更多情况我们是通过propsstate的方式进行去重新渲染子元素

过多使用refs,会使组件的实例或者是DOM结构暴露,违反组件封装的原则

例如,避免在Dialog组件里暴露open()close()方法,最好传递isOpen属性

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

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

到此这篇关于React refs 的理解的文章就介绍到这了,更多相关React refs 的理解内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
js实现0ms延时定时器的几种方式发布时间:2022-02-05
下一篇:
使用Angular CDK实现一个Service弹出Toast组件功能发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap