使用 React useRef Hook 掌握 DOM 操作和效能

理解 React useRef Hook：從零到英雄

介紹

使用 React 建立應用程式時，開發人員面臨的關鍵挑戰是管理元件狀態和效能。 React 的 useState 鉤子廣泛用於狀態管理，但有時會導致不必要的重新渲染。這就是 useRef 鉤子變得無價的地方。它允許我們直接與 DOM 互動、追蹤更改並儲存值，而無需觸發元件重新渲染。

在本指南中，我們將逐步探索 useRef 鉤子，涵蓋其目的、優點和常見用例。到最後，即使是初學者也能夠自信地實現 useRef 來解決 React 應用程式中的各種挑戰。

什麼是 React useRef Hook？

useRef 鉤子是 React 核心鉤子 API 的一部分。它會傳回一個帶有 .current 屬性的可變對象，該物件可用於儲存您想要的任何值。與狀態不同，變更 .current 值不會導致元件重新渲染。

這是 useRef 的簡單語法：

const myRef = useRef(initialValue);

• initialValue：useRef 物件的初始值。
• myRef.current：儲存參考值的屬性。

為什麼要使用 useRef？

• 避免不必要的重新渲染：狀態變更會觸發 React 中的重新渲染，但使用 useRef 允許您在渲染之間保留值，而不會導致更新。
• 存取 DOM 元素：通常，我們需要與原生 DOM 元素進行交互，例如聚焦輸入欄位。 useRef 提供了一種有效的方法來做到這一點。
• 追蹤狀態變更：您可以追蹤先前狀態等值或跨渲染持續存在的渲染計數。

問題：React State 導致不必要的重新渲染

在 React 中，狀態變更會觸發重新渲染。對於效能關鍵型應用程序，過多的重新渲染可能會降低應用程式的速度。舉個例子吧。

範例問題：導致重新渲染的狀態

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

在此範例中，按一下按鈕將導致整個元件重新渲染，即使您可能只關心更新計數等特定資料。

解決方案：使用useRef來防止重新渲染

使用 useRef，我們可以儲存值而不會導致不必要的重新渲染。

解決問題的參考範例

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

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

在這個例子中，我們增加 countRef.current 而不觸發重新渲染，因為當 useRef 改變時 React 不會重新渲染。

使用 useRef 存取 DOM 元素

React 的聲明性本質抽象化了直接的 DOM 操作。但有時我們需要直接存取 DOM 元素，例如聚焦輸入欄位或捲動到特定部分。這就是 useRef 發揮作用的地方。

範例：聚焦輸入字段

const myRef = useRef(initialValue);

在此範例中，我們將 inputRef 指派給輸入欄位的 ref 屬性。點擊按鈕時會呼叫 handleFocus 函數，讓我們可以使用 inputRef.current.focus() 以程式方式聚焦輸入欄位。

追蹤狀態變化而不重新渲染

有時，您需要隨著時間的推移追蹤值而不觸發重新渲染。一個常見的用例是追蹤變數的先前狀態。

範例：使用 useRef 追蹤先前狀態

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

在此範例中，我們使用 useRef 來儲存先前的值。元件使用當前值進行渲染，但先前的值儲存在 prevValueRef.current 中，並且不會觸發重新渲染。

useRef 會導致重新渲染嗎？

不，修改 useRef 物件不會導致重新渲染。此行為使 useRef 非常適合儲存需要在渲染中保留但不想用作渲染邏輯的一部分的值。

範例：useRef 更改時不重新渲染

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

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onclick="{handleClick}">Increment</button>
    </div>
  );
};

在這個範例中，即使我們在每次重新渲染時更改 renderCountRef.current，它也不會導致任何額外的重新渲染。

進階範例：用於追蹤點擊事件的 useRef

讓我們建立一個更高級的範例，其中我們計算點擊按鈕而不會導致重新渲染的次數。

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

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref="{inputRef}" type="text">
      <button onclick="{handleFocus}">Focus Input</button>
    </div>
  );
};

在這種情況下，按鈕的點擊計數會透過 clickCountRef.current 進行跟踪，但 React 不會重新渲染元件。

useRef 的常見錯誤

忘記初始化 Ref

永遠記得用值或 null 初始化您的參考。

const PreviousStateExample = ({ value }) => {
  const prevValueRef = useRef();

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  const prevValue = prevValueRef.current;

  return (
    <div>
      <p>Current Value: {value}</p>
      <p>Previous Value: {prevValue}</p>
    </div>
  );
};

使用 useRef 儲存元件狀態

不要用 useRef 來取代 useState。 useRef 只能用於不影響渲染的值。如果該值影響元件的顯示，請使用 useState.

const NoRenderOnRefChange = () => {
  const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current += 1;
    console.log("Component re-rendered:", renderCountRef.current);
  });

  return <p>Check the console for render count</p>;
};

常見問題 (FAQ)

1.什麼時候應該使用useRef而不是useState？

當您需要儲存可變值而不觸發重新渲染時，請使用 useRef。對於影響 UI 的值，請使用 useState。

2. 我可以使用useRef來儲存以前的狀態嗎？

是的，你可以使用useRef來儲存先前的值而不觸發重新渲染，但請記住更新useEffect中的引用。

3.修改useRef是否會導致重新渲染？

不，修改 useRef.current 不會導致重新渲染。這就是為什麼它非常適合您想要避免不必要的更新的場景。

4. 如何使用 useRef 存取 DOM 元素？

將 useRef 賦給 DOM 元素的 ref 屬性，則可以透過 ref.current 存取 DOM 元素。

結論

useRef hook 是 React 中一個多功能且強大的工具，它允許開發人員儲存值、追蹤先前的狀態以及與 DOM 元素交互，而不會導致重新渲染。從管理點擊計數到集中輸入，useRef 為優化效能和提供更乾淨、更有效率的解決方案提供了機會。透過本指南，您現在掌握了在各種場景中實現 useRef 的知識，從初級用例到更高級的應用程式。

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