※说明:useRef<T>其实是泛型函数(Hook)。
作用一:useRef 能保持组件刷新后,其值不会变。
import { useRef} from "react";
type Props = {
};
export function Child({}: Props) {
const countRef = useRef<number>(0);
const handleClick = () => {
countRef.current++;
console.log(countRef.current);
}
return (
<div>
<button onClick={handleClick}>Click</button>
</div>
);
}
作用二:useRef 对于element元素的绑定。
import {useEffect, useRef} from "react";
type Props = {
};
export function Child2({}: Props) {
const inputRef = useRef<HTMLInputElement | null>(null);
useEffect(()=>{
inputRef.current?.focus();
})
return (
<div>
<input ref={inputRef} type='text' placeholder='Input something' />
</div>
);
}