请注意，使用另一个命名props（例如innerRef FOR FORWARDING）没有区别，它的工作原理相同。
重构类组件
由于 React 转向函数组件（钩子），您可能希望在不破坏 API 的情况下将类组件代码重构为函数组件。
// Refactor class component API to function component using forwardRef
<Component ref={myRef} />
React.forwardRef 将是您唯一的选择（进一步详细解释）。
干净的API
作为库作者，您可能需要一个可预测的API 进行ref转发。
例如，如果你实现了 aComponent并且有人想给它附加一个 ref，他有两个选项，具体取决于你的 API：
<Component innerRef={myRef} />
- 开发人员需要知道有一个用于转发的自定义props
innerRef附加到哪个元素？我们不知道，应该在 API 中提到或者我们console.log(myRef.current)
<Component ref={myRef} />
- 默认行为类似于
refHTML 元素上使用的 prop，通常附加到内部包装器组件。
请注意，React.forwardRef 可用于功能组件和 HOC（对于类组件，请参阅下面的替代方案）。
Ref 转发不仅限于 DOM 组件。您也可以将引用转发到类组件实例。
对于函数组件，forwardRef有时会带有useImperativeHandle组合（在类组件中，您只需在 ref 实例上调用类方法：ref.current.myAttr().
// Same usage
<Component ref={myRef} />
const Component = React.forwardRef((props, ref) => {
// you can forward ref <div ref={ref} />
// you can add custom attributes to ref instance with `useImperativeHandle`
// like having ref.myAttribute() in addition to ones attached to other component.
});
重要行为的refprops没有forwardRef。
对于类组件，仅此代码就会将 ref 附加到CLASS INSTANCE，这本身没有用，并且需要另一个 ref 进行转发：
// usage, passing a ref instance myRef to class Component
<Component ref={myRef} />
完整示例，检查日志：
// We want to forward ref to inner div
class ClassComponent extends React.Component {
innerRef = React.createRef();
render() {
// Notice that you can't just `this.props.ref.current = node`
// You don't have `ref` prop, it always `undefined`.
return <div ref={this.innerRef}>Hello</div>;
}
}
const Component = () => {
const ref = React.useRef();
useEffect(() => {
// The ref attached to class instance
console.log(ref.current);
// Access inner div through another ref
console.log(ref.current.innerRef);
}, []);
return <ClassComponent ref={ref} />;
};
在函数组件中，它甚至不起作用，因为函数没有实例。
默认情况下，您不能在函数组件上使用 ref 属性，因为它们没有实例。[1]