今天要介紹的是可以用來操作 DOM 元素的 useRef 及和它有關的 hook useImperativeHandle。

功用和特性

ref 是一個包含 current 屬性的 JS 物件，它具有以下功用和特性:

1. 可以操作 DOM 元素(ex: 管理 focus、選擇文字)
2. ref 可使用 mutate 的寫法，state 不能
3. 更新 ref.current 的值時，不會讓元件重新渲染，而且在元件經過下次渲染後不會像一般變數一樣重置，也就是可以在多次渲染之間儲存資訊，所以可以依據此特性去發揮其功用。但相對的也不建議用 ref.current 去儲存會呈現在畫面上的資訊。

例如可以用來避免元件第一次 render 時，useEffect 內的程式碼執行:

react-hooks: skip first run in useEffect

import { useState, useRef, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const isFirstRun = useRef(true);
  useEffect(() => {
    // 第一次執行 useEffect 就直接 return 掉，不執行後面的程式碼
    if (isFirstRun.current) {
      isFirstRun.current = false;
      return;
    }

    console.log("Effect was run");
  });

  return (
    <div>
      <p>Clicked {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

補充-注意事項

不要在元件渲染期間去讀和寫 ref 的值。避免的原因是為了保持元件 pure，當前版本的 React 也許還不會出現問題，但未來 React 版本升級就有可能會有影響。

function MyComponent() {
  // ...
  // 避免改寫 ref 的值
  myRef.current = 123;
  // ...
  // 避免讀取 ref 的值
  return <h1>{myOtherRef.current}</h1>;
}

語法和範例

useRef 只會回傳一個值，這個值是一個有 current 屬性的物件，這個 ref.current 可以進行 mutable 的操作。

import React, { useEffect, useRef } from 'react';

const App = () => {
  const h1Ref = useRef(); // 定義一個 ref
	
  useEffect(() => {
    console.log(h1Ref.current); // 使用 ref 名字.current 取出 dom 元素
  }, [])
	
	// 綁定 ref 到 dom 元素上	
  return <h1 ref={h1Ref}>Hello World!</h1>
}
export default App;

focus input 輸入框

import { useState, useRef, useEffect } from "react";

export default function App() {
  const inputRef = useRef();

  const clickHandler = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={clickHandler}>Focus</button>
    </>
  );
}

程式碼範例(codesandbox)

inputRef.current.focus();

參考 https://zh-hant.reactjs.org/docs/refs-and-the-dom.html

2021/10/22 補充

如果要取得 ref 取到的 DOM 元素底下的子元素，可以加上 children，如範例所示:

useEffect(() => {
    console.log(tableRef.current); // table
    console.log(tableRef.current.children[0]); // thead
    console.log(tableRef.current.children[1]); // tbody
    console.log(tableRef.current.children[0].children); // thead tr
    ...
}, [])

forwardRef

將 ref 傳遞到子元件，讓子元件可以取到父元件的 DOM。

範例

App.js

import { useRef } from "react";
import Child from "./Child";

const App = () => {
  const textInput = useRef(null);

  function handleClick() {
    textInput.current.focus();
  }
  return (
    <div>
      <Child ref={textInput} />
      <input type="button" value="Focus the text input" onClick={handleClick} />
    </div>
  );
};

export default App;

Child.js

import { forwardRef } from "react";

const Child = forwardRef((props, ref) => {
  console.log(ref); // <input type="text"></input>

  return <input type="text" ref={ref} />;
});

export default Child;

程式碼範例(codesandbox)

useImperativeHandle

此 hook 會和 forwardRef 一起使用，可以將子元件內的 ref 內置的方法或是值傳遞到母元件，此 hook 較不常使用。

語法

useImperativeHandle(ref, createHandle, [deps])
第二個參數是一個函式，會把裡面的東西綁定到 ref 上，第三個參數作用同 useEffect 的第二個參數，當值改變時重新執行第二個參數

範例

在範例中，透過 useImperativeHandle 將 verify 和 validate 兩個函式從 TextInput 元件傳到 App 元件

程式碼範例(codesandbox)