React forwardRef使用疑问：为何仅子组件需声明forwardRef？

核心结论 #

forwardRef 只需要用在需要对外暴露自身内部DOM节点或子组件ref的自定义组件上，单纯传递ref的父组件不需要声明。

为什么MyInput需要forwardRef #

自定义组件默认不会暴露内部的DOM节点：当你给自定义组件（比如MyInput）传递ref属性时，这个ref默认会指向MyInput的组件实例（旧版本中函数组件没有实例，甚至会报错），而不是内部的<input> DOM元素。

所以MyInput必须用forwardRef来接收外部传入的ref，并把它转发绑定到内部的原生<input>元素上，这样外部（比如Form组件）拿到的ref才能直接操作真实DOM。示例逻辑如下：

const MyInput = React.forwardRef((props, ref) => {
  // 把外部传入的ref绑定到内部的input元素
  return <input ref={ref} {...props} />;
});

为什么Form不需要forwardRef #

Form组件的角色是传递ref的发起方，而非需要对外暴露内部元素的组件：

• Form只是把自己创建的（或从父组件接收的）ref传递给子组件MyInput，它本身并没有被外部要求暴露内部的MyInput或其他DOM节点。
• 如果Form自己不需要被外部传入ref并转发给内部元素，就完全不需要用forwardRef。

一句话总结使用场景 #

当你写的自定义组件需要让外部通过ref直接访问到组件内部的DOM节点或子组件时，才给这个组件套上forwardRef；单纯作为父组件传递ref给子组件的，不需要。

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