React useRef Hook

The useRef Hook 允許你在渲染之間持久化值。

它可以用來儲存一個可變值，該值在更新時不會導致重新渲染。

它可以用來直接訪問 DOM 元素。

不引起重新渲染

如果我們嘗試使用 useState Hook 來計算我們的應用程式渲染了多少次，我們將陷入無限迴圈，因為這個 Hook 本身就會導致重新渲染。

為了避免這種情況，我們可以使用 useRef Hook。

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

useRef() 只返回一個項。它返回一個名為 current 的物件。

當我們初始化 useRef 時，我們設定初始值：useRef(0)。

在你的電腦上執行此程式碼，嘗試輸入內容，看看應用程式的渲染計數如何增加。

訪問 DOM 元素

通常，我們希望讓 React 處理所有 DOM 操作。

但是，在某些情況下，useRef 可以使用而不會引起問題。

在 React 中，我們可以在元素上新增一個 ref 屬性來直接在 DOM 中訪問它。

import { useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const inputElement = useRef();

  const focusInput = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

跟蹤狀態更改

useRef Hook 還可以用來跟蹤前一個狀態值。

這是因為我們可以在渲染之間持久化 useRef 值。

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

這次我們結合使用 useState、useEffect 和 useRef 來跟蹤前一個狀態。

在 useEffect 中，每次透過在輸入框中輸入文字來更新 inputValue 時，我們都在更新 useRef 的當前值。