ReactJS - createRef() 函式

---

---

createRef() 是 React 中用於管理和互動應用程式中專案的工具。它通常用於類元件，但我們還將討論其等效項 useRef()，它通常用於函式元件。

它類似於可以容納專案陣列的容器。它用於在 React 中在類元件內建立引用物件。此引用物件具有一個名為 current 的屬性，可以將其調整為各種值。

語法

class MyClass extends Component {
   classRef = createRef();
   // ...
}

在此示例中，classRef 是對某物的引用，我們可以使用它來與元件中的該事物進行互動。

引數

createRef() 不接受任何引數。

返回值

呼叫它時，它返回一個物件，其 current 屬性預設設定為 null。此屬性稍後可以更改為引用元件中的不同元素。

示例

示例 1

import React, { createRef, Component } from 'react';
import './App.css';

class App extends Component {
   inputRef = createRef();   
   componentDidMount() {
      this.inputRef.current.focus();
   }
   
   render() {
      return <div className='App'><input ref={this.inputRef} />
      </div>
   }
}

export default App;

輸出

啟動程式時，輸入游標會立即放置在框內，準備讓我們開始鍵入。這在我們需要使用者擁有流暢且專注的輸入體驗的情況下非常有用，例如線上表單或搜尋欄。

示例 2

在這個應用程式中，我們設定了一個計時器，每秒鐘滴答一次。它可用於顯示已過去的時間或定期啟動事件。計時器在應用程式載入時開始，在應用程式關閉時結束。

import React, { createRef, Component } from 'react';
import './App.css';

class TimerComponent extends Component {
   timerRef = createRef();   
   componentDidMount() {
      this.timerRef.current = setInterval(() => {
         console.log('Timer tick');
      }, 1000);
   }
   
   componentWillUnmount() {
      clearInterval(this.timerRef.current);
   }   
   render() {
      return <div>Timer Component</div>;
   }
}

export default TimerComponent;

輸出

此應用程式完全關於管理時間敏感的任務。啟動應用程式時，計時器開始每秒鐘滴答一次。當我們需要計時或定期觸發某些事件時，它會非常方便。退出應用程式時，計時器停止。

示例 3

在這個應用程式中，當我們單擊一個按鈕時，一個框的顏色會變為淺藍色。它展示瞭如何使用 React 來輕鬆地互動和更改我們網站上專案的顯示。這對於建立互動式和動態使用者介面非常有用。

import React, { createRef, Component } from 'react';

class App extends Component {
   divRef = createRef();   
   handleClick = () => {
      this.divRef.current.style.backgroundColor = 'lightblue';
   };
   
   render() {
      return <div ref={this.divRef} onClick={this.handleClick}><h1>Click me!</h1></div>;
   }
}

export default App;

輸出

執行應用程式後，它允許我們快速與網頁元素互動。單擊按鈕時，方框的顏色會變為淺藍色。此示例顯示了 React 如何讓我們輕鬆調整和控制網頁上專案的樣式。

侷限性

值得注意的是，每次呼叫 createRef() 時，我們都會得到一個新物件。這意味著如果我們比較兩個 refs，即使它們是透過 createRef() 建立的，它們也是不同的物件。這對類元件來說很好，但在函式元件中，我們可以選擇使用 useRef()，它始終返回相同的物件。

總結

createRef() 是 React 中一個有用的函式，特別是對於類元件。它允許我們輕鬆地引用和互動元素。在函式元件中，我們可能需要考慮使用 useRef() 來獲取相同的引用物件。