一、是什么

Refs在計(jì)算機(jī)中稱為彈性文件系統(tǒng)（英語(yǔ)：Resilient File System，簡(jiǎn)稱ReFS）

React中的Refs提供了一種方式，允許我們?cè)L問(wèn)DOM節(jié)點(diǎn)或在render方法中創(chuàng)建的React元素

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

二、如何使用

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

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

傳入字符串

只需要在對(duì)應(yīng)元素或組件中ref屬性

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

訪問(wèn)當(dāng)前節(jié)點(diǎn)的方式如下：

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

傳入對(duì)象

refs通過(guò)React.createRef()創(chuàng)建，然后將ref屬性添加到React元素中，如下：

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

當(dāng)ref被傳遞給render中的元素時(shí)，對(duì)該節(jié)點(diǎn)的引用可以在ref的current屬性中訪問(wèn)

const node = this.myRef.current;

傳入函數(shù)

當(dāng)ref傳入為一個(gè)函數(shù)的時(shí)候，在渲染過(guò)程中，回調(diào)函數(shù)參數(shù)會(huì)傳入一個(gè)元素對(duì)象，然后通過(guò)實(shí)例將對(duì)象進(jìn)行保存

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

獲取ref對(duì)象只需要通過(guò)先前存儲(chǔ)的對(duì)象即可

const node = this.myref 

傳入hook

通過(guò)useRef創(chuàng)建一個(gè)ref，整體使用方式與React.createRef一致

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

獲取ref屬性也是通過(guò)hook對(duì)象的current屬性

const node = myref.current;

上述三種情況都是ref屬性用于原生HTML元素上，如果ref設(shè)置的組件為一個(gè)類組件的時(shí)候，ref對(duì)象接收到的是組件的掛載實(shí)例

注意的是，不能在函數(shù)組件上使用ref屬性，因?yàn)樗麄儾](méi)有實(shí)例

三、應(yīng)用場(chǎng)景

在某些情況下，我們會(huì)通過(guò)使用refs來(lái)更新組件，但這種方式并不推薦，更多情況我們是通過(guò)props與state的方式進(jìn)行去重新渲染子元素

過(guò)多使用refs，會(huì)使組件的實(shí)例或者是DOM結(jié)構(gòu)暴露，違反組件封裝的原則

例如，避免在Dialog組件里暴露open()和close()方法，最好傳遞isOpen屬性

但下面的場(chǎng)景使用refs非常有用：

• 對(duì)Dom元素的焦點(diǎn)控制、內(nèi)容選擇、控制
• 對(duì)Dom元素的內(nèi)容設(shè)置及媒體播放
• 對(duì)Dom元素的操作和對(duì)組件實(shí)例的操作
• 集成第三方 DOM 庫(kù)

到此這篇關(guān)于React refs 的理解的文章就介紹到這了,更多相關(guān)React refs 的理解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論