# React 源码解读（六） hooks 原理（useState）

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

const ReactCurrentDispatcher = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: (null: null | Dispatcher)
};

function renderRoot(root: FiberRoot, isYieldy: boolean): void {
  //...
  isWorking = true;
  // 设置 ReactCurrentDispatcher， 包含所有hooks的实现
  const previousDispatcher = ReactCurrentDispatcher.current;
  ReactCurrentDispatcher.current = ContextOnlyDispatcher;
  //...
}

// 区分是Mount还是Update
ReactCurrentDispatcher.current =
  nextCurrentHook === null ? HooksDispatcherOnMount : HooksDispatcherOnUpdate;

const HooksDispatcherOnMount: Dispatcher = {
  readContext,

  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  useDebugValue: mountDebugValue
};

const HooksDispatcherOnUpdate: Dispatcher = {
  readContext,

  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useReducer: updateReducer,
  useRef: updateRef,
  useState: updateState,
  useDebugValue: updateDebugValue
};

function mountState<S>(
  initialState: (() => S) | S
): [S, Dispatch<BasicStateAction<S>>] {
  // 访问Hook链表的下一个节点，获取到新的Hook对象
  const hook = mountWorkInProgressHook();
  // 获取初始化state
  // useState 有两种传初始值的方式
  // 一种是直接传值
  // 一种是传入函数，最后返回值
  // 这里判断如果是函数的话，会自动执行掉拿到返回值
  if (typeof initialState === "function") {
    initialState = initialState();
  }
  // 存入memoizedState，因为在mount还是在update的时候，update的时候
  // 期望每次重新执行函数的时候，都能得到更新后的值

  hook.memoizedState = hook.baseState = initialState;
  // 初始化队列
  const queue = (hook.queue = {
    last: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: (initialState: any)
  });
  const dispatch: Dispatch<
    BasicStateAction<S>
  > = (queue.dispatch = (dispatchAction.bind(
    null,
    // Flow doesn't know this is non-null, but we do.
    ((currentlyRenderingFiber: any): Fiber),
    queue
  ): any));
  return [hook.memoizedState, dispatch];
}

const update: Update<S, A> = {
  expirationTime,
  action,
  eagerReducer: null,
  eagerState: null,
  next: null
};

// Append the update to the end of the list.
const last = queue.last;
// 把当前创建的更新，放入队列的最后
if (last === null) {
  // This is the first update. Create a circular list.
  update.next = update;
} else {
  // 这是一个环， last 的next指向的是first
  // 这把更新添加到last的next， update的next又指向first， 重新形成一个环
  const first = last.next;
  if (first !== null) {
    // Still circular.
    update.next = first;
  }
  last.next = update;
}

if (
  fiber.expirationTime === NoWork &&
  (alternate === null || alternate.expirationTime === NoWork)
) {
  const lastRenderedReducer = queue.lastRenderedReducer;
  if (lastRenderedReducer !== null) {
    let prevDispatcher;
    try {
      const currentState: S = (queue.lastRenderedState: any);
      const eagerState = lastRenderedReducer(currentState, action);
      update.eagerReducer = lastRenderedReducer;
      // 一个优化手段
      update.eagerState = eagerState;
      if (is(eagerState, currentState)) {
        return;
      }
    } catch (error) {
    } finally {
    }
  }
}

// 最后执行一个调度
scheduleWork(fiber, expirationTime);

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

const hook = updateWorkInProgressHook();
const queue = hook.queue;

renderPhaseUpdates.delete(queue);
let newState = hook.memoizedState;
let update = firstRenderPhaseUpdate;
do {
  const action = update.action;
  // 执行reducer，得到新的 state，新的state再参与计算
  newState = reducer(newState, action);
  // 继续
  update = update.next;
} while (update !== null);
if (!is(newState, hook.memoizedState)) {
  markWorkInProgressReceivedUpdate();
}
// 更新memoizedState的值
hook.memoizedState = newState;
if (hook.baseUpdate === queue.last) {
  hook.baseState = newState;
}

queue.lastRenderedState = newState;
// 返回新值了
return [newState, dispatch];