Hooks 实现机制 ​

// 伪代码：每调一次 Hook API 追加一个节点
function mountWorkInProgressHook() {
  const hook = { memoizedState: null, baseState: null, queue: null, next: null }
  if (workInProgressHook === null) {
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook
  } else {
    workInProgressHook = workInProgressHook.next = hook
  }
  return hook
}

function updateWorkInProgressHook() {
  if (currentHook === null) {
    currentHook = currentlyRenderingFiber.alternate.memoizedState
  } else {
    currentHook = currentHook.next
  }
  workInProgressHook = currentHook
  return workInProgressHook
}

// 伪代码：与 useReducer 共用 reducer 路径
function mountState(initialState) {
  const hook = mountWorkInProgressHook()
  const state =
    typeof initialState === 'function' ? initialState() : initialState
  hook.memoizedState = hook.baseState = state
  hook.queue = { pending: null, lanes: NoLanes, dispatch: null }
  const dispatch = (hook.queue.dispatch = dispatchSetState.bind(
    null,
    currentlyRenderingFiber,
    hook.queue,
  ))
  return [hook.memoizedState, dispatch]
}

function updateReducer(reducer = basicStateReducer) {
  const hook = updateWorkInProgressHook()
  const queue = hook.queue
  let newState = hook.baseState
  // 简化：遍历 pending 环形链表上的 update，依次 reducer(state, action)
  let update = queue.pending
  if (update !== null) {
    do {
      newState = reducer(newState, update.action)
      update = update.next
    } while (update !== queue.pending)
    queue.pending = null
  }
  hook.memoizedState = hook.baseState = newState
  return [hook.memoizedState, queue.dispatch]
}

function dispatchSetState(fiber, queue, action) {
  const lane = requestUpdateLane(fiber)
  const update = { lane, action, next: null }
  enqueueUpdate(queue, update) // 挂到 pending 环
  scheduleUpdateOnFiber(fiber, lane)
}

function useState(initialState) {
  const dispatcher = resolveDispatcher()
  return dispatcher.useState(initialState)
}
// HooksDispatcherOnMount.useState = mountState
// HooksDispatcherOnUpdate.useState = () => updateReducer(basicStateReducer)

setCount(count + 1)
console.log(count) // 还是旧值，正常

// 伪代码：Render 只入队；Commit Passive 阶段再执行
function mountEffect(create, deps) {
  const hook = mountWorkInProgressHook()
  const effect = { create, destroy: undefined, deps, tag: HookHasEffect | PassiveEffect }
  hook.memoizedState = effect
  pushEffect(fiber.updateQueue, effect) // 挂到 Effect 环形链表
}

function updateEffect(create, deps) {
  const hook = updateWorkInProgressHook()
  const prev = hook.memoizedState
  if (areHookInputsEqual(prev.deps, deps)) {
    prev.tag &= ~HookHasEffect // 依赖未变，Commit 跳过
  } else {
    prev.deps = deps
    prev.create = create
    prev.tag |= HookHasEffect
  }
}

function commitPassiveEffects(root) {
  for (const effect of passiveEffectList) {
    if (!(effect.tag & HookHasEffect)) continue
    if (effect.destroy) effect.destroy()
    effect.destroy = effect.create() // create 返回 cleanup
  }
}

function useEffect(create, deps) {
  return resolveDispatcher().useEffect(create, deps)
}

// useLayoutEffect：同上，但 tag 为 LayoutEffect，在 commitLayoutEffects 同步执行 create/destroy

function mountMemo(nextCreate, deps) {
  const hook = mountWorkInProgressHook()
  const value = nextCreate()
  hook.memoizedState = [value, deps]
  return value
}

function updateMemo(nextCreate, deps) {
  const hook = updateWorkInProgressHook()
  const [prevValue, prevDeps] = hook.memoizedState
  if (areHookInputsEqual(prevDeps, deps)) return prevValue
  const value = nextCreate()
  hook.memoizedState = [value, deps]
  return value
}

function useCallback(callback, deps) {
  return useMemo(() => callback, deps)
}

function useMemo(factory, deps) {
  return resolveDispatcher().useMemo(factory, deps)
}

function useReducer(reducer, initialArg, init) {
  const initState = init ? init(initialArg) : initialArg
  const [state, dispatch] = useState(initState)
  const boundDispatch = (action) => dispatch((s) => reducer(s, action))
  return [state, boundDispatch]
}
// 真实源码：mountReducer / updateReducer(reducer)，queue 存 action，合并逻辑同 §5.5

