介紹
什麼是 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} />;
登入後複製
您可能會在控制台中收到錯誤：
警告：不能給函數元件提供引用。嘗試存取此引用將失敗。您是想使用 React.forwardRef() 嗎？
要解決此問題，請使用forwardRef 包裝自訂元件，如下所示：
const inputRef = useRef(null);
return <MyInput value={value} ref={inputRef} />;
登入後複製
自訂元件：
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中文網其他相關文章！
