ref的多种形式；

 1.字符串形式的ref

class MyDemo extends Component {
  //获取ref方式
  click = () => {
    console.log('ref组件',this.refs.inputRef)
  }
  render() {
    return (
        <div>
            <Button ref="butRef" />
            <input ref="inputRef" />
        </div>
    )
  }
}
//此种写法是将组件中所有标签的ref都统一集放在this组件（myDemo）的refs中；

 2.回调形式的ref

class MyDemo extends Component {
  //获取ref方式
  click = () => {
    console.log('ref组件',this.btnRef)
  }
  render() {
    return (
        <div>
            <Button ref={(c) => {this.btnRef = c;}} />
            <input ref={(c) => {this.inputRef = c;}} />
        </div>
    )
  }
}
//需注意的是（执行次数问题），这种写法有个点就是，mydemo组件每执行一次render，ref中的回调函数都会执行一次；且ref每次都会清空为null，然后再获取当前值；
//于是，内绑定函数可以避免执行次数的问题，写法如下：
  render() {
  this.btnRef=(c)=>{
      //获取ref方式
      console.log(c)
  }
    return (
        <div>
            <Button ref={this.btnRef} />
        </div>
    )
  }

 3.creatRef的形式

class MyDemo extends Component {
    //注意：“专人专用”
    this.btnRef = React.creatRef();
    this.inputRef = React.creatRef();
  //获取ref方式
  click = () => {
    console.log('ref组件',this.btnRef)
  }
  render() {
    return (
        <div>
            <Button ref={this.btnRef} />
            <input ref={this.inputRef}/>
        </div>
    )
  }
}

备注：

ref属于标签或者子组件属性；

refs属于组件或父组件的属性，和props同级；

refs相当于是组件中所有ref的集放地儿