ReactJS - Refs 和 DOM

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

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

React 提供了一個函式 createRef，用於在基於類的元件中建立 ref。讓我們在本節中學習如何使用 createRef。

createRef 方法的簽名

createRef 的目的是返回一個可變物件，該物件將在重新渲染之間持久化。createRef 的簽名如下所示：

<refObj> = React.createRef()

這裡，refObj 是 hook 返回的物件

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

<input ref={refObj} />

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

const refElement = refObj.current

應用 ref

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

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

create-react-app myapp
cd myapp
npm start

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

import React from "react";
class SimpleRef extends React.Component {
   render() {
      return (
         <div>Hello World</div>
      );
   }
}
export default SimpleRef;

接下來，開啟App.css (src/App.css) 並刪除所有樣式。然後，開啟App 元件 (src/App.js) 並使用我們的新SimpleRef 元件更新內容，如下所示：

import './App.css'
import SimpleRef from './Components/SimpleRef'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleRef />
            </div>
         </div>
      </div>
   );
}
export default App;

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

import React from "react";
class SimpleRef extends React.Component {
   
   constructor(props) {
      super(props)
      this.state = {
         count: 0
      }
      this.handleClick = this.handleClick.bind(this);
   }
   handleClick() {
      this.setState(
         prevState => ({
            count: prevState.count + 1
         })
      )
   }
   render() {
      return (
         <div>
            <div>Counter: {this.state.count} <button onClick={this.handleClick}>+</button></div>
         </div>
      )
   }
}
export default SimpleRef;

這裡我們有：

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

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

import React from "react";
import { createRef } from "react";
class SimpleRef extends React.Component {
   constructor(props) {
      super(props)
      this.state = {
         count: 0
      }
      this.handleClick = this.handleClick.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.inputRef = createRef()
      this.labelRef = createRef()
   }
   handleClick() {
      this.setState(prevState => ({
         count: prevState.count + 1
      }))
   }
   handleChange() {
      this.labelRef.current.innerText =
      this.inputRef.current.value == "" ? "World" : this.inputRef.current.value
   }
   render() {
      return (
         <div>
            <div>Counter: {this.state.count} <button onClick={this.handleClick}>+</button></div>
            <div style={{ paddingTop: "5px"}}>
               <label>Enter your name: </label><input type="text" name="username"
                  ref={this.inputRef} onChange={this.handleChange}/>
               <br />
               <div>Hello, <span ref={this.labelRef}></span></div>
            </div>
         </div>
      )
   }
}
export default SimpleRef;

這裡我們有：

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

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

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

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

createRef 的用例

createRef 的一些用例如下：

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

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

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

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

總結

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

列印頁面