引言

在 React 中，ref 是一個(gè)重要的功能，用于直接訪問 DOM 元素或組件實(shí)例。通常，我們使用 ref 來(lái)實(shí)現(xiàn)一些需要直接操作 DOM 的場(chǎng)景，例如焦點(diǎn)管理、文本選擇或動(dòng)畫等。

在 React 中，ref 主要有三種形式：字符串形式、回調(diào)形式和 createRef。

一、字符串形式的 ref(不推薦使用)

ref 可以使用字符串形式來(lái)引用 DOM 元素或組件實(shí)例，如下所示：

class MyComponent extends React.Component {
  render() {
    return <div ref="myDiv">Hello</div>;
  }

  componentDidMount() {
    console.log(this.refs.myDiv);  // 通過 refs 獲取 DOM 元素
  }
}

在組件掛載后，React 會(huì)在 refs 對(duì)象中自動(dòng)為每個(gè)字符串形式的 ref 創(chuàng)建一個(gè)屬性，指向?qū)?yīng)的 DOM 元素或組件實(shí)例。

使用場(chǎng)景

• 字符串形式的 ref 在早期版本中常用于引用 DOM 元素，尤其是對(duì)于較簡(jiǎn)單的組件而言。
• 然而，其缺乏靈活性，且容易導(dǎo)致潛在的性能問題和調(diào)試?yán)щy。因此，開發(fā)者應(yīng)避免使用字符串形式的 ref。

二、回調(diào)形式的 ref

類方法中的回調(diào) ref

在 React 中，回調(diào)形式的 ref 是通過將一個(gè)函數(shù)傳遞給 ref 屬性來(lái)動(dòng)態(tài)設(shè)置引用的方式。這個(gè)函數(shù)會(huì)在組件掛載時(shí)被調(diào)用，并將對(duì)應(yīng)的 DOM 元素或組件實(shí)例作為參數(shù)傳遞給它。這個(gè)方式通常用于需要在組件生命周期的特定時(shí)刻訪問 DOM 或組件實(shí)例的情況。

class MyComponent extends React.Component {
  setRef = (element) => {
    this.myDiv = element;  // 獲取 DOM 元素
  };

  render() {
    return <div ref={this.setRef}>Hello</div>;
  }

  componentDidMount() {
    console.log(this.myDiv);  // 通過 this.myDiv 獲取 DOM 元素
  }
}

在這個(gè)例子中，ref={this.setRef} 將 setRef 方法作為回調(diào)函數(shù)傳遞。當(dāng)組件掛載時(shí)，React 會(huì)調(diào)用 setRef 函數(shù)，并將 DOM 元素作為參數(shù)傳入。這樣，this.myDiv 就能引用到掛載的 DOM 元素。

內(nèi)聯(lián)回調(diào)函數(shù)

除了使用類方法來(lái)定義回調(diào)函數(shù)，你還可以將回調(diào)函數(shù)直接寫成內(nèi)聯(lián)函數(shù)，進(jìn)一步簡(jiǎn)化代碼。這種寫法特別適用于一些簡(jiǎn)單的場(chǎng)景，避免了額外定義方法。

class MyComponent extends React.Component {
  render() {
    return <div ref={(element) => { this.myDiv = element; }}>Hello</div>;
  }

  componentDidMount() {
    console.log(this.myDiv);  // 通過 this.myDiv 獲取 DOM 元素
  }
}

在這個(gè)例子中，ref={(element) => { this.myDiv = element; }} 就是一個(gè)內(nèi)聯(lián)的回調(diào)函數(shù)。每當(dāng) DOM 元素掛載時(shí)，React 會(huì)調(diào)用該回調(diào)，并將 DOM 元素作為參數(shù)傳入。內(nèi)聯(lián)函數(shù)寫法使得代碼更加簡(jiǎn)潔，適合不需要在其他地方使用 ref 的情況。

使用場(chǎng)景

動(dòng)態(tài)引用 DOM 元素：如果你需要?jiǎng)討B(tài)訪問不同的 DOM 元素（例如多個(gè)同類型的元素），回調(diào)形式的 ref 非常有用。每當(dāng)元素掛載或卸載時(shí)，回調(diào)函數(shù)會(huì)被自動(dòng)調(diào)用，從而讓你能夠及時(shí)訪問或清理引用。
條件渲染：在某些條件下渲染不同的 DOM 元素，并需要訪問它們時(shí)，回調(diào)形式的 ref 可以確保你在元素實(shí)際掛載后才獲得對(duì)它的引用。

