useRef

存储跨渲染的数据（在多次渲染中共享数据）

useRef和useState的区别主要是：

• useRef保存的数据一般和UI渲染无关。
• useRef的值变化不会触发组件的重新渲染，useState会。

使用场景

1. 储存数据

// 定义 timer 这样一个容器用于在跨组件渲染之间保存一个变量 
const timer = useRef(null);
 
// 开始计时的事件处理函数
const handleStart = useCallback(() => { 
	// 使用 current 属性设置 ref 的值 
	timer.current = window.setInterval(() => {
		setTime((time) => time + 1); 
	}, 100); 
}, []); 
 
// 暂停计时的事件处理函数 
const handlePause = useCallback(() => {
	// 使用 clearInterval 来停止计时 
	window.clearInterval(timer.current); 
	timer.current = null; 
}, []);

2. 保存DOM节点的引用

要点：

• 一般用于父组件。父组件使用useRef创建缓存ref，然后传入子组件或者dom元素。
• 子组件如果是dom元素，直接使用ref属性绑定父组件的ref值。
• 子组件如果是函数组件，需要搭配forwardRef传递ref到真正的dom元素上。

const PageB = (props, ref) => {
  return (
    <div>
      <input type="text" ref={ref} />
      <p>PageB</p>
    </div>
  );
};
export default forwardRef(PageB);
// ---
const PageA = (props) => {
  const ref = useRef(null);
  return (
    <div>
      PageA
      <button
        onClick={() => {
          ref.current.focus();
        }}
      >
        focus
      </button>
      <hr />
      <PageB ref={ref} />
      <hr />
    </div>
  );
};

一般是用于ref透传，class组件和hook组件嵌套的时候ref透传。