记一次usestate的更新调试过程

51 阅读1分钟

一、useState

useState是react里面用的比较多的hook,useState在mount跟update的时候的执行的函数是不一的,react是通过current === null这个条件来判断是不是mount,current树是目前渲染好的树的一个对象,保存在内存中。

二、直接看updateState给我们返回的东西

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

事实上调用的也是updateReducer,返回的是hook上的memoizedState,顺便提一下,hook上的memoizedState存的是各个hook的信息,是一个单链表结构;

//获取当前正在执行的hook,每个update或者state需要对应自己的hook
 const hook = updateWorkInProgressHook();
 ...
 const dispatch: Dispatch<A> = (queue.dispatch: any);
  return [hook.memoizedState, dispatch];

话不多说,打两个断点试试

    setNumber(number + 1); 
    setNumber(number + 2);
    setName("w")

setNumber调用的就是dispatchAction这个函数

/**
 * 
 * @param {*} fiber 节点
 * @param {*} queue 等待更新的队列
 * @param {*} action 本次要更新的数据
 * @returns 
 */
function dispatchAction<S, A>(
  fiber: Fiber,
  queue: UpdateQueue<S, A>,
  action: A,
)

这个函数主要是处理fiber以及其中的update,多次更新会一起存起来形成一个链表结构

最后的话还要调用renderwithHooks以及reconcileChildFibers等函数去进行调和,也就是diff算法

 invokeGuardedCallback(
          null,
          commitMutationEffects,
          null,
          root,
          renderPriorityLevel,
        );

最后调用这个方法去渲染

还有很多细节感觉还不熟悉