React中ref的三種形式使用小結(jié)

更新時間：2025年04月25日 11:00:23 作者：Aphasia

ref是一個重要的功能,ref主要有三種形式：字符串形式、回調(diào)形式和?createRef,下面就來介紹一下,具有一定的參考價值,感興趣的可以了解一下

引言

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

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

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

ref 可以使用字符串形式來引用 DOM 元素或組件實例，如下所示：

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

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

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

使用場景

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

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

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

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

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 元素
  }
}

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

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

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

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

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

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

使用場景

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

三、createRef（推薦）

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

為什么推薦使用 createRef？

createRef 創(chuàng)建的 ref 是專人專用的，每個組件實例都會擁有一個獨立的 ref 對象。在組件的生命周期內(nèi)，ref 的 current 屬性會保持對相應(yīng) DOM 元素的引用，且不會因為重新渲染而發(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)建了一個 ref，并將其賦值給 this.myDivRef。每個組件實例都會擁有一個獨立的 myDivRef。當(dāng)組件掛載時，this.myDivRef.current 會指向 DOM 元素，且在組件的生命周期內(nèi)不會變化，保證了 ref 的一致性。

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

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

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

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

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

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

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

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

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

使用場景

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