面试官：说说对Reactrefs的理解？应用场景？

本文转载自微信公众号「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属性

 
 
 
 

  
  
  
  
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 (
     
  
  
  
    <>