Why? 跳脫/跨越React因為狀態(state/props)改變而導致畫面的重新渲染、實際操作DOM元素。
根據官網描述

有幾種適合使用 ref 的情況：
1.管理 focus、選擇文字、或影音播放。
2.觸發即時的動畫。
3.與第三方 DOM 函式庫整合。 React 官網連結

How? show me the code!

    import React, { useRef } from "react";
    import "./styles.css";

    export default function App() {
        const inputRef = useRef(null);
        const focusInput = () => {
            inputRef.current.focus();
            inputRef.current.style.backgroundColor = "blue"
        };
        const blurInput = () => {
            inputRef.current.style.backgroundColor = "orange";
            inputRef.current.blur()
        };
        return (
        <div className="App">
            <h2 onClick={focusInput}>點我看看底下input會怎樣</h2>
            <br />
            <input type="password" ref={inputRef} />
            <button onClick={blurInput}>在點我看看</button>
        </div>
        );
    }

情境一 獲取DOM元素

codesandbox
當一個react元件被建立時，首先假設我們需要取得DOM元素，我們必須先建立一個儲存這個DOM元素的地方，透過官方API (useRef)，
並把這個reference的預設值null。

    const inputRef = useRef(null);

我們將jsx當中的元件的ref (reference)與我們剛剛負責儲存的inputRef產生連結

    <input type="password" ref={inputRef} />

透過執行inputRef current，我們取得該DOM元素及其控制權

    inputRef.current.focus()
    inputRef.current.style.backgroundColor = "blue"

情境二 無視元件渲染

React 特色是單向資料流的傳遞，而當狀態(state/props)改變時，react本身有機制可以監聽狀態並重新渲染有使用這些狀態的畫面。
codesandbox

export default function App() {
  const [count, setCount] = useState(1);
  const otherRef = useRef(1);
  return (
    <div className="App">
      <h1>畫面渲染次數 {count}</h1>
      <h1>不受畫面影響渲染的ref，{otherRef.current}</h1>
      <h4>唯有畫面改變時，才會重新抓取最新的ref</h4>
      <h5>(點N下ref按鈕再點state看看)</h5>
      <button
        onClick={() => {
          setCount((prev) => prev + 1);
        }}
      >
        使state改變
      </button>
      <button
        onClick={() => {
          otherRef.current++;
        }}
      >
        使ref.current改變, 不會rerender
      </button>
    </div>
  );
}

建立一個state(影響畫面渲染次數) [sate改變，畫面重新渲染]及 一個 ref(無視畫面渲染次數)

  const [count, setCount] = useState(1);
  const otherRef = useRef(1);

建立兩個function，一個改變state，一個改變ref，並且綁定在按鈕上。

  const handleStateChange = () => setCount((prev) => prev + 1);
  const handleRefChange = () => { otherRef.current++; };
  <button onClick={handleStateChange}>使state改變</button>
  <button onClick={handleRefChange}>使ref.current改變, 不會rerender</button>

我們可以看到，當我們先點改變ref的那顆按鈕，並不會使畫面重新渲染，但當我們改變state時，畫面會重新渲染，並且畫面也會顯示到ref最新的數值。
要知道ref特別在哪，就要看React 一般的狀態控制，有比較有差別XD，就決定明天來看看state/props囉!

參考資料
[React 官網] (https://zh-hant.reactjs.org/docs/refs-and-the-dom.html)