掌握 React 的 useRef Hook：使用 DOM 和可變值

React 中的 useRef Hook

useRef 鉤子是一個內建的 React 鉤子，用於在渲染之間保留值而不導致重新渲染。它通常用於直接與 DOM 元素 交互，並儲存需要在渲染之間保留但不一定需要觸發重新渲染的值。

---

什麼是useRef？

useRef 鉤子主要用於兩個目的：

1. 存取 DOM 元素：它提供了一種直接引用 DOM 節點或 React 元素的方法，可讓您以命令方式與它們互動。
2. 跨渲染保留值：它可以儲存可變值，與狀態不同，這些值在更新時不會觸發重新渲染。

---

useRef 語法

const myRef = useRef(initialValue);

• myRef：由useRef建立的引用物件。
• initialValue：要儲存在引用物件中的初始值。這可以是任何東西，例如 DOM 節點、物件或原始值。

useRef 傳回的參考物件有一個 current 屬性，它是實際值儲存的位置。

---

useRef 的工作原理

1. 訪問 DOM 元素： 您可以使用 useRef 直接存取功能元件中的 DOM 元素，就像類別元件中的 ref 屬性一樣。

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

     const focusInput = () => {
       // Access the DOM node and focus it
       inputRef.current.focus();
     };

     return (
       <div>
         <input ref={inputRef} />
         <button onClick={focusInput}>Focus Input</button>
       </div>
     );
   };

• 這裡，inputRef用於引用;元素，並且 focusInput 函數在點擊按鈕時聚焦於該輸入元素。

1. 跨渲染儲存可變值： 您可以使用 useRef 來儲存在渲染過程中持續存在的值，但在變更時不會觸發重新渲染。

   const TimerComponent = () => {
     const countRef = useRef(0);

     const increment = () => {
       countRef.current++;
       console.log(countRef.current);  // This will log the updated value
     };

     return (
       <div>
         <p>Current count (does not trigger re-render): {countRef.current}</p>
         <button onClick={increment}>Increment</button>
       </div>
     );
   };

• 在此範例中，countRef 儲存一個可變值。該值可以更新而不會導致重新渲染，這與 useState 不同，useState 會觸發重新渲染。

---

useRef 的常見用例

1. 存取 DOM 元素：例如，聚焦輸入欄位、捲動到特定元素或測量元素的大小。

   const ScrollToTop = () => {
     const topRef = useRef(null);

     const scrollToTop = () => {
       topRef.current.scrollIntoView({ behavior: 'smooth' });
     };

     return (
       <div>
         <div ref={topRef}>



<ol>
<li>
<strong>Storing Previous State</strong>: If you need to track the previous value of a prop or state value.
</li>
</ol>

<pre class="brush:php;toolbar:false">   const PreviousState = ({ count }) => {
     const prevCountRef = useRef();

     useEffect(() => {
       prevCountRef.current = count; // Store the current value in the ref
     }, [count]);

     return (
       <div>
         <p>Current Count: {count}</p>
         <p>Previous Count: {prevCountRef.current}</p>
       </div>
     );
   };

• 說明：prevCountRef 儲存之前的 count 值，可以在不觸發重新渲染的情況下存取該值。

1. 避免複雜值的重新渲染：如果你有一個不需要觸發重新渲染的大型物件或複雜資料結構，useRef 可以儲存它而不影響元件的表演。

2. 追蹤間隔或超時：您可以儲存逾時或間隔的 ID，以便稍後清除它們。
   

const myRef = useRef(initialValue);

• 說明：intervalRef 儲存間隔的 ID，可用於在元件卸載時清除間隔。

---

useRef 和 useState 之間的主要區別

功能 useRef 使用狀態 標題>

Feature	useRef	useState
Triggers re-render	No (does not trigger a re-render)	Yes (triggers a re-render when state changes)
Use Case	Storing mutable values or DOM references	Storing state that affects rendering
Value storage	Stored in current property	Stored in state variable
Persistence across renders	Yes (keeps value across renders without triggering re-render)	Yes (but triggers re-render when updated)

觸發重新渲染 否（不觸發重新渲染） 是（狀態變更時觸發重新渲染） 用例 儲存可變值或 DOM 引用 儲存影響渲染的狀態 價值儲存 儲存在目前屬性中 儲存在狀態變數中 跨渲染的持久性 是（在渲染之間保留值而不觸發重新渲染） 是（但更新時觸發重新渲染） 表>

---

範例：使用 useRef 進行表單驗證

這是一個使用 useRef 進行表單驗證的範例，重點在於無效時的輸入欄位。

從 'react' 匯入 React, { useRef, useState };

const FormComponent = () =>; {
  const inputRef = useRef();
  const [inputValue, setInputValue] = useState('');
  const [錯誤，setError] = useState('');

  const validateInput = () =>; {
    如果（輸入值===''）{
      setError('輸入不能為空');
      inputRef.current.focus(); // 聚焦輸入元素
    } 別的 {
      設定錯誤('');
    }
  };

  返回 （
    <div>
      ; setInputValue(e.target.value)}
      >>
      {錯誤&<p>



</p>
<ul>
<li>
<strong>說明</strong>：

<ul>
<li>inputRef 用於輸入值為空時聚焦於輸入元素。 </li>
<li>使用 useState 無法實現此功能，因為關注 DOM 元素需要直接存取該元素，而 useState 無法提供這一點。 </li>
</ul>


</li>

</ul>


<hr>

<h3>
  
  
  <strong>使用總結Ref Hook</strong>
</h3>

<ul>
<li>
<strong>useRef</strong> 用於儲存 DOM 元素和可變值的引用，更新時不會觸發重新渲染。 </li>
<li>它對於直接存取 DOM 節點很有用（例如，用於聚焦、滾動或動畫）。 </li>
<li>
<strong>useRef</strong> 還可以方便地儲存跨渲染持續存在的值，而無需觸發重新渲染，例如追蹤先前的值或儲存超時/間隔 ID。 </li>
<li>
<strong>主要區別</strong>：與 useState 不同，更新 useRef 不會觸發重新渲染。 </li>
</ul>


<hr>

<h3>
  
  
  <strong>結論</strong>
</h3>

<p><strong>useRef</strong> 鉤子對於處理 React 中的可變值和直接 DOM 操作非常有用。無論您是使用表單元素、追蹤先前的狀態還是與第三方庫交互，useRef 都提供了一個乾淨、高效的解決方案。透過使用 useRef，您可以保持持久性，而不會觸發不必要的重新渲染，這使其成為效能敏感操作的絕佳選擇。 </p>


<hr>


          </div>

            
        

以上是掌握 React 的 useRef Hook：使用 DOM 和可變值的詳細內容。更多資訊請關注PHP中文網其他相關文章！