了解 useRef：初學者指南

介紹

什麼是 useRef

useRef 是 React hook，它允許建立對值或 DOM 元素的持久參考。與 useState 用於管理觸發重新渲染的狀態不同，useRef 主要用於副作用或直接存取 DOM 元素。

為什麼要使用 useRef

useRef 鉤子特別有用：

• 直接存取 DOM 元素：您可以使用 useRef 取得 DOM 元素的引用，讓您可以直接操作它而無需觸發重新渲染。
• 建立持久值：與狀態不同，使用 useRef 建立的值在渲染之間保留，這使得它們非常適合儲存不需要觸發重新渲染的資料。

了解 useRef 鉤子

useRef 鉤子傳回一個具有 .current 屬性的物件。當您呼叫 useRef 時，它會建立對您作為參數傳遞的值的持久性參考。該引用儲存在傳回物件的 .current 屬性中。

使用 useRef 建立引用

要建立引用，只需使用初始值呼叫 useRef 即可。

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

在上面的範例中，countRef 是初始值 0 的參考。

訪問參考值

要存取參考值，只需呼叫帶有 .current 屬性的 countRef 物件

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current++
  }

  return (
    <div>
      <p>Count: {countRef.current}</p>
      <button onclick="{increment}">Increment</button>
    </div>
  )
}

export default App

在上面的範例中，如果您按一下按鈕，它將呼叫增量函數，這將增加 countRef，但計數不會在

Count: {countRef.current}

處更新。因為更新 useRef 不會像 useState 那樣導致重新渲染。

將程式碼更新為下面的範例以獲得您期望的結果。

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current++
    setCount(countRef.current)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onclick="{increment}">Increment</button>
    </div>
  )
}

export default App

useRef 的常見用例

直接存取和操作 DOM 元素

可以使用 useRef 鉤子來存取和更改 html 元素的屬性

const App = () => {
  const inputRef = useRef(null)

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

  return(
    <input ref="{inputRef}">
  )
}

持久的價值觀

與 useState 或變數不同，useRef 可以在重新渲染之間傳遞值和數據，例如快取數據或配置設定。

效能最佳化

在某些情況下，使用 useRef 可以透過避免不必要的重新渲染來幫助元件最佳化。就像如果您有一個渲染大量項目清單的元件，您可以使用 useRef 快取它，並且僅修改重新渲染已更改的項目。

最佳實踐和注意事項

• 渲染期間請勿寫入 或讀取 ref.current 
• 您可以變更 ref.current 屬性
• 當你改變 ref.current 屬性時，React 不會重新渲染你的元件
• 資訊是組件的每個副本的本地（與共享的外部變數不同）。您可以在重新渲染之間儲存資訊（與常規變數不同，每次渲染時都會重設）。
• 您可以從事件處理程序或效果讀取或寫入參考。
• 使用 ref 操作 dom

將引用傳遞給自訂元件。

如果您嘗試像這樣將引用傳遞給您自己的元件

const inputRef = useRef(null);

return <myinput ref="{inputRef}"></myinput>;

您可能會在控制台中收到錯誤：
警告：不能給函數元件提供引用。嘗試存取此引用將失敗。您是想使用 React.forwardRef() 嗎？

要解決此問題，請使用forwardRef 包裝自訂元件，如下所示：

const inputRef = useRef(null);

return <myinput value="{value}" ref="{inputRef}"></myinput>;

自訂元件：

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    <input value="{value}" onchange="{onChange}" ref="{ref}">
  );
});

export default MyInput;

結論

useRef 是一個強大的鉤子，主要用於副作用使用，例如在重新渲染之間快取資料或存取 DOM 元素。它是 React 應用程式中效能優化和實現特定功能的絕佳工具。

以上是了解 useRef：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！