为何useRef返回含current属性的对象，但ref.current却为undefined？

核心原因 #

• 浏览器控制台的惰性求值特性：你打印的ref是对象引用，控制台会实时更新它的显示状态。你看到的{current: div}是DOM挂载后ref更新后的状态，但执行console.log(ref.current)的那一刻，DOM还未挂载，所以返回undefined。可以用console.log(JSON.stringify(ref))验证，这会显示打印瞬间的真实状态（通常是{"current":null}）。
• React渲染与DOM挂载的时序差：useRef初始化时current为undefined，只有组件完成渲染、DOM节点挂载到页面后，React才会把对应DOM元素赋值给ref.current。如果你的console.log写在组件顶层（渲染阶段执行），此时DOM还未就绪，自然拿不到值。

解决方法 #

把访问ref.current的逻辑放到useEffect钩子中，它会在DOM挂载完成后执行：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const ref = useRef();

  useEffect(() => {
    console.log(ref.current); // 此处会正确输出对应的div元素
  }, []); // 空依赖数组确保只在组件挂载后执行一次

  return <div ref={ref}>示例内容</div>;
}

内容的提问来源于stack exchange，提问作者N.SH