react 的 refs 原理及应用 详细介绍

refs 的在哪？

• refs 是你在创建类组件的时候从 React.component 中继承而来的
  

refs 使用说明

• 在 vue 中也有 refs 的概念
• 其实就是把 model（vdom） 层当中的东西渲染到我们的 view（dom） 层时
• refs 引用的就是真实的 dom

refs 在什么场景操作真实 dom？

我在市面上看到了一些操作动画库的第三方库或者一些操作其他场景时我需要操作真实 dom 的时候，需要把这些业务交给第三方库的时候，我们才回去使用 ref 去引用这些 dom

有些像我们在原生的时候，给它一个 id 我们就可以 getElementById 获取元素，所以我们给它一个 ref 就可以通过 refs 这个属性去引用到 ref ，拿到的就是 dom 元素，就可以做一些只有真实 dom 才能操作的业务，这就是 ref 的一个使用场景

refs 介绍

需要抓取dom元素与第三方 DOM 库集成

• 触发命令式动画
• 管理焦点
• 文本选择或媒体播放
• dom 只能在浏览器 Navigator 才可能出现 dom 这个概念，才能够进行上述操作（比如在浏览器里面才有焦点，我们不可能在虚拟 dom 下进行操作，虚拟 dom 只是在管理我们被虚拟之后的一个 documnet）
• ref 就是给我们操作真实 dom 提供了一个入口

refs 用法

//1. 通过字符串去引用，跟 vue 时一模一样的
<jsx元素 ref="名字"...
this.refs.名字

//2. 实例化
this.firstRef = React.createRef() //发生在构造器
<jsx ref={
   this.firstRef} />
  
this.firstRef 访问 -》 {
   current:dom}

//3. callback refs  回调  （其实还有第四个转发，较复杂，这里未列出）
<jsx ref={
   el => this.定义一个实例属性 = el}
this.定义一个实例属性  //后期用作访问jsx元素

• 当组件挂载时，将 DOM el元素传递给 ref 的回调
• 当组件卸载时，则会传递 null。
• ref 回调会在 componentDidMount 和 componentDidUpdate 生命周期之前调用

vue 通过指令去操作真实 dom ，react 中就是用 ref 去引，引完以后你想使用 原生还是 第三方的库 随意

refs 用法（一）

//1. 通过字符串去引用，跟 vue 时一模一样的
<jsx元素 ref