接續昨天的內容，要來說useRef的另一個用途。

使用情境-保存 DOM 節點

useRef可以讓我們快速地抓到DOM元素，這也是useRef最常被使用的功能。

function App(){
  const [name,setName]=useState('')
  const inputRef = useRef()
  function check(){
    console.log(inputRef.current)
  }
  return(
    <>
      <input ref={inputRef} value={name} onChange={e=>setName(e.target.value)}/>
      <div>My name is {name}</div>
      <button onClick={check}>check useRef</button>
    </>
  )
}

首先，建立一個useRef在inputRef變數上，接著在input身上加上ref屬性等於{inputRef}，如此一來就可以抓到input這個DOM了!

可以用範例連結查看一下點擊按鈕後可以看到DOM本人。

<input value="">

注意

由於useRef帶來的便利，會使我們容易犯下濫用他的錯誤，我們可能會在ref中控制他的值或是添加內容..等。以上面例子來說，若直接在check函式中改變DOM的value，那麼會發現{name}會維持原先的樣子，並不會因我們使用的ref而變動數值，由此可見這樣的方式會造成實際的DOM會和useRef的DOM內容產生不一致，這點是我們要特別小心的。