useRef 钩子函数

1、useRef 钩子函数说明

useRef 钩子函数的作用跟 useState 类似，都是用于存放数据的，但是不会像 useState 那样会及时通知页面更新。

2、useRef 钩子函数例子

2.1 访问 Dom

const UseRefDemo: React.FC = () => {
  const inputRef = useRef<null | HTMLInputElement>(null);

  const onButtonClick = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <input type="text" name="demo" id="demo" ref={inputRef} />
      <button onClick={onButtonClick}>获取焦点</button>
    </div>
  );
};

2.2 作为变量容器（React 官方例子）

useEffect(() => {
  const id = setInterval(() => {
    console.log("定时器运行");
  });
  intervalRef.current = id;
  return () => {
    clearInterval(intervalRef.current);
  };
});

function handleCancelClick() {
  clearInterval(intervalRef.current);
}

3、useRef 的陷阱

3.1 ref 的值发生变化的时候不会通知页面修改值

当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用 useCallback 来实现。