React Hook使用之useRef和useImperativeHandle

Refs和dom元素

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

在典型的 React 数据流中，props是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。对于这两种情况，React 都提供了解决办法。

Refs的使用情况

• 管理焦点，文本选择或媒体播放。
• 触发强制动画。
• 集成第三方 DOM 库（比较多）发。

refs虽然使用方便，能够实现的功能也很多，但切忌不要滥用refs和过度使用refs。

创建Refs

Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

Reacr.createRef()的定义

function createRef<T