一、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,
);
最后调用这个方法去渲染
还有很多细节感觉还不熟悉