react 之 ref

Refs 可以直接访问 dom 节点或者 react 组件。

在传统的 react 数据流中，父组件与子组件的数据交互只能通过改变 props 生效。但是在传统数据流外需要改变子组件的话就可以用 ref.

什么时候使用：

1、处理聚焦、文案选择、媒体回放；

2、触发必要的 animations；

3、使用第三方 DOM 库。

不要过度使用 ref ，能不用就不用。

使用 ref：

    （1）通过 this.myRef =  React.createRef() 创建；

    （2）通过 <div ref={this.myRef} /> 绑定到 DOM；

    （3）通过 this.myRef.current 访问。（当绑在 DOM 上时，取值为 DOM 元素；当绑在 class 组件上时则返回 class 实例。不能给 function 组件绑定 ref 属性，因为它没有实例。）

回调 ref：将 ref 属性设置为函数，该函数的入参即为 DOM 节点或者 react 组件，这样可以在其它地方操作和访问 DOM 节点和 react 组件了。

向父组件暴露 DOM 节点：（比如聚焦子组件、统计子组件大小）。react 16.3 以上可参考 ref forwarding（ lets components opt into exposing any child component’s ref as their own. ）。

 ref forwarding：父组件向子组件传递 ref。

使用：在父组件内定义 ref：const ref = React.createRef()，用 React.forwardRef 将需要使用 ref 的子组件包裹起来，子组件通过第二个入参获取ref，如下：