登录
如果正常使用 ,useRef 和 createRef 功能几乎是一样的,区别在于,useRef 不会每次重新渲染后重新创建,而且生成的 ref 的 current 的值的变化,不会引起页面重新渲染。
点击按钮,给 input 框置入焦点功能,中规中矩的使用。
import React from 'react';
function Home() {
let inputRef = React.useRef()
function setFocus() {
inputRef.current.focus()
}
return (
<>
<button onClick={setFocus}>点击</button>
<input ref={inputRef} type="text"/>
</>
)
}
export default Home
因为 useRef 不会每次重新渲染后重新创建,和 useRef.current 的值的变化,不会引起页面重新渲染,这两个特性,可以做一些其他的事情。
我们知道,当使用函数式组件时,一旦这个组件重新渲染,代表组件的方法会重新执行,内部使用一般方式创建的变量都会重新生成,只有使用 useState、useContext、useMemo 等方法得到的才不会。
当我们使用一些希望值发生变化时不引起组件重新渲染的变量,且这个变量的值需要一直别发生变化。。。一个典型的例子就是定时器(setInterval)。
此时我们就可以使用 useRef,生成一个 ref,把 ref 的 current 字段当做普通变量来使用了:
import React from 'react';
function Home() {
const [num, setNum] = React.useState(1)
const timeRef = React.useRef()
// 定义定时器,并在卸载组件时停止定时器
React.useEffect(() => {
timeRef.current = setInterval(() => {
setNum(oldNum => oldNum + 1)
}, 1000);
return () => clearInterval(timeRef.current)
}, [])
return <div>{num}</div>
}
export default Home