你一定能搞懂React Hooks的创建与更新

一个极其简单的例子🌰

function App(){
    const [num,setNum] = useState(0)
    const myRef = useRef(num)
    return (
        <>
            <div onClick={() => setNum(num + 1)}>{num}<div>
            <div>{myRef.current}</div>
        </>
        
    )
}

App组件里面有两hook,分别是通过useState和useRef来创建的，下面我们就结合源码来看看这两个hook到底是怎么创建的

hook的创建

当App函数组件执行时，在mount(第一次挂载)阶段和之后的update阶段，同一个usexxx函数会调用不同的函数方法，我们首先来看一下mount阶段对应的源码

mountState

function mountState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  // 重点在这一行，我们只需要关注这一行就行
  const hook = mountWorkInProgressHook();
  
  if (typeof initialState === 'function') {
    // $FlowFixMe: Flow doesn't like mixed types
    initialState = initialState();
  }
  hook.memoizedState = hook.baseState = initialState;
  const queue: UpdateQueue<S, BasicStateAction<S>> = {
    pending: null,
    lanes: NoLanes,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: (initialState: any),
  };
  hook.queue = queue;
  const dispatch: Dispatch<BasicStateAction<S>> = (queue.dispatch =
    (dispatchSetState.bind(null, currentlyRenderingFiber, queue): any));
  return [hook.memoizedState, dispatch];
}

mountRef

// 简化代码
function mountRef<T>(initialValue: T): {current: T} {
    const hook = mountWorkInProgressHook();
    const ref = {current: initialValue};
    hook.memoizedState = ref;
    return ref;
}

聪明的你应该发现了这两段代码的共同点，那就是mountWorkInProgressHook这个方法，下面我们来看这个方法到底做了什么

function mountWorkInProgressHook(): Hook {
  const hook: Hook = {
    memoizedState: null, 
   // 是的，在fiber节点上我们用memoizedState这个字段来存放hooks链表，
   // 在具体的某个hook上我们用它来保存这个hook的状态，比如useState接收的初始值就放在这里
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null,
  };
   
  if (workInProgressHook === null) {
    // workInProgressHook你可以把它理解为一个全局变量，用它来记录当前react正在处理的是哪个hook
    // 如果workInProgressHook的值是null，就说明react当前处理的hook是第一个hook
    
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
    
    // currentlyRenderingFiber也可以理解为一个全局变量，它表示我们当前正在工作的fiber节点（也就是App）
    // 所以如果当前处理的hook是第一个hook，比如App中的useState，那我们就直接把它挂在当前fiber节点的memoizedState的属性上面就行了
  } else {
    // 当执行到App中的useRef时，会走到这里，我们把useRef执行之后产生的hook
    // 挂到当前workInprogressHook的next属性上，于此同时我们也把它挂在了当前fiber的memoizedState.next上
    workInProgressHook = workInProgressHook.next = hook;
  }
  return workInProgressHook;
}

这样就形成了一个如下的链表结构

// 当前的fiber节点App
const currentlyRenderingFiber = {
    memoizedState:{
      // useState的初始值0
      memoizedState:0, 
      ..., 
      next:{
          // useRef创建的ref对象：{ current: 0 }
          memoizedState:{current:0 },
          ...,
         next:null
      }
    }
}
// 当前正在工作的hook就变成了useRef生成的hook
const workInprogressHook = {
         memoizedState:{
         current:0,  // useRef创建的ref对象：{ current: 0 }
         ...,
         next:null
     }
}

如果useRef下面还有hook的话，以此类推继续往fiber上挂，形成一个更长长长长...的链表(如果没看懂链表是咋形成的，你应该补一下引用值的赋值操作是咋回事)，那行吧，hook咋创建的知道了，那是咋更新的呢？

点击div更新组件，下面是组件更新阶段调用的updateRef

function updateRef<T>(initialValue: T): {current: T} {
  const hook = updateWorkInProgressHook();
  return hook.memoizedState;
}

updateState在内部调用了updateReducer，友情提示，当你看到updateWorkInProgressHook方法以后，直接拉到底就行了。至于updateReducer是咋处理的queue环状链表，是咋处理的lane优先级问题，我们以后再讨论， 我们把关注点聚焦在每个hook更新阶段都会调用的updateWorkInProgressHook

下面是组件更新阶段调用的updateState

function updateState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  return updateReducer(basicStateReducer, (initialState: any));
}

