在React中，ref是一個引用對象，用于訪問React元素或組件的真實DOM節點或React組件的實例。ref提供了一種在React中直接訪問DOM節點或組件實例的方式，而不需要通過props或上下文傳遞數據。在本文中，我們將詳細探討ref的使用場景、注意事項以及在不同情況下如何正確使用ref。

1. 使用場景

1.1 訪問DOM節點

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

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


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


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


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

1.2 調用子組件的方法

還可以使用ref來調用子組件中暴露的方法或訪問子組件中的狀態。

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. 注意事項

2.1 避免過度使用ref

盡管ref提供了直接訪問DOM節點的能力，但過度使用ref可能會導致代碼變得難以理解和維護。盡量避免在大型組件樹中頻繁使用ref。

2.2 避免直接修改DOM

使用ref時，應避免直接修改DOM。盡量使用React提供的狀態和屬性來更新UI，以保持應用程序的一致性和可維護性。

2.3 使用函數式組件中的ref

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

2.4 避免在render方法中使用ref

在render方法中使用ref會導致不穩定的行為，因為ref的值可能在每次渲染時都會重新創建。如果需要在render方法中使用ref，請確保它是穩定的，例如通過使用useRef。

3. 使用ref的注意事項

3.1 異步更新

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

3.2 避免在函數組件中過度使用ref

在函數組件中，ref的使用應該謹慎。通常情況下，應盡量避免在函數組件中使用ref，除非有必要訪問DOM節點或調用子組件的方法。

3.3 使用forwardRef包裝子組件

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

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

ref與state的不同

Ref和State是React中兩種不同的概念，它們在用途、作用范圍和使用方式上有很大的區別。

1. 作用范圍

• Ref： Ref用于訪問React元素或組件的實例或DOM節點。它們允許直接訪問底層DOM節點或React組件的實例。
• State： State用于存儲組件的可變數據，可以通過setState函數更新。State通常用于管理組件的內部狀態。

2. 數據類型

• Ref： Ref可以引用任何JavaScript值，包括DOM節點、React組件實例或其他JavaScript對象。
• State： State通常用于存儲組件的狀態數據，可以是基本數據類型（如字符串、數字、布爾值）或復雜數據類型（如對象、數組）。

3. 更新方式

• Ref： Ref不會觸發組件的重新渲染，它們是完全獨立于組件渲染的。因此，對ref的更新不會導致組件重新渲染。
• State： State的更新會觸發組件的重新渲染。當調用setState函數時，React會重新渲染組件，并將新的狀態應用于組件。

4. 生命周期

• Ref： Ref的生命周期與組件的生命周期無關。它們在組件掛載、更新和卸載時都保持不變。
• State： State的生命周期與組件的生命周期密切相關。State在組件的生命周期中會發生變化，并隨著組件的掛載、更新和卸載而被創建、更新和銷毀。

5. 使用方式

• Ref： Ref通常用于訪問DOM節點、調用子組件的方法或在組件之間共享數據。它們可以在函數組件和類組件中使用。
• State： State用于存儲組件的內部狀態數據，并且只能在類組件中使用。在函數組件中，可以使用useState鉤子來創建和管理狀態。

小結

• ref 是一種脫圍機制，用于保留不用于渲染的值。
• ref 是一個普通的 JavaScript 對象，具有一個名為 current 的屬性，你可以對其進行讀取或設置。
• 通過調用 useRef Hook 來定義ref。
• 與 state 一樣，ref 允許你在組件的重新渲染之間保留信息。
• 與 state 不同，設置 ref 的 current 值不會觸發重新渲染。
• 不要在渲染過程中讀取或寫入 ref.current。