- 资讯首页 > 开发技术 > web开发 > JavaScript >
- 深入浅析React refs的简介
Refs
在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS)
React
中的Refs
提供了一种方式,允许我们访问DOM
节点或在render
方法中创建的React
元素
本质为ReactDOM.render()
返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom
则返回的是具体的dom
节点
创建ref
的形式有三种:
传入字符串
只需要在对应元素或组件中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
中的元素时,对该节点的引用可以在ref
的current
属性中访问
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
来更新组件,但这种方式并不推荐,更多情况我们是通过props
与state
的方式进行去重新渲染子元素
过多使用refs
,会使组件的实例或者是DOM
结构暴露,违反组件封装的原则
例如,避免在Dialog
组件里暴露open()
和close()
方法,最好传递isOpen
属性
但下面的场景使用refs
非常有用:
到此这篇关于React refs 的理解的文章就介绍到这了,更多相关React refs 的理解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
免责声明:本站发布的内容(图片、视频和文字)以原创、来自本网站内容采集于网络互联网转载等其它媒体和分享为主,内容观点不代表本网站立场,如侵犯了原作者的版权,请告知一经查实,将立刻删除涉嫌侵权内容,联系我们QQ:712375056,同时欢迎投稿传递力量。
Copyright © 2009-2022 56dr.com. All Rights Reserved. 特网科技 特网云 版权所有 特网科技 粤ICP备16109289号
域名注册服务机构:阿里云计算有限公司(万网) 域名服务机构:烟台帝思普网络科技有限公司(DNSPod) CDN服务:阿里云计算有限公司 百度云 中国互联网举报中心 增值电信业务经营许可证B2
建议您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流浏览器浏览本网站