useRef Hook行为不一致咨询：缓存current后调用方法为何失效？

云原生阿岚

2026-5-7

问题解析：useRef赋值变量后调用子组件方法出现undefined的原因

嘿，这个问题我之前也踩过类似的坑，咱们来一步步搞清楚到底是哪里出了问题：

核心原因：渲染时机与变量缓存的冲突

首先得明确两个关键点：

useRef返回的对象本身在组件的所有渲染周期里都是同一个引用，但它的current属性是可变的，而且React不会因为current的变化触发组件重新渲染。
你的条件渲染组件（带useImperativeHandle的子组件）是在父组件渲染完成后才挂载的，这意味着父组件第一次渲染时，myRef.current还是undefined。

你在DoesNotWorkFine组件里做了这件事：

const c = myRef.current; // 这行在组件渲染阶段执行，此时子组件还没挂载，c是undefined

const handleClick = () => {
  c.focus(); // 点击时用的还是渲染时缓存的undefined，自然报错
};

而WorksFine组件里是直接在点击回调里访问myRef.current：

const handleClick = () => {
  myRef.current.focus(); // 点击时子组件已经挂载，current已经指向子组件实例，所以正常工作
};

本质区别就是：普通变量一旦赋值就不会自动更新，你缓存的是渲染时的current值，而不是一个动态指向current的引用。

有两种简单的修复方式：

直接在使用时访问myRef.current
这是最稳妥的方式，确保每次调用都能拿到最新的current值：

const handleClick = () => {
  if (myRef.current) { // 先做非空判断，避免子组件未挂载时报错
    myRef.current.focus();
  }
};

在使用时机再赋值变量
如果一定要用变量存储，把赋值操作放到事件回调里，确保拿到的是最新的current：
```
const handleClick = () => {
  const c = myRef.current;
  if (c) {
    c.focus();
  }
};
```