概念
接口类型
interface MutableRefObject<T> {
current: T;
}
interface RefObject<T> {
readonly current: T|null;
}
useRef定义(函数重载)
function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T|null): RefObject<T>;
类型说明
MutableRefObject类型或RefObject类型
MutableRefObject类型
类型断言
const intervalRef = useRef(1); // 1可以为任何数据类型
指定类型
填入类型与指定类型一致
const intervalRef = useRef<number>(1);
特别说明
const intervalRef = useRef(null);
const intervalRef = useRef<null>(null);
RefObject类型
指定类型不为
null
且初始值为null
const intervalRef = useRef<number>(null);
应用
关于domRef(immutable)
interface IntervalRef {
tick: number;
}
// 父组件
const Parent= () => {
const modelRef = useRef<IntervalRef>(null);
useEffect(()=>{
// 访问
console.log(modelRef.current?.tick);
})
return (
<Child modelRef={modelRef}/>
)
}
// 子组件
import { FC, RefObject } from 'react';
const Child: FC<{ modelRef: RefObject<IntervalRef>}>= () => {
return (
<Child modelRef={modelRef}/>
)
}
注:直接引入RefObject类型;因为初始化时候为
null
其它(mutable)
注:其它应用可参考