ReactJS - useRef

React 會隨著元件狀態的變化自動發出 HTML 元素。這極大地簡化了 UI 開發，因為只需更新元件的狀態即可。傳統上，通常需要直接訪問 DOM 元素來更新元件的 UI。

有時我們可能需要回退到直接訪問 DOM 元素並更新元件的 UI。React ref 在這種情況下提供了幫助。它提供了對 DOM 元素的直接訪問。此外，它確保元件與 React 虛擬 DOM 和 HTML DOM 順利協同工作。

React 提供了一個函式 createRef 用於在基於類的元件中建立 ref。函式元件中 createRef 的對應項是 useRef hook。讓我們學習如何在本章中使用 useRef。

useRef hook 的簽名

useRef 的目的是返回一個可變物件，該物件將在重新渲染之間持續存在。useRef 的簽名如下：

<refObj> = useRef(<val>)

這裡：

val 是要為返回的可變物件 refObj 設定的初始值。
refObj 是 hook 返回的物件。

為了將 DOM 物件自動附加到 refObj，應將其設定在元素的 ref 屬性中，如下所示：

<input ref={refObj} />

要訪問附加的 DOM 元素，請使用 refObj 的 current 屬性，如下所示：

const refElement = refObj.current

應用 ref hook

讓我們學習如何在本章中透過建立一個 React 應用來應用 useRef。

首先，使用以下命令建立一個新的 React 應用並啟動它。

create-react-app myapp
cd myapp
npm start

接下來，在 component 資料夾下建立一個 React 元件 RefInput (src/components/RefInput.js)

function RefInput() {
   return <div>Hello World</div>
}
export default RefInput

接下來，更新根元件 (App.js) 以使用我們的新元件。

import RefInput from "./components/RefInput";
function App() {
   return (
      <div style={{ padding: "5px"}}>
         <RefInput />
      </div>
   );
}
export default App;

接下來，向 RefInput 元件新增計數器功能，如下所示：

import {useState} from 'react'
function RefInput() {
   const [count, setCount] = useState(0)
   const handleClick = () => setCount(count + 1)
   return (
      <div>
         <div>Counter: {count} <button onClick={handleClick}>+</button></div>
      </div>
   )
}
export default RefInput

這裡我們：

使用 useState hook 來處理計數器狀態變數 (count)。
在 JSX 中渲染計數器狀態變數。
新增一個按鈕並附加一個點選處理程式事件 (handleClick)，它將使用 setCount 方法遞增計數器。

接下來，新增一個輸入欄位並根據使用者在輸入欄位中輸入的值顯示問候訊息，如下所示：

import {useState, useRef} from 'react'
function RefInput() {
   const [count, setCount] = useState(0)
   const inputRef = useRef(null)
   const labelRef = useRef(null)
   console.log("RefInput is (re)rendered")
   const handleClick = () => setCount(count + 1)
   const handleChange = () => labelRef.current.innerText = inputRef.current.
   value == "" ? "World" : inputRef.current.value
   return (
      <div>
         <div>Counter: {count} <button onClick={handleClick}>+</button></div>
            <div style={{ paddingTop: "5px"}}>
               <label>Enter your name: </label><input type="text" name="username"
                  ref={inputRef} onChange={handleChange}/>
               <br />
            <div>Hello, <span ref={labelRef}></span></div>
         </div>
      </div>
   )
}
export default RefInput

這裡我們：

建立一個 ref，inputRef 來表示輸入元素，並透過 ref 屬性將其附加到相關元素。
建立另一個 ref，labelRef 來表示問候訊息元素，並透過 ref 屬性將其附加到相關元素。
將事件處理程式 handleChange 附加到輸入元素。事件處理程式使用 inputRef ref 獲取問候訊息，並使用 labelRef ref 更新訊息。

接下來，在瀏覽器中開啟應用程式並輸入您的姓名。應用程式將更新問候訊息，如下所示。

檢查您的控制檯，您會注意到元件沒有重新渲染。由於 React 僅在狀態更改時重新渲染，而 ref 不會進行任何狀態更改，因此元件不會重新渲染。

接下來，單擊“+”按鈕。它將透過重新渲染元件來更新計數器，因為狀態 (count) 已更改。如果您仔細觀察，您會發現訊息保持不變。這種行為的原因是 ref 值由 React 在渲染之間保留。

useRef 的用例

useRef 的一些用例如下：

訪問 JavaScript DOM API - JavaScript DOM API 提供了豐富的功能來操作應用程式的 UI。當應用程式功能需要訪問 JavaScript DOM API 時，可以使用 useRef 來檢索原始 DOM 物件。一旦檢索到原始 DOM 物件，應用程式就可以使用 DOM API 來訪問所有功能。DOM API 的一些示例如下：

聚焦輸入元素
選擇文字
使用媒體播放 API 播放音訊或影片

命令式動畫 - Web 動畫 API 透過指令式程式設計而不是宣告式程式設計提供了一套豐富的動畫功能。要使用 Web 動畫 API，我們需要訪問原始 DOM。

與第三方庫整合 - 由於第三方庫需要訪問原始 DOM 來執行其功能，因此必須使用 useRef 從 React 獲取 DOM 引用並將其提供給第三方庫。

總結

即使 React 開發 UI 的方式簡單易用，但在某些情況下，基於 DOM API 開發 UI 也有其自身的優勢。useRef hook 完美地適應了這些場景，並提供了一個簡單幹淨的 API 來直接訪問 DOM 元素及其 API。

列印頁面