iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

30天學 React.js 系列 第 11

[Day11] [筆記]React Hooks - UseRef

UseRef

useRef 會回傳一個 mutableref 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

參考資料


上一篇
[Day10] [筆記]React Hooks-useMemo、useCallback
下一篇
[Day12] [筆記]React Hooks - UseContent
系列文
30天學 React.js 14

尚未有邦友留言

立即登入留言