function SearchBox() {
  const [keyword, setKeyword] = useState('')
  const inputRef = useRef(null)
  return <input ref={inputRef} value={keyword} onChange={e => setKeyword(e.target.value)} />
}

function mountRef(initialValue) {
  const hook = mountWorkInProgressHook()
  hook.memoizedState = { current: initialValue }
  return hook.memoizedState
}

function updateRef() {
  const hook = updateWorkInProgressHook()
  return hook.memoizedState // 同一对象，不触发更新
}

// 伪代码：沿 Fiber 树向上找 Provider，读 _currentValue
function readContext(Context) {
  const providerFiber = findNearestProvider(currentlyRenderingFiber, Context)
  return providerFiber.memoizedProps.value // 简化：真实为 dependency 追踪 + lanes
}

function useContext(Context) {
  const value = readContext(Context)
  // mount/update 仍会占一个 Hook 槽（用于 DEV 与订阅列表），但不存 value 到 queue
  mountWorkInProgressHook() // 或 updateWorkInProgressHook，视实现版本
  return value
}

function propagateContextChange(providerFiber, context, newValue) {
  // 遍历订阅了该 context 的子 Fiber，标记 lanes，scheduleUpdate
}

// useTransition：把回调里的 setState 标为 TransitionLane
function useTransition() {
  const [isPending, setPending] = useState(false)
  const startTransition = (callback) => {
    const prev = ReactCurrentBatchConfig.transition
    ReactCurrentBatchConfig.transition = {} // 开启 transition 上下文
    setPending(true)
    try {
      callback()
    } finally {
      ReactCurrentBatchConfig.transition = prev
      setPending(false)
    }
  }
  return [isPending, startTransition]
}

// useDeferredValue：存上一帧值 + 用 transition 追赶最新 value
function useDeferredValue(value) {
  const [deferred, setDeferred] = useState(value)
  useEffect(() => {
    startTransition(() => setDeferred(value))
  }, [value])
  return deferred
}

// useSyncExternalStore：getSnapshot 必须与 subscribe 对齐，避免 tearing
function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
  const value = getSnapshot()
  useEffect(() => {
    return subscribe(() => forceRerender()) // 外部 store 变 → 调度更新
  }, [subscribe])
  return isServer ? getServerSnapshot() : value
}

// useId：Fiber 树路径上递增计数器，SSR/CSR 同规则生成
function useId() {
  const hook = updateWorkInProgressHook()
  if (hook.memoizedState == null) {
    hook.memoizedState = makeId(currentlyRenderingFiber)
  }
  return hook.memoizedState
}

// use(promise)：未 resolve 则抛给 Suspense；已 resolve 读缓存
function use(usable) {
  if (usable && typeof usable.then === 'function') {
    const status = readThenableState(usable) // pending | fulfilled | rejected
    if (status.pending) throw usable // Suspense 边界捕获
    if (status.rejected) throw status.reason
    return status.value
  }
  return readContext(usable) // Context 也可 use()
}

// useActionState：reducer + 包装 async action，暴露 pending
function useActionState(action, initialState) {
  const [state, dispatch] = useReducer(reducer, initialState)
  const [isPending, startTransition] = useTransition()
  const boundAction = async (payload) => {
    startTransition(async () => {
      const next = await action(state, payload)
      dispatch({ type: 'set', payload: next })
    })
  }
  return [state, boundAction, isPending]
}

// useOptimistic：真实 state + 过渡期间的乐观副本
function useOptimistic(passthrough, reducer) {
  const [optimistic, setOptimistic] = useState(passthrough)
  useEffect(() => setOptimistic(passthrough), [passthrough])
  const update = (action) => {
    startTransition(() => {
      setOptimistic((current) => reducer(current, action))
    })
  }
  return [optimistic, update]
}

const HooksDispatcherOnMount = {
  useState: mountState,
  useEffect: mountEffect,
  useMemo: mountMemo,
  useContext: readContext, // + 登记 Hook 槽
  // ...
}
const HooksDispatcherOnUpdate = {
  useState: () => updateReducer(basicStateReducer),
  useEffect: updateEffect,
  useMemo: updateMemo,
  // ...
}

function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current
  if (dispatcher === null) throw new Error('Invalid hook call')
  return dispatcher
}

function renderWithHooks(Component, props) {
  currentlyRenderingFiber = workInProgress
  ReactCurrentDispatcher.current =
    workInProgress.alternate === null
      ? HooksDispatcherOnMount
      : HooksDispatcherOnUpdate
  const children = Component(props)
  ReactCurrentDispatcher.current = null
  return children
}