面试官:说说对React refs 的理解?应用场景?

开发 前端
React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render方法中创建的 React元素

[[409689]]

本文转载自微信公众号「JS每日一题」,作者灰灰。转载本文请联系JS每日一题公众号。

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

  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.   } 

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

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

传入对象

refs通过React.createRef()创建,然后将ref属性添加到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.   } 

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

  1. const node = this.myRef.current

传入函数

当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.   } 

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

  1. const node = this.myref  

传入hook

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

  1. function App(props) { 
  2.   const myref = useRef() 
  3.   return ( 
  4.     <> 
  5.       <div ref={myref}></div> 
  6.     </> 
  7.   ) 

获取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 库

参考文献

https://zh-hans.reactjs.org/docs/refs-and-the-dom.html

https://segmentfault.com/a/1190000020842342

https://vue3js.cn/interview

 

责任编辑:武晓燕 来源: JS每日一题
相关推荐

2021-05-31 10:35:34

TCPWebSocket协议

2021-07-12 08:35:24

组件应用场景

2021-06-08 08:33:23

NodeStream数据

2021-06-07 09:41:48

NodeBuffer 网络协议

2021-06-30 07:19:36

React事件机制

2021-09-16 07:52:18

算法应用场景

2021-11-04 06:58:32

策略模式面试

2021-11-10 07:47:49

组合模式场景

2021-11-03 14:10:28

工厂模式场景

2021-08-16 08:33:26

git

2021-11-09 08:51:13

模式命令面试

2021-11-05 07:47:56

代理模式对象

2021-07-13 07:52:03

ReactHooks组件

2021-09-29 07:24:20

场景数据

2021-09-06 10:51:27

TypeScriptJavaScript

2021-09-28 07:12:09

测试路径

2021-11-11 16:37:05

模板模式方法

2021-11-22 23:50:59

责任链模式场景

2021-07-29 07:55:20

React Fiber架构引擎

2021-10-09 10:25:41

排序应用场景
点赞
收藏

51CTO技术栈公众号