refs转发常见案例

1、转发refs到DOM组件

ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递给子组件。这种特性适用于类似FancyButton 或 MyTextInput 这样的高可复用“叶”组件，这些组件倾向于在整个应用中以一种类似常规 DOM button 和 input 的方式被使用，利用ref转发特性可以方便的访问其 DOM 节点，用来实现管理焦点，选中或动画等。

示例-转发refs到DOM组件

这样，使用 MyButton 的组件可以获取底层 DOM 节点 button 的 ref ，并在必要时访问，就像其直接使用 DOM button 一样。
注意：第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和 class 组件不接收 ref 参数，且 props 中也不存在 ref。

2、转发refs到class组件

ref 转发不仅限于 DOM 组件，也可以转发 refs 到 class 组件实例中

示例-转发refs到class组件

如上图，在App组件中通过this.ref.current获取到了底层 DOM 节点 button

3、在高阶组件中转发 refs

这个特性对高阶组件很适用。因为ref不是prop属性，不会被透传下去，如果对高阶组件添加 ref，该 ref 将引用最外层的容器组件，而不是被包裹的组件。利用转发refs这个特性，我们就可以使用 React.forwardRef API 明确地将 refs 转发到内部被包裹的组件。示例如下：
高阶组件（参数为组件，返回值为新组件的函数）：

高阶组件HocTest

被包裹的组件：

WrappedComponent -Test

可以看到在HocRefs组件中使用Test，通过this.ref.current可以获取到Test组件中的handleClick方法

HocRefs