前端Wiki/词条/ref 与 forwardRef

ref 与 forwardRef

定义绕过数据流直接拿到 DOM 节点或组件实例的逃生舱通道

React 的理念是数据驱动视图，但聚焦输入框、测量元素尺寸、播放视频这些事必须直接操作 DOM。useRef 返回一个贯穿渲染的可变容器：把 .current 指向真实节点即可命令式操作。它也常被用来保存不触发渲染的可变值，比如定时器 id。

函数组件默认拿不到 ref——它没有实例。forwardRef 让组件把父组件传入的 ref 转发给内部 DOM 或子组件；useImperativeHandle 则进一步定制暴露给父级的接口。useRef 的赋值不会触发重渲染，别用它存应当驱动视图的状态。

需要聚焦、测量、动画等命令式 DOM 操作时才用 ref，平时交给数据流
函数组件要用 forwardRef 才能把 ref 传给内部 DOM
useRef 修改 current 不触发重渲染，不能替代 state

JavaScript

import { useRef, forwardRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),    // 只暴露 focus 方法
  }));
  return <input ref={inputRef} />;
});

export default function App() {
  const ref = useRef(null);
  return (
    <>
      <MyInput ref={ref} />
      <button onClick={() => ref.current.focus()}>聚焦</button>
    </>
  );
}

⚠ 常见误区

给函数组件直接传 ref 拿不到东西，报 Undefined 的 forwardRef 警告
用 ref.current 做渲染依赖，赋值不触发重渲染导致视图不更新
把所有状态都塞进 useRef 绕过数据流，代码退化为命令式

🔗 相关词条受控组件函数组件与元素渲染