三、createRef（推薦）

createRef 是 React 16.3 引入的一個(gè)新 API，是現(xiàn)代 React 中推薦使用的 ref 創(chuàng)建方式。與回調(diào)函數(shù)形式不同，createRef 提供了一種更加可靠和清晰的方式來(lái)引用 DOM 元素或組件實(shí)例，并且與每個(gè)組件實(shí)例綁定，確保 ref 在組件的生命周期內(nèi)保持一致。

為什么推薦使用 createRef？

createRef 創(chuàng)建的 ref 是專人專用的，每個(gè)組件實(shí)例都會(huì)擁有一個(gè)獨(dú)立的 ref 對(duì)象。在組件的生命周期內(nèi)，ref 的 current 屬性會(huì)保持對(duì)相應(yīng) DOM 元素的引用，且不會(huì)因?yàn)橹匦落秩径l(fā)生變化，這使得它比回調(diào)形式的 ref 更加穩(wěn)定和高效。

在類組件中的使用

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myDivRef = React.createRef();  // 使用 createRef 創(chuàng)建 ref
  }

  componentDidMount() {
    console.log(this.myDivRef.current);  // 通過 current 獲取 DOM 元素
  }

  render() {
    return <div ref={this.myDivRef}>Hello</div>;
  }
}

在這段代碼中，我們通過 React.createRef() 創(chuàng)建了一個(gè) ref，并將其賦值給 this.myDivRef。每個(gè)組件實(shí)例都會(huì)擁有一個(gè)獨(dú)立的 myDivRef。當(dāng)組件掛載時(shí)，this.myDivRef.current 會(huì)指向 DOM 元素，且在組件的生命周期內(nèi)不會(huì)變化，保證了 ref 的一致性。

在函數(shù)組件中的使用

對(duì)于函數(shù)組件，createRef 并不常用。函數(shù)組件通常使用 useRef 來(lái)代替 createRef。useRef 會(huì)返回一個(gè)帶有 current 屬性的對(duì)象，類似于 createRef，但它在函數(shù)組件中更為常見，并且會(huì)在組件的整個(gè)生命周期內(nèi)保持不變。

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myDivRef = useRef(null);

  useEffect(() => {
    console.log(myDivRef.current);  // 通過 current 獲取 DOM 元素
  }, []);  // 僅在掛載時(shí)調(diào)用

  return <div ref={myDivRef}>Hello</div>;
}

在這個(gè)例子中，useRef 創(chuàng)建了一個(gè) ref，并將其傳遞給 div 元素。myDivRef.current 會(huì)指向該 DOM 元素。與 createRef 相似，useRef 的 current 屬性在組件的整個(gè)生命周期內(nèi)保持不變，適合需要持續(xù)引用 DOM 元素的場(chǎng)景。

createRef 和 useRef 的主要區(qū)別

• 類組件中使用 createRef：createRef 在類組件中使用時(shí)，每個(gè)組件實(shí)例都會(huì)有一個(gè)獨(dú)立的 ref 對(duì)象，它是專人專用的，且在組件生命周期內(nèi)保持一致，不會(huì)因重新渲染而變化。
• 函數(shù)組件中使用 useRef：在函數(shù)組件中，useRef 是代替 createRef 的常用方式，提供了與 createRef 類似的功能，且它的引用對(duì)象在整個(gè)生命周期內(nèi)保持穩(wěn)定，避免了回調(diào)形式 ref 的頻繁創(chuàng)建。

使用場(chǎng)景

類組件中的引用：對(duì)于類組件，createRef 是管理 ref 的推薦方式，它保證了每個(gè)組件實(shí)例擁有獨(dú)立的、穩(wěn)定的引用。
函數(shù)組件中的引用：在函數(shù)組件中，useRef 是創(chuàng)建 ref 的標(biāo)準(zhǔn)方式，它提供了與 createRef 類似的功能，適合需要持久引用的場(chǎng)景。

結(jié)語(yǔ)

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

最新評(píng)論