这个Hook的作用是获取我们的元素节点的,就跟我们以前学习Vue中的ref相似,在元素节点中ref绑定,然后this.$refs对象中就可以获取我们绑定ref的元素。
在React中,我们通过useRef()来实现
用法
let myref=useRef(null)//null为我们传入的初始值
useRef()返回的结果是一个对象,里面有一个属性current其值为我们传入的初始值
我们可以通过ref将这个对象绑定到DOM元素节点上,如:
<input type="text" ref={myref} />
绑定过后,myref.current的值就变为了这个input元素节点对象
因此我们可以利用它,来简单实现一个input标签自动聚焦的功能。
代码:
import React,{ useEffect,useRef } from 'react'
export default function Box1() {
let myref=useRef(null)
useEffect(()=>{
//组件挂载后运行
myref.current.focus()
},[])
return (
<div>
<input type="text" ref={myref} />
</div>
)
}
其它用法
useRef这个hooks函数,除了传统的用法获取DOM节点之外,它还可以“跨渲染周期”保存数据。
在一个组件中有什么东西可以跨渲染周期,也就是在组件被多次渲染之后依旧不变的属性?第一个想到的应该是state。没错,一个组件的state可以在多次渲染之后依旧不变。但是,state的问题在于一旦修改了它就会造成组件的重新渲染。
那么这个时候就可以使用useRef来跨越渲染周期存储数据,而且对它修改也不会引起组件渲染。
如:
let myef2=useRef(null)
//这时myref2这个对象的current用来存储数据
如:myref2.current=666