function updateReducer<S, I, A>(
  reducer: (S, A) => S,
  initialArg: I,
  init?: I => S,
): [S, Dispatch<A>] {
  const hook = updateWorkInProgressHook();
  const queue = hook.queue;

  if (queue === null) {
    throw new Error(
      'Should have a queue. This is likely a bug in React. Please file an issue.',
    );
  }

  queue.lastRenderedReducer = reducer;

  const current: Hook = (currentHook: any);

  // The last rebase update that is NOT part of the base state.
  let baseQueue = current.baseQueue;

  // The last pending update that hasn't been processed yet.
  const pendingQueue = queue.pending;
  if (pendingQueue !== null) {
    // We have new updates that haven't been processed yet.
    // We'll add them to the base queue.
    if (baseQueue !== null) {
      // Merge the pending queue and the base queue.
      const baseFirst = baseQueue.next;
      const pendingFirst = pendingQueue.next;
      baseQueue.next = pendingFirst;
      pendingQueue.next = baseFirst;
    }
    if (__DEV__) {
      if (current.baseQueue !== baseQueue) {
        // Internal invariant that should never happen, but feasibly could in
        // the future if we implement resuming, or some form of that.
        console.error(
          'Internal error: Expected work-in-progress queue to be a clone. ' +
            'This is a bug in React.',
        );
      }
    }
    current.baseQueue = baseQueue = pendingQueue;
    queue.pending = null;
  }

  if (baseQueue !== null) {
    // We have a queue to process.
    const first = baseQueue.next;
    let newState = current.baseState;

    let newBaseState = null;
    let newBaseQueueFirst = null;
    let newBaseQueueLast: Update<S, A> | null = null;
    let update = first;
    do {
      // An extra OffscreenLane bit is added to updates that were made to
      // a hidden tree, so that we can distinguish them from updates that were
      // already there when the tree was hidden.
      const updateLane = removeLanes(update.lane, OffscreenLane);
      const isHiddenUpdate = updateLane !== update.lane;

      // Check if this update was made while the tree was hidden. If so, then
      // it's not a "base" update and we should disregard the extra base lanes
      // that were added to renderLanes when we entered the Offscreen tree.
      const shouldSkipUpdate = isHiddenUpdate
        ? !isSubsetOfLanes(getWorkInProgressRootRenderLanes(), updateLane)
        : !isSubsetOfLanes(renderLanes, updateLane);

      if (shouldSkipUpdate) {
        // Priority is insufficient. Skip this update. If this is the first
        // skipped update, the previous update/state is the new base
        // update/state.
        const clone: Update<S, A> = {
          lane: updateLane,
          action: update.action,
          hasEagerState: update.hasEagerState,
          eagerState: update.eagerState,
          next: (null: any),
        };
        if (newBaseQueueLast === null) {
          newBaseQueueFirst = newBaseQueueLast = clone;
          newBaseState = newState;
        } else {
          newBaseQueueLast = newBaseQueueLast.next = clone;
        }
        // Update the remaining priority in the queue.
        // TODO: Don't need to accumulate this. Instead, we can remove
        // renderLanes from the original lanes.
        currentlyRenderingFiber.lanes = mergeLanes(
          currentlyRenderingFiber.lanes,
          updateLane,
        );
        markSkippedUpdateLanes(updateLane);
      } else {
        // This update does have sufficient priority.

        if (newBaseQueueLast !== null) {
          const clone: Update<S, A> = {
            // This update is going to be committed so we never want uncommit
            // it. Using NoLane works because 0 is a subset of all bitmasks, so
            // this will never be skipped by the check above.
            lane: NoLane,
            action: update.action,
            hasEagerState: update.hasEagerState,
            eagerState: update.eagerState,
            next: (null: any),
          };
          newBaseQueueLast = newBaseQueueLast.next = clone;
        }

        // Process this update.
        const action = update.action;
        if (shouldDoubleInvokeUserFnsInHooksDEV) {
          reducer(newState, action);
        }
        if (update.hasEagerState) {
          // If this update is a state update (not a reducer) and was processed eagerly,
          // we can use the eagerly computed state
          newState = ((update.eagerState: any): S);
        } else {
          newState = reducer(newState, action);
        }
      }
      update = update.next;
    } while (update !== null && update !== first);

    if (newBaseQueueLast === null) {
      newBaseState = newState;
    } else {
      newBaseQueueLast.next = (newBaseQueueFirst: any);
    }

    // Mark that the fiber performed work, but only if the new state is
    // different from the current state.
    if (!is(newState, hook.memoizedState)) {
      markWorkInProgressReceivedUpdate();
    }

    hook.memoizedState = newState;
    hook.baseState = newBaseState;
    hook.baseQueue = newBaseQueueLast;

    queue.lastRenderedState = newState;
  }

  if (baseQueue === null) {
    // `queue.lanes` is used for entangling transitions. We can set it back to
    // zero once the queue is empty.
    queue.lanes = NoLanes;
  }

  const dispatch: Dispatch<A> = (queue.dispatch: any);
  return [hook.memoizedState, dispatch];
}

