UseRef

useRef 会回传一个 mutable 的 ref object，.current 属性为初始为传入的参数。写法如下：

const refContainer = useRef(initialValue); //initialValue 为初始值

使用时机：

• 计算 Render 次数
• 直接操作 DOM ：在 html 标签上加上 ref 属性，就可以印出 DOM，以下方案例就是可以印出 input DOM
• 抓取 Previous 值

function App() {
  const renderCount = useRef(0); // {current:0}
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  function changeValueHandler(e){
    setName(e.target.value);
  }

  useEffect(() => {
    renderCount.current += 1; //重新渲染一次就加一
  },[name]);

  function focusEvent(){
    inputRef.current.focus();
  }

  return (
    <div className="App">
      <header className="App-header">
        {/* 我们只要在 html 标签上加上 ref 属性，就可以透过 inputRef.current.focus() 
         直接读取 DOM */}
        <input ref={inputRef} value={name} onChange={changeValueHandler} type="text"/>
        <p>渲染次数 {renderCount.current} </p>
        <button onClick={focusEvent}>按钮</button>
      </header>
    </div>
  );
}

小结：

UseRef 不会重新 Render 元件，但可以更新值，也可以直接获取 DOM

参考资料

• React 文件
• [React] 理解以 useRef / useState 产生变数的适用情境