Refs概念
refs，我的理解就是react提供的一种方式或者工具。
refs的作用:
访问DOM节点
访问React元素
为什么要使用refs？
在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。对于这两种情况，可以使用react提供的refs来获取需要的目标元素或者实例。
通常不建议这样做，因为它会打破组件的封装
什么时候使用refs?
官方列举的使用场景：
管理焦点，文本选择或媒体播放。
触发强制动画。
集成第三方 DOM 库。
如何访问Refs？
由于refs在使用时，可以用于具体的某个元素，也可以用于组件上。所以，在访问时，这两种使用方式，获取到的对象是不一样的。
当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问const node = this.myRef.current;
current属性根据节点的类型而有所不同：
当 ref 属性用于 HTML元素时，ref接收DOM 元素作为其 current 属性。
当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。
父组件如何获得子组件的Ref？
第一种：使用React.forwardRef
我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。 我们通过指定 ref 为 JSX 属性，将其向下传递给 <Children ref={ref}>。 React 传递 ref 给 forwardRef 内函数 (props, ref) => …，作为其第二个参数。 我们向下转发该 ref 参数到 <button ref={ref}>，将其指定为 JSX 属性。 当 ref 挂载完成，ref.current 将指向 DOM 节点。
第二种：在子组件初始化的时候将ref通过事件传递给父组件
创建ref的形式有三种：
传入字符串，使用时通过 this.refs.传入的字符串的格式获取对应的元素
传入对象，对象是通过 React.createRef() 方式创建出来，使用时获取到创建的对象中存在 current 属性就是对应的元素
传入函数，该函数会在 DOM 被挂载时进行回调，这个函数会传入一个 元素对象，可以自己保存，使用时，直接拿到之前保存的元素对象即可
传入hook，hook是通过 useRef() 方式创建，使用时通过生成hook对象的 current 属性就是对应的元素
三、应用场景
在某些情况下，我们会通过使用refs来更新组件，但这种方式并不推荐，更多情况我们是通过props与state的方式进行去重新渲染子元素
过多使用refs，会使组件的实例或者是DOM结构暴露，违反组件封装的原则
例如，避免在 Dialog 组件里暴露 open() 和 close() 方法，最好传递 isOpen 属性
但下面的场景使用refs非常有用：
对Dom元素的焦点控制、内容选择、控制
对Dom元素的内容设置及媒体播放
对Dom元素的操作和对组件实例的操作
集成第三方 DOM 库
