作为Props传递Ref与React.forwardRef：优劣对比及使用必要性问询

你提到的用普通Props传递Ref的方式确实能实现功能，但React官方推出forwardRef肯定有其必要性，下面我们对比两种方式的优缺点，再解释为什么很多场景下更推荐用forwardRef。

一、把Ref作为普通Props传递的优缺点 #

优点 #

• 实现简单：不需要额外学习新API，直接像传普通数据一样把Ref放进Props里就行，上手快
• 灵活度高：可以给Ref起任意自定义名称，还能一次性传给子组件多个Ref
• 无额外包裹：不需要用forwardRef包装组件，组件结构更简洁

缺点 #

• 违反React设计约定：React把ref作为特殊属性和普通Props分开设计，强行把Ref当普通Props传，会让其他开发者困惑，降低代码可读性和可维护性
• 兼容性差：遇到高阶组件（HOC）或第三方UI组件时，这些组件只会处理官方的ref属性，不会识别你放在Props里的自定义Ref字段，导致Ref无法穿透到目标元素
• TypeScript不友好：TS里普通Props和Ref的类型体系是分开的，把Ref当Props传需要额外处理类型，容易出现类型错误
• 复用性低：如果子组件是公共组件，其他使用者可能不知道要通过特定的Props字段传Ref，增加了组件的使用成本

二、React.forwardRef的优缺点 #

优点 #

• 符合官方设计规范：专门用来传递Ref的官方API，明确表达了「把外部Ref绑定到子组件内部元素」的意图，代码语义更清晰
• 支持Ref穿透：可以让Ref顺利穿过高阶组件、包装组件，直接绑定到内部的目标元素上，这是普通Props传Ref做不到的
• TS类型友好：有专门的ForwardedRef类型定义，能更精准地约束Ref类型，减少类型问题
• 使用体验统一：用户可以像使用原生DOM元素一样给组件传ref（比如<MyComponent ref={myRef} />），不需要记住自定义的Props字段，降低了学习成本

缺点 #

• 有学习成本：需要理解forwardRef的工作逻辑，尤其是结合useImperativeHandle时，逻辑会稍复杂
• 增加组件层级：用forwardRef包装的组件，在React DevTools里会显示为ForwardedRef(组件名)，多了一层节点
• 默认只能传一个Ref：如果需要传递多个Ref，还是得结合普通Props或者useImperativeHandle来处理

三、为什么明明能用Props传Ref，还要用forwardRef？ #

举两个实际场景就能明白：

1. 高阶组件场景：
   假设你有一个给组件加日志的高阶组件withLogging，如果用普通Props传Ref，外部的Ref只能绑定到高阶组件返回的包装组件上，无法拿到内部真实组件的引用。但用forwardRef就能让Ref穿透包装，直接绑定到目标组件上。

2. 公共组件开发：
   如果你开发的是公共UI组件（比如自定义输入框），用forwardRef可以让使用者像用原生<input ref={xxx} />一样传Ref，而不是强制他们用<MyInput inputRef={xxx} />这种自定义字段，更符合开发者的使用习惯。

你的示例场景比较简单，用Props传Ref没问题，但在复杂的组件复用、高阶组件、组件库开发场景下，forwardRef是更规范、更可靠的选择。

内容的提问来源于stack exchange，提问作者kunal verma