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,如下: