React Hooks - useRef

在介绍 useRef 之前，先来介绍 ref。
在 React 中如果我们想要获取 DOM 或获取某个 DOM 节点时，可以使用 ref，通常在几个情况下使用：

focus / input

text selection

影音播放或暂停

触发动画

整合第三方 DOM 库

在可以透过 props、state 的地方就尽量不使用 ref。
当在 HTML element 上使用 ref 参数时，可以取得它底下的 DOM element 来做为它的 current 属性

useRef

可以使用 useRef 将 DOM 回传，而被 useRef 回传的是一个里面只有 current 属性的 ref object，可以得到首次 render 时的 DOM 节点。
useRef 也可以用来储存资料或抓以前的值

用法：
import React, { useRef } from 'react';
const refContainer = useRef(initialValue)　initialValue 为初始值(current 属性)
在 html tag 中绑定 ref={refContainer}

例如：

import React, { useRef, useEffect } from "react";
const HookUseRef = () => {
  const ref = useRef(null);
  console.log(ref);
  return (
    <>
      <input type="text" ref={ref} />
      <button onClick={() => console.log(ref.current)}>click</button>
    </>
  );
};
export default HookUseRef;

将 useRef 参数设为 null，建立一个空的 ref object，会回传一个物件 {current:null}
而点击 click 时会印出 DOM

操作 DOM

例如：

import React, { useRef, useEffect } from "react";
const HookUseRef = () => {
  const ref = useRef(null);
  const click = () => {
      ref.current.focus()
  }
  return (
    <>
      <input type="text" ref={ref} />
      <button onClick={click}>click</button>
    </>
  );
};
export default HookUseRef;

点击後滑鼠游标会自动跑到输入栏位

变更 current 属性时不会触发重新 render

这边将 useState() 和 useRef() 做比较：

// useState()
import { useState } from "react";
const HookUseRef = () => {
  const [count, setCount] = useState(0);
  const handle = () => {
    const updatedCount = count + 1;
    console.log(`点击 ${updatedCount} 次`);
    setCount(updatedCount);
  };
  console.log("render");
  return <button onClick={handle}>Click me</button>;
};
export default HookUseRef;

可以看到当使用 useState 时，每次点击都会重新渲染。

// useRef()
import React, { useRef, useEffect, useState } from "react";
const HookUseRef = () => {
  const countRef = useRef(0);
  const handle = () => {
    countRef.current++;
    console.log(`点击 ${countRef.current} 次`);
  };
  console.log("render");
  return <button onClick={handle}>Click me</button>;
};
export default HookUseRef;

当使用 useRef() 时，只有首次渲染时会印出 render，之後不管点击几下都不会重新渲染。