React中ref的高阶应用技巧有哪些？

本文共计1987个文字，预计阅读时间需要8分钟。

`forwardRef` 转发 `Ref` 的基本原理是解决 `ref` 无法跨层级捕获和传递的问题。`forwardRef` 接收父级元素的 `ref` 信息，并将其向下传递，使得子组件可以通过 `props` 接收来自上一层级或更高层级的 `ref`。

• forwardRef转发Ref

forwardRef的初衷就是解决ref不能跨层级捕获和传递的问题，forwardRef接受了父级元素标记的ref信息，并把它转发下去，使得子组件可以通过props来接受到上一层级或者更上层级的ref。

• 场景一： 跨层级获取

比如想要通过标记子组件ref，来获取子组件下的孙组件的某一DOM元素，或者是组件实例。使用 React.forwardRef

场景：想要在GrandFather组件通过标记ref，获取到孙组件Son的组件实例.可以理解为，React.forwardRef将子组件的ref跑出去到顶层。