react类组件中的ref

类组件中的ref 受控非受控组件

import {	Component } from 'react'

class DemoThree extends Component{
  render(){
    return <div className = 'box'>
  }
}
export default DemoThreee

通过一个数据来空置该盒子的显示和隐藏 也就是我们得受控组件

非受控组件

class DemoThre extends Component {
  render(){
    return <div className = 'box'>
      <button onClick = {()=>{
      console.log(this.$refs.AAA)
      }}>开关</button>
    <br/>
      <div className = 'detail' ref = "AAA">
      详细信息
      </div>
      </div>
  }
}

就是不受状态管控 直接操作DoM元素，也就是说 我们需要先获取DoM元素，在componentDidMount钩子函数中，等待组件第一次渲染完毕

可以基于传统的方式来获取DoM
但是在React/vue的框架中都有提供好的获取DoM的操作ref

@1
第一种方案：就是給ref属性设置为一个字符串
渲染

this.$refs.AAA -> 元素

但是这种模式存在一个弊端如果我们开启了<React.stricModel>后 那么控制台上会报错，报错的原因就是 ref不能设置为字符串
但是这种获取ref操作的现在已经不推荐了

**@2 **
给ref设置的属性值是个函数
<div ref = {x=>this.AAA = x}>
this.AAA-> DoM元素

class DemoThre extends Component {
  render(){
    return <div className = 'box'>
      <button onClick = {()=>{
      console.log(this.AAA)
      }}>开关</button>
    <br/>
      <div className = 'detail' ref = {x=>this.AAA = x}>
      详细信息
      </div>
      </div>
  }
}

@3
基于官方推荐的React.createRef（类组件/函数组件）/useRef（函数组件） 方法 去处理
基于createRef/useRef 创建一个ref对象 this.AAA.current = null

import {Component , createRef} from 'react'
class DemoThre extends Component {
  AAA = createRef()//创建ref实例对象
  render(){
    return <div className = 'box'>
      <button onClick = {()=>{
      console.log(this.AAA)
      }}>开关</button>
    <br/>
      <div className = 'detail' ref = {AAA}>
      详细信息
      </div>
      </div>
  }
}

ref的第二个作用

ref除了可以获取视图中的DoM元素，还可以获取组件的实例，ref绑定一个元素的标签，目的是获取这个真实DoM
ref绑定一个组件，目的是获取组件内部的实例（或者是组件内部的某些元素，再或者是组件暴露出来的属性和方法）

如果是给函数组件设置ref的话直接报错 ，因为这是不被允许的，