React学习笔记-----ref

ref在react初期的时候是用于方便操纵dom元素的,就类似于document.getElementById()这种形式,获取dom树中的某个dom节点.

到现在为止,主要有三种使用形式

方式1: string类型绑定

类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获取到节点dom

注意的是 这种方式已经不被最新版的react推荐使用,有可能会在未来版本中遗弃

React学习笔记-----ref

 

方式2: react.CreateRef()

通过在class中使用React.createRef()方法创建一些变量,可以将这些变量绑定到标签的ref中

那么该变量的current则指向绑定的标签dom

React学习笔记-----ref

 

方式3: 函数形式

在class中声明函数,在函数中绑定ref

React学习笔记-----ref

使用这种方法可以将子组件暴露给父组件以使得父组件能够调用子组件的方法

 

React学习笔记-----ref

 

React学习笔记-----ref

注意: react并不推荐过度使用ref,如果能通过state做到的事情,就不应该使用 refs 在你的 app 中“让事情发生”。
过度使用ref并不符合数据驱动的思想