Hello啊！树哥 🌲 <=> 🌲

首先我们得了解一点概念，页面视图呢是基于fiber来构建的对吧。我们卡姿兰大眼睛看到的正在展示的页面视图，React给他起了个名叫"current树🌲"。当组件更新时，在内存里又会创建一个新的🌲，简化点，我们叫他"work树🌲"，正在工作的树。hook的状态复用，就在这俩树间操作。两棵树是通过一条绳子连接在一起的，我能通过这个绳子找到你，你也能通过绳子找到我，这个绳子叫啥呢，就叫alternate（咋连接起来的，咱们先不管，知道是咋回事就行）。这两棵树人家是有名词儿来描述的，叫“双缓存树”🌲，你看看一下子整高端了

updateWorkInprogressHook源码

// 记住每一次组件更新，都会将currentHook和workInprogressHook设置为nul，把这俩树当前正在工作的hook设置为null，从头往下捋

function updateWorkInProgressHook(): Hook {
  let nextCurrentHook: null | Hook; // next别翻译成"下一个"，你翻译成"接下来"会好理解的多
      // 如果curentHook是null说明当前react处理的是current fiber上的一个hook
  if (currentHook === null) {
      // 执行updateState,走这里
    const current = currentlyRenderingFiber.alternate; 
      // 这个current，就是current树🌲(current fiber)
    if (current !== null) {
     // 把current上的第一个hook赋值给nextCurrentHook
      nextCurrentHook = current.memoizedState;
     // 按照我们的例子呢，这个nextCurrentHook现在就是我们mountSate创建的那个hook
    } else {
      nextCurrentHook = null;
    }
  } else {
    // 执行updateRef，走这里，先别看这里，把updateState走完再进来看这里
    nextCurrentHook = currentHook.next;
  }

  let nextWorkInProgressHook: null | Hook;
  if (workInProgressHook === null) {
      // 例子中的updateState走这里，表示正在处理work树🌲(work fiber)的第一个hook
    nextWorkInProgressHook = currentlyRenderingFiber.memoizedState;
      // 新创建的work树🌲(work fiber)的memoizedState是null，新创建的嘛，啥也没有很正常
  } else {
      // 执行updateRef，走这里，先别看这里，把updateState走完再进来看这里
    nextWorkInProgressHook = workInProgressHook.next;
  }

  if (nextWorkInProgressHook !== null) {
     // 执行updateRef，走这里，先别看这里，把updateState走完再进来看这里
    workInProgressHook = nextWorkInProgressHook;
    nextWorkInProgressHook = workInProgressHook.next;

    currentHook = nextCurrentHook;
  } else {
    // Clone from the current hook.

    if (nextCurrentHook === null) {
      // 跳过这个if分支，这不是更新逻辑，我们的nextCurrentHook可不是null
      const currentFiber = currentlyRenderingFiber.alternate;
      if (currentFiber === null) {
        // This is the initial render. This branch is reached when the component
        // suspends, resumes, then renders an additional hook.
        const newHook: Hook = {
          memoizedState: null,

          baseState: null,
          baseQueue: null,
          queue: null,

          next: null,
        };
        nextCurrentHook = newHook;
      } else {
        // This is an update. We should always have a current hook.
        throw new Error('Rendered more hooks than during the previous render.');
      }
    }
    // nextCurrentHook就是个备胎，我们最终使用的还是currentHook
    currentHook = nextCurrentHook;
    // 生成一个新的hook,复用current🌲上面的hook状态，这是之前所有操作的目的，就是复用状态
    const newHook: Hook = {
      memoizedState: currentHook.memoizedState,

      baseState: currentHook.baseState,
      baseQueue: currentHook.baseQueue,
      queue: currentHook.queue,

      next: null,
    };
    // 下面的代码就比较熟悉了，不介绍啦
    if (workInProgressHook === null) {
      currentlyRenderingFiber.memoizedState = workInProgressHook = newHook;
    } else {
      workInProgressHook = workInProgressHook.next = newHook;
    }
  }
  return workInProgressHook;
}

我的理解是更新hook的过程就是在做一个轴对称的镜像操作，找到对应的hook复用状态，再根据hook的不同进行不同的操作。这也很好的解释了为啥不能在if else里面使用hook，对不上号就出问题了，仔细品一下～。