[[409689]]

本文轉載自微信公眾號「JS每日一題」，作者灰灰。轉載本文請聯(lián)系JS每日一題公眾號。

一、Refs 是什么

Refs 在計算機中稱為彈性文件系統(tǒng)(英語：Resilient File System，簡稱ReFS)

React 中的 Refs提供了一種方式，允許我們訪問 DOM節(jié)點或在 render方法中創(chuàng)建的 React元素

本質(zhì)為ReactDOM.render()返回的組件實例，如果是渲染組件則返回的是組件實例，如果渲染dom則返回的是具體的dom節(jié)點

二、如何使用

創(chuàng)建ref的形式有三種：

• 傳入字符串，使用時通過 this.refs.傳入的字符串的格式獲取對應的元素
• 傳入對象，對象是通過 React.createRef() 方式創(chuàng)建出來，使用時獲取到創(chuàng)建的對象中存在 current 屬性就是對應的元素
• 傳入函數(shù)，該函數(shù)會在 DOM 被掛載時進行回調(diào)，這個函數(shù)會傳入一個 元素對象，可以自己保存，使用時，直接拿到之前保存的元素對象即可
• 傳入hook，hook是通過 useRef() 方式創(chuàng)建，使用時通過生成hook對象的 current 屬性就是對應的元素

傳入字符串

只需要在對應元素或組件中ref屬性

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

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

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

const node = this.myRef.current; 

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

const node = this.myref  

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

const node = myref.current;