React.forwardRef 知道么？｜网易前端面经解析

60 秒回答模板

React.forwardRef 用来让组件接收父组件传入的 ref，并把 ref 转发到内部 DOM 节点或子组件上。普通函数组件没有实例，父组件不能直接 ref 到它内部的 input、button 或滚动容器，所以封装基础组件时常用 forwardRef。典型场景是 Input 暴露 focus，Modal 暴露 open/close，ScrollContainer 暴露 scrollTo。更推荐配合 useImperativeHandle 只暴露稳定的命令式方法，而不是把内部 DOM 结构完整暴露出去。需要注意的是 ref 是命令式逃生口，不能替代 props/state 数据流，也不要为了跨层通信滥用 ref。

考点 核心机制与工程取舍

难度 中高频面试题

回答目标 按定义、机制、场景讲清楚

深入解析

先讲 ref 的问题

ref 适合访问 DOM 或少量命令式能力，例如 focus、select、scrollIntoView。函数组件本身没有类组件实例，父组件的 ref 不能自动指向函数组件内部节点。

forwardRef 做 ref 转发

forwardRef 包住组件后，渲染函数可以接收 props 和 ref 两个参数。组件内部把 ref 绑定到真正需要暴露的 DOM 节点或继续传给子组件。

封装组件里的常见用途

Input、Button、Textarea、Select、Modal、Popover、虚拟列表、滚动容器等基础组件经常需要让调用方控制焦点、滚动或测量尺寸，这类场景比业务数据通信更适合 ref。

useImperativeHandle 控制暴露面

如果直接把 ref 绑到内部 DOM，调用方会依赖内部结构。useImperativeHandle 可以把 ref 暴露成 { focus, clear, scrollToTop } 这样的稳定 API，隐藏 DOM 细节。

和 props/state 分工

展示状态、数据变化和业务流程仍应通过 props、state、context 或事件回调表达。ref 只处理无法声明式表达或成本很高的命令式操作。

维护上的注意点

转发 ref 会成为组件公共契约，改内部 DOM 或暴露方法都可能影响调用方。高阶组件、memo 包裹和 TypeScript 类型也要确保 ref 没有被吞掉。

易错点

把 ref 当成跨层状态管理工具，用它读写业务状态而不是通过 props/state 建模。
forwardRef 后直接暴露内部 DOM，导致调用方依赖组件内部结构，后续重构困难。
在 HOC 或 memo 包裹后忘记继续转发 ref，导致调用方 ref.current 为空。
认为 forwardRef 只用于 input focus，答不出滚动、测量、第三方库桥接和命令式 API 封装场景。

面试官追问

为什么普通函数组件不能直接挂 ref？

函数组件没有可供 ref 指向的组件实例。ref 要么指向 DOM，要么通过 forwardRef 显式传入并转发。

forwardRef 和 useImperativeHandle 怎么配合？

forwardRef 让组件拿到外部 ref，useImperativeHandle 决定这个 ref.current 暴露什么能力，通常用来隐藏内部 DOM。

什么时候不该用 ref？

父子组件传业务数据、控制显示状态、提交表单结果等声明式流程不该用 ref，应该用 props、state、context 或回调。

高阶组件为什么容易丢 ref？

ref 不是普通 prop。HOC 如果不使用 forwardRef 显式接收并传递 ref，外部 ref 会停在包装层或直接失效。