useRef

useRef 使用方式

const refContainer = useRef(initialValue);

useRef 会回传一个
拥有 current 属性的 ref object，
current 属性的值由 initialValue 初始化得来，
回传的 ref object 在 component 的生命
周期内都将保持不变。

useRef() 建立的是一个普通的 JavaScript object，
这表示它是可修改（mutable）的，
因此更新 current 的值不会触发 re-render，
但同样的，当 useRef 的内容发生变化时，
也不会收到任何通知。

使用 useRef() 和自建一个
JavaScript object 的唯一不同是，
useRef 在每次 render 时
都会返回同一个 ref object。

范例：

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

使用 useRef 绑定後，
inputEl 的 current 指向 <input type="text" />。

更新 useRef 是 side Effect 的行为，因此必须要在 useEffect 或 event handler 里执行。

使用情境

• 计算 Render 次数
• 用 Imperatively 方法改变 DOM 跟 Child Component
• 抓取 Previous 的值

计算 Render 次数

由於 state 会在更新後触发 re-render，
因此可以使用 useRef 来记录 render 次数

const App = () => {
  const renderCount = useRef(0);  // { current: 0 }
  
  useEffect(() => {
    renderCount.current += 1;
  })
return <p>renderCount.current</p>
}

用 Imperatively 方法操纵 DOM

const App = () => {
  const inputRef = useRef();
  
  const clickHandler = () => {
    inputRef.current.focus()
  }
return 
  <>
    <input type='text' ref={inputRef} />
    <button onClick={clickHandler}>Focus</button>
  </>
}

抓取 Previous 的值

function App() {
  const [name, setName] = useState('');
  const previousName = useRef('');

  useEffect(() => {
    previousName.current = name;
  }, [name])

  return (
    <>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <p> My name is {name} </p>
      <p> My previous name is {previousName.current} </p>
    </>
  )
}

每次 render 後都是崭新的元件，
所以无法取得上次的 state 值。

这时可以利用 useRef 在 render 完後，
存下本次 state 的值，
这样在下次 render 时，
useRef 就会显示前次储存下来的 state 了。

参考资料

• [React Hook 笔记] useRef
• Hooks API 参考 | React 官网