react源码解析13.hooks源码
视频讲解(高效学习):进入学习
hook调用入口
在hook源码中hook存在于Dispatcher中,Dispatcher就是一个对象,不同hook 调用的函数不一样,全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate
ReactCurrentDispatcher.current =
current === null || current.memoizedState === null//mount or update
? HooksDispatcherOnMount
: HooksDispatcherOnUpdate;
const HooksDispatcherOnMount: Dispatcher = {//mount时
useCallback: mountCallback,
useContext: readContext,
useEffect: mountEffect,
useImperativeHandle: mountImperativeHandle,
useLayoutEffect: mountLayoutEffect,
useMemo: mountMemo,
useReducer: mountReducer,
useRef: mountRef,
useState: mountState,
//...
};
const HooksDispatcherOnUpdate: Dispatcher = {//update时
useCallback: updateCallback,
useContext: readContext,
useEffect: updateEffect,
useImperativeHandle: updateImperativeHandle,
useLayoutEffect: updateLayoutEffect,
useMemo: updateMemo,
useReducer: updateReducer,
useRef: updateRef,
useState: updateState,
//...
};
hook数据结构
在FunctionComponent中,多个hook会形成hook链表,保存在Fiber的memoizedState的上,而需要更新的Update保存在hook.queue.pending中
const hook: Hook = {
memoizedState: null,//对于不同hook,有不同的值
baseState: null,//初始state
baseQueue: null,//初始queue队列
queue: null,//需要更新的update
next: null,//下一个hook
};
下面来看下memoizedState对应的值
- useState:例如
const [state, updateState] = useState(initialState)
,memoizedState等于
state的值 - useReducer:例如
const [state, dispatch] = useReducer(reducer, {});
,memoizedState等于
state的值 - useEffect:在mountEffect时会调用pushEffect创建effect链表,
memoizedState
就等于effect链表,effect链表也会挂载到fiber.updateQueue上,每个effect上存在useEffect的第一个参数回调和第二个参数依赖数组,例如,useEffect(callback, [dep])
,effect就是{create:callback, dep:dep,…} - useRef:例如
useRef(0)
,memoizedState就等于
{current: 0} - useMemo:例如
useMemo(callback, [dep])
,memoizedState
等于[callback(), dep]
- useCallback:例如
useCallback(callback, [dep])
,memoizedState
等于[callback, dep]
。useCallback
保存callback
函数,useMemo
保存callback
的执行结果
useState&useReducer
之所以把useState和useReducer放在一起,是因为在源码中useState就是有默认reducer参数的useReducer。
-
useState&useReducer声明
resolveDispatcher函数会获取当前的Dispatcher
function useState(initialState) { var dispatcher = resolveDispatcher(); return dispatcher.useState(initialState); } function useReducer(reducer, initialArg, init) { var dispatcher = resolveDispatcher(); return dispatcher.useReducer(reducer, initialArg, init); }
-
mount阶段
mount阶段useState调用mountState,useReducer调用mountReducer,唯一区别就是它们创建的queue中lastRenderedReducer不一样,mount有初始值basicStateReducer,所以说useState就是有默认reducer参数的useReducer。
function mountState<S>(// initialState: (() => S) | S, ): [S, Dispatch<BasicStateAction<S>>] { const hook = mountWorkInProgressHook();//创建当前hook if (typeof initialState === 'function') { initialState = initialState(); } hook.memoizedState = hook.baseState = initialState;//hook.memoizedState赋值 const queue = (hook.queue = { //赋值hook.queue pending: null, dispatch: null, lastRenderedReducer: basicStateReducer,//和mountReducer的区别 lastRenderedState: (initialState: any), }); const dispatch: Dispatch<//创建dispatch函数 BasicStateAction<S>, > = (queue.dispatch = (dispatchAction.bind( null