useRef - React源码解析（六）

本文将讲解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;
}