1、字符串形式
这种字符出串写法因为效率不好，所以不推荐使用
语法
标签上使用ref="name" 进行绑定
方法中this.refs.name拿到dom
<input ref="input1" type="text" placeholder="点击按钮弹出内容" />
<button onClick={ this.showData }>按钮</button>
showData = () => {const { input1 } = this.refsalert(input1.value)
}
2、回调的形式
ref会自动执行回调函数，并注入一个参数currentNode（当前节点）
更新组件时，refs会执行两次，第一次传null，第二次传入参数dom元素（并不会影响正常开发）
原因是每次渲染时都会定义一个新的函数实例，所以React清空旧的ref并且设置新的。
通过将ref的回调函数定义成class的绑定函数方式可以避免这个问题
语法
标签上使用ref={c=>this.name=c}
方法中this.name拿到dom
//正常写法
<input ref={c => this.input1 = c } type="text" placeholder="点击按钮弹出内容" />
<button onClick={ this.showData }>按钮</button>
showData = () => {const { input1 } = thisalert(input1.value)
}
//解决执行两次的问题
<input ref={this.demo} type="text" placeholder="class绑定的函数" />
demo=(c)=> {console.log(c,'123123')
}
3、使用React.createRef
React.createRef调用后返回一个容器，该容器可以存储被ref所标识的节点，该容器只能给单个使用，重复的容器，会被覆盖
语法
标签上使用ref={this.name}
给实例添加属性input = React.createRef();
<input ref={this.input} type="text" placeholder="点击按钮弹出内容" /><button onClick={ this.showData }>按钮</button>showData = () => {alert(this.input.current.value)}
