react之ref

        ref在react中是一个对象，它有一个current属性，可以对这个属性进行操作，用于获取DOM元素和保存变化的值。常用的案例是input标签来展示和实践。推荐方法：在函数式组件中调用useRef()函数和在类组件中调用createRef()函数，它们返回ref对象。在组件的整个生命周期中，ref对象一直存在：组件挂载，ref对象创建，组件销毁，ref对象销毁。

一、使用场景

1、点击按钮让输入框聚焦

2、动画效果，例如移动，变大变小

二、案例体验

（一）在类组件中使用ref

1、使用字符串的方式【已经弃用】

（1）给 标签 / 组件  设置  ref="标签名"

（2）通过 this.refs.标签名 访问，ref可以获取到应用的 真实dom / 组件对象

        this.refs.iptRef      获取标签

        this.refs.iptRef.value  获取标签单前值

import React, { Component } from 'react'

export default class App3 extends Component {
  render() {
    return (
      <div>
          {/* 
          已经弃用 :
            1、给 标签 / 组件  设置  ref="标签名" 
            2、通过 this.refs.标签名 访问，ref可以获取到应用的 真实dom / 组件对象
          */}
          <input ref="iptRef"/>
          <button onClick={()=>{console.log(this.refs.iptRef.value);}}>add</button> 
      </div>
    )
  }
}

2、使用createRef方法【推荐使用】

（1）全局定义一个变量  myRef = React.createRef()

（2）在标签中通过ref={this.myRef}绑定

（3）访问 this.myRef.current

        this.refs.current      获取标签

        this.refs.current.value  获取标签单前值

import React, { Component } from 'react'

export default class App3 extends Component {
    //  1、全局定义一个变量  myRef = React.createRef()
    myRef = React.createRef()
  render() {
    return (
      <div>
          {/* 
          新的写法：
            1、全局定义一个变量  myRef = React.createRef()
            2、在标签中通过ref={this.myRef}绑定
            3、访问 this.myRef.current
          */}
          <input ref={this.myRef} />
          <button onClick={()=>{
              console.log(this.myRef.current.value);
          }}>add</button>
      </div>
    )
  }
}

 3、注意

        当ref与setState合用的时候，会出现一些坑，DOM的获取并不及时，原因是setState是异步的，如果需要在数据变化(页面更新)之后获取DOM，我们要把获取DOM的语法，放在setState的第二个参数里，setState的第二个参数是一个函数，我们可以把获取DOM的逻辑放在里边。setState的第二个参数会在setState异步执行完毕之后执行。这样就能保证，当第二个参数执行的时候，页面已经被更新完了。

（二）在函数式组件中使用ref

1、使用useRef()方法【推荐使用】

 （1）通过useRef()函数定义一个变量，可以给一个初始值

 （2）通过ref绑定标签

 （3）通过myRef.current访问

         myRef.current      获取标签

         myRef.current.value  获取标签单前值

import React ,{useRef}from 'react'

export default function App4() {
    // 1、通过useRef()函数定义一个变量，可以给一个初始值
    const myRef = useRef()
  return (
    <div>
        {
            /* 
            函数式组件：
                1、通过useRef()函数定义一个变量，可以给一个初始值
                2、通过ref绑定标签
                3、通过myRef.current访问
            */
        }
        <input ref={myRef} />
        <button onClick={()=>{
             console.log(myRef.current.value);
        }}>add</button>
    </div>
  )
}

        实际上，能不操作dom就不要操作dom，但是有时候实际开发中会遇到一些比较复杂的场景，必须使用的时候才使用，比如动画。