在React中，ref是一個(gè)引用對(duì)象，用于訪問React元素或組件的真實(shí)DOM節(jié)點(diǎn)或React組件的實(shí)例。ref提供了一種在React中直接訪問DOM節(jié)點(diǎn)或組件實(shí)例的方式，而不需要通過props或上下文傳遞數(shù)據(jù)。在本文中，我們將詳細(xì)探討ref的使用場(chǎng)景、注意事項(xiàng)以及在不同情況下如何正確使用ref。

1. 使用場(chǎng)景

1.1 訪問DOM節(jié)點(diǎn)

最常見的ref用例之一是訪問DOM節(jié)點(diǎn)。通過ref，可以獲取元素的引用，并直接操作或查詢DOM。

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


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


  useEffect(() => {
    inputRef.current.focus();
  }, []);


  return <input ref={inputRef} />;
}

1.2 調(diào)用子組件的方法

還可以使用ref來調(diào)用子組件中暴露的方法或訪問子組件中的狀態(tài)。

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';


function ParentComponent() {
  const childRef = useRef(null);


  const handleClick = () => {
    childRef.current.someMethod();
  };


  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </div>
  );
}

2. 注意事項(xiàng)

2.1 避免過度使用ref

盡管ref提供了直接訪問DOM節(jié)點(diǎn)的能力，但過度使用ref可能會(huì)導(dǎo)致代碼變得難以理解和維護(hù)。盡量避免在大型組件樹中頻繁使用ref。

2.2 避免直接修改DOM

使用ref時(shí)，應(yīng)避免直接修改DOM。盡量使用React提供的狀態(tài)和屬性來更新UI，以保持應(yīng)用程序的一致性和可維護(hù)性。

2.3 使用函數(shù)式組件中的ref

在函數(shù)式組件中，可以使用useRef鉤子來創(chuàng)建ref，并將其傳遞給需要引用的元素或組件。

2.4 避免在render方法中使用ref

在render方法中使用ref會(huì)導(dǎo)致不穩(wěn)定的行為，因?yàn)閞ef的值可能在每次渲染時(shí)都會(huì)重新創(chuàng)建。如果需要在render方法中使用ref，請(qǐng)確保它是穩(wěn)定的，例如通過使用useRef。

3. 使用ref的注意事項(xiàng)

3.1 異步更新

當(dāng)通過ref訪問組件或DOM時(shí)，需要注意異步更新的情況。由于ref的更新可能是異步的，因此在訪問ref之前，需要確保組件已經(jīng)被正確渲染。

3.2 避免在函數(shù)組件中過度使用ref

在函數(shù)組件中，ref的使用應(yīng)該謹(jǐn)慎。通常情況下，應(yīng)盡量避免在函數(shù)組件中使用ref，除非有必要訪問DOM節(jié)點(diǎn)或調(diào)用子組件的方法。

3.3 使用forwardRef包裝子組件

如果需要在函數(shù)組件中使用ref并訪問其子組件的DOM節(jié)點(diǎn)或方法，可以使用forwardRef來包裝子組件，以使其能夠接收ref。

const ChildComponent = React.forwardRef((props, ref) => {
  return <input ref={ref} />;
});

ref與state的不同

Ref和State是React中兩種不同的概念，它們?cè)谟猛尽⒆饔梅秶褪褂梅绞缴嫌泻艽蟮膮^(qū)別。

1. 作用范圍

• Ref： Ref用于訪問React元素或組件的實(shí)例或DOM節(jié)點(diǎn)。它們?cè)试S直接訪問底層DOM節(jié)點(diǎn)或React組件的實(shí)例。
• State： State用于存儲(chǔ)組件的可變數(shù)據(jù)，可以通過setState函數(shù)更新。State通常用于管理組件的內(nèi)部狀態(tài)。

2. 數(shù)據(jù)類型

• Ref： Ref可以引用任何JavaScript值，包括DOM節(jié)點(diǎn)、React組件實(shí)例或其他JavaScript對(duì)象。
• State： State通常用于存儲(chǔ)組件的狀態(tài)數(shù)據(jù)，可以是基本數(shù)據(jù)類型（如字符串、數(shù)字、布爾值）或復(fù)雜數(shù)據(jù)類型（如對(duì)象、數(shù)組）。

3. 更新方式

• Ref： Ref不會(huì)觸發(fā)組件的重新渲染，它們是完全獨(dú)立于組件渲染的。因此，對(duì)ref的更新不會(huì)導(dǎo)致組件重新渲染。
• State： State的更新會(huì)觸發(fā)組件的重新渲染。當(dāng)調(diào)用setState函數(shù)時(shí)，React會(huì)重新渲染組件，并將新的狀態(tài)應(yīng)用于組件。

4. 生命周期

• Ref： Ref的生命周期與組件的生命周期無關(guān)。它們?cè)诮M件掛載、更新和卸載時(shí)都保持不變。
• State： State的生命周期與組件的生命周期密切相關(guān)。State在組件的生命周期中會(huì)發(fā)生變化，并隨著組件的掛載、更新和卸載而被創(chuàng)建、更新和銷毀。

5. 使用方式

• Ref： Ref通常用于訪問DOM節(jié)點(diǎn)、調(diào)用子組件的方法或在組件之間共享數(shù)據(jù)。它們可以在函數(shù)組件和類組件中使用。
• State： State用于存儲(chǔ)組件的內(nèi)部狀態(tài)數(shù)據(jù)，并且只能在類組件中使用。在函數(shù)組件中，可以使用useState鉤子來創(chuàng)建和管理狀態(tài)。

小結(jié)

• ref 是一種脫圍機(jī)制，用于保留不用于渲染的值。
• ref 是一個(gè)普通的 JavaScript 對(duì)象，具有一個(gè)名為 current 的屬性，你可以對(duì)其進(jìn)行讀取或設(shè)置。
• 通過調(diào)用 useRef Hook 來定義ref。
• 與 state 一樣，ref 允許你在組件的重新渲染之間保留信息。
• 與 state 不同，設(shè)置 ref 的 current 值不會(huì)觸發(fā)重新渲染。
• 不要在渲染過程中讀取或?qū)懭?ref.current。