如果有錯誤，歡迎留言指教~ Q_Q 還沒寫完辣

對的 我一直只記得 ref 是取得的 DOM 的一種偷懶方式

因為在 vue 裡面，我也只是這麼用der ><

ref 可以讓我們取得 DOM

<input> 設定 ref={inputRef}

當畫面上找到 inputRef 後
ref 的 current 就會 callback 相對應的 DOM 節點 : <input type="text"></input>
當確定他們存在，就可以去控制拉~~~

例如控制 input 的 focus

const inputRef = useRef(null);
console.log(inputRef);
// -> { current: null }

<input
    type="text"
    ref={(ref) => {
      ref.focus();
      console.log(ref);
      // -> <input type="text"></input>
    }}
/>

import React, { useRef } from "react";

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

  return (
    <div className="App">
      <input type="text" ref={inputRef} />
      <button
        onClick={() => {
          inputRef.current && inputRef.current.focus();
        }}
      >
        focus input
      </button>
    </div>
  );
}

參考連結：

1. https://zh-hant.reactjs.org/docs/hooks-reference.html#useref
2. https://zh-hant.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
3. https://zh-hant.reactjs.org/docs/refs-and-the-dom.html