本文将讲解useRef
钩子的实现。useRef
应该是所有的Hooks中最简单的一个了。
Mount阶段
在这个阶段,useRef
和其他Hook一样创建一个Hook对象,然后创建一个{current: initialValue}
的值,缓存到Hook的memoizedState
属性,并返回该值
function mountRef<T>(initialValue: T): {|current: T|} {
const hook = mountWorkInProgressHook();
const ref = {current: initialValue};
if (__DEV__) {
Object.seal(ref);
}
hook.memoizedState = ref;
return ref;
}
Update阶段
这个阶段很懒,直接从Hook实例中返回之前缓存的值。
function updateRef<T>(initialValue: T): {|current: T|} {
const hook = updateWorkInProgressHook();
return hook.memoizedState;
}