一、Refs 是什么
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 ;
- }
- }
访问当前节点的方式如下:
- 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 ;
- }
- }
当 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 this.myref = element} />;
- }
- }
获取ref对象只需要通过先前存储的对象即可
- const node = this.myref
传入hook
通过useRef创建一个ref,整体使用方式与React.createRef一致
- function App(props) {
- const myref = useRef()
- return (
- <>
-
- >
- )
- }
获取ref属性也是通过hook对象的current属性
- const node = myref.current;
上述三种情况都是ref属性用于原生HTML元素上,如果ref设置的组件为一个类组件的时候,ref对象接收到的是组件的挂载实例
注意的是,不能在函数组件上使用ref属性,因为他们并没有实例
三、应用场景
在某些情况下,我们会通过使用refs来更新组件,但这种方式并不推荐,更多情况我们是通过props与state的方式进行去重新渲染子元素
过多使用refs,会使组件的实例或者是DOM结构暴露,违反组件封装的原则
例如,避免在 Dialog 组件里暴露 open() 和 close() 方法,最好传递 isOpen 属性
但下面的场景使用refs非常有用:
- 对Dom元素的焦点控制、内容选择、控制
- 对Dom元素的内容设置及媒体播放
- 对Dom元素的操作和对组件实例的操作
- 集成第三方 DOM 库
参考文献
https://zh-hans.reactjs.org/docs/refs-and-the-dom.html
https://segmentfault.com/a/1190000020842342
https://vue3js.cn/interview
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容- 如何轻松进行 java 反汇编?超详细步骤教你快速上手!(如何进行java反汇编)
- 在 Java 中如何实现旧文件内容的覆盖?(java如何将旧文件内容覆盖)
- Java 中如何实现字符串字段的升序排序?(Java字符串字段升序排序怎么实现)
- 如何使用 Java 的 Arrays 类?(详细教程及示例)(java的Arrays类如何使用)
- Java 递归调用会对性能产生哪些影响?(java递归调用的性能影响 )
- Java Solr究竟支持哪些查询语法?(Java Solr支持哪些查询语法)
- Java 中的获取绝对值操作是否能应用于数组?(java获取绝对值能否应用于数组)
- Redis客户端批量操作技巧
- Java 读取文件时导致内存溢出的原因都有哪些?(java读取文件内存溢出的原因有哪些)
- 如何通过 Java Socket 编程实现双向通信?(java socket编程如何实现双向通信)