注意，useRef返回的对象在整个组件生命周期里dou保持同一个引用。

咱就是说有两大场景：操作 DOM 和保存跨渲染的可变值。

第一种情况，用它拿到真实的 DOM 节点，然后干点儿聚焦、测量之类的事儿。

第二种情况，像计时器 ID、上一次请求的参数啥的，douKe以塞进.current。

面试官常抛出两类问题：

“组件挂载后让输入框自动获得焦点，怎么实现？”

“定时器里想保存状态，又怕每次渲染把 ID 给覆盖，该怎么办？”

别慌，这两个douNeng靠useRef轻松搞定。

import { useEffect, useRef } from "react";
export default function AutoFocus {
  const inputRef = useRef;
  useEffect => {
    // 挂载完立马 focus
    inputRef.current && inputRef.current.focus;
    console.log;
  }, ); // 空依赖只跑一次
  return (
    
  );
}

说实话，这段代码几乎是所有前端面试必备的“聚焦模板”。

关键点在于：把 ref 挂到 JSX 上，然后在useEffect里取出来调用.focus.

记得加个空依赖数组，不然每次渲染dou会再跑一遍，那可就浪费性Neng了。

import { useRef, useState, useEffect } from 'react';
export default function TimerDemo {
  const timerId = useRef; // 用 ref 保存定时器 ID
  const  = useState;
  function start {
    // 即使组件多次渲染，这个盒子始终是同一个
    timerId.current = setInterval => {
      console.log);
    }, 1000);
    console.log;
  }
  function stop {
    // 从盒子里取出 ID 并清除
    clearInterval;
    timerId.current = null;
    console.log;
  }
  // 演示：count 改变时kankan ref 的值
  useEffect => {
    console.log;
  }, );
  return (
    <>
      开始<
      button onClick={stop}>停止<
      button type="button" onClick={ => setCount}>count ++<
      
当前计数: {count}
<
    
  );
}

这个例子展示了两件事儿：

.current 永远指向Zui新的 ID。

.current 的变化不会触发重新渲染。

不对不对，我忘了强调——Ru果你用了useState{' '}来存 ID，每次 setState dou会导致组件再渲染，结果计时器会被“翻新”。用.current? 完全避开这个坑。

* 用{...}{' '}展开属性时Ke以直接把 ref 当作普通属性塞进去，别忘了写成 .

const latestCount = useRef;
useEffect => {
   latestCount.current = count;
}, );
function handler {
   console.log;
}

function Login {
   const userRef = useRef;
   const pwdRef = useRef;
   const handleSubmit =  => {
     // 假装请求成功
     userRef.current.value = '';
     pwdRef.current.value = '';
     userRef.current.focus;
   };
   return (
     <>
       
       
       登录
     
   );
}