Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

關於 React Refs 的概念,以及如何 Forwarding Refs

本文會介紹 React 當中的 Refs,及其延伸出的 useRef 與 forwardRef 的使用方式。

什麼是 Ref

Ref 就是 Reference 的意思,它是一個「唯讀屬性」,只能讀不能寫。如果我們只是想要讀取一個值,可以使用 Ref 就好,不需要使用到 State。

useRef Hook

Ref 的主要用法,通常是用來訪問 DOM。

如果只是要取得送出的值,不需要操作、修改值的話(例如:監控每一次輸入的變化),我們不一定要使用 useStateonChange,我們可以使用 useRef 來處理這種情況。

useRef 會回傳一個 Object,裡面的 current 屬性為初始傳入的參數(通常不寫或者寫 null),與 DOM 進行綁定後,存取這個 current 就會拿到你用 Ref 設定的相應 DOM 節點。

1// 新增 useRef 加到 HTML <Input> 上面
2const nameInputRef = useRef();
3<input id="username" type="text" ref={nameInputRef} />;
4
5// useRef.current 指向 <input> element
6console.log(nameInputRef.current); // <input id="username" type="text">
7

特別注意,useRef.current.value 所取得的值會是 String 型別,即使 Input 的 type 設定為 number 也一樣,如下所示。

1console.log(nameInputRef.current.value); // "1"
2console.log(+amountInputRef.current.value); // Convert a numbered "String" to a "Number"
3

如果非得要透過 Ref 去操作 DOM,基本上只建議進行一些簡單操作,因為 DOM 是所謂的 Uncontrolled Component,也就是它並不受到 React 控制的意思。

在使用 Ref 時,沒有操作 State 太多的行為是勉強能接受的(例如:清空輸入欄),因為我們沒有透過 useRef 來新增 DOM 或者改變太多狀態,但還是盡量少這樣操作。

1// Manipulating the DOM
2nameInputRef.current.value = '';
3

另一個使用 Ref 的常見用法,是當我們有一個值需要管理,但是希望它不是一個 State 的時候。由於 State 會在變更時也重新評估與執行元件,所以像是初始化階段時,如果要判斷是否已經初始化,可以透過 Ref 來做紀錄,因為 Ref 在變更時不會重新評估元件,而且也會僅作用於該元件內。

React.forwardRef

如果不是原生的 HTML 標籤,而是自己寫的元件的話,我們沒辦法直接使用 ref

1// 自己做的 <Input> 元件,沒辦法直接使用 ref
2
3<Input ref={xxxRef} />
4

我們必須要透過 forwardRef 把元件包裝起來,變成 <forwardInput> 來把 <Input> 往前傳遞。

1const forwardInput = React.forwardRef(Input);
2

當我們自製的元件使用 forwardRef 包裝後,這個 <Input> 元件就能夠取用 ref 這個參數了,現在我們把 ref 當成 props 傳遞給裡面的 HTML <input> 使用。

注意,此時在父元件當中,我們要使用的仍然是 <Input>,而不是 <forwardInput> 喔!

1const Input = (props, ref) => {
2  return (
3    <div className={classes.input}>
4      <label htmlFor={props.input.id}>{props.label}</label>
5      <input ref={ref} {...props.input} />
6    </div>
7  );
8};
9
10const forwardInput = React.forwardRef(Input);
11
12export default forwardInput;
13

實際使用範例可參考 React Hook useRef and forwarding refs with forwardRef 這部影片。

回顧

看完這篇文章,我們到底有什麼收穫呢?藉由本文可以理解到…

  • useRef Hook
  • React.forwardRef

References