React Hooks react.js

mountHooks 和 updateHooks 执行基本一样，多了 deps 判断 mountWorkInProgressHook: 执行函数组件时 —— Component(props, secondArg)，hooks 执行；挂载到 fiber.memoizedState 下

function mountWorkInProgressHook() { var hook = { memoizedState: null, baseState: null, baseQueue: null, queue: null, next: null, }; if (workInProgressHook === null) { currentlyRenderingFiber$1.memoizedState = workInProgressHook = hook; } else { workInProgressHook = workInProgressHook.next = hook; }return workInProgressHook; }

useEffect mountEffectImpl

function mountEffectImpl(fiberFlags: number, hookFlags: number, create, deps) { var hook = mountWorkInProgressHook(); var nextDeps = deps === undefined ? null : deps; currentlyRenderingFiber$1.flags |= fiberFlags; hook.memoizedState = pushEffect( HasEffect | hookFlags, create, undefined, nextDeps ); }

pushEffect: updateQueue 放入要更新到 effect

function pushEffect(tag, create, destroy, deps) { var effect = { tag: tag, create: create, destroy: destroy, deps: deps, next: null, }; var componentUpdateQueue = currentlyRenderingFiber$1.updateQueue; if (componentUpdateQueue === null) { componentUpdateQueue = createFunctionComponentUpdateQueue(); currentlyRenderingFiber$1.updateQueue = componentUpdateQueue; componentUpdateQueue.lastEffect = effect.next = effect; } else { var lastEffect = componentUpdateQueue.lastEffect; if (lastEffect === null) { componentUpdateQueue.lastEffect = effect.next = effect; } else { var firstEffect = lastEffect.next; lastEffect.next = effect; effect.next = firstEffect; componentUpdateQueue.lastEffect = effect; } }return effect; }

useState mountState

function mountState(initialState) { var hook = mountWorkInProgressHook(); // 是方法，先执行得到初始值 if (typeof initialState === "function") { initialState = initialState(); }hook.memoizedState = hook.baseState = initialState; var queue = (hook.queue = { pending: null, dispatch: null, lastRenderedReducer: basicStateReducer, lastRenderedState: initialState, }); var dispatch = (queue.dispatch = dispatchAction.bind( null, currentlyRenderingFiber$1, queue )); return [hook.memoizedState, dispatch]; }