useState

react对useState进行了封装，调用了mountState。

function useState<S>(

    initialState: (() => S) | S,

): [S, Dispatch<BasicStateAction<S>>] {

    currentHookNameInDev = 'useState';

    mountHookTypesDev();

    const prevDispatcher = ReactCurrentDispatcher.current;

    ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;

    try {

        return mountState(initialState);

    } finally {

        ReactCurrentDispatcher.current = prevDispatcher;

    }

}

mountState

如果initialState是函数还可以执行。

生成一个dispatch方法，通过闭包绑定当前states。

把初始值存到memoizedState上。这个memoizedState绑定到fiber树上。用来存储state。

function mountState<S>(

  initialState: (() => S) | S,

): [S, Dispatch<BasicStateAction<S>>] {

    // 把hooks加入queue，实际上是为了保证执行顺序。

  const hook = mountWorkInProgressHook();

  if (typeof initialState === 'function') {

    initialState = initialState();

  }

  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];

}

memoizedState

react其实不知道我们调用了几次useState。

所以还是在memoizedState上动手脚，这个处理体现在mountWorkInProgressHook

 memoizedState: {

  baseState,

  next,

  baseUpdate,

  queue,

  memoizedState

}

memoizedState.next就是下一次useState的hook对象。

hook1 === Fiber.memoizedState

state1 === hook1.memoizedState

state2 = hook1.next.memoizedState

因为以这种方式存储，所以usestate必须在functionalComponent的根作用域中。不能被for，和if。

setstate

mountState函数返回的是 return [hook.memoizedState, dispatch];

dispatch通过闭包就可以处理state。

更新

useState在更新的时候是调用的updateState，这个函数其实是封装的updateReducer。

function renderWithHooks(){

    ReactCurrentDispatcher.current =

      nextCurrentHook === null

        ? HooksDispatcherOnMount

        : HooksDispatcherOnUpdate;

};

HooksDispatcherOnMount: {

    useState: mountState,

}

HooksDispatcherOnUpdate: {

    useState: updateState,

}

updateReducer

可以看到updateReducer把新的fiber中的state值更新，返回新的值。然后后续走渲染流程。（之前写过reat 的渲染流程）

还可以看到这有个循环update = update.next; while (update !== null && update !== first);

这就是hooks的batchUpdate。

function updateReducer<S, I, A>(

  reducer: (S, A) => S,

  initialArg: I,

  init?: I => S,

): [S, Dispatch<A>] {

  const hook = updateWorkInProgressHook();

  const queue = hook.queue;

  queue.lastRenderedReducer = reducer;

  // ...

  // The last update in the entire queue

  const last = queue.last;

  // The last update that is part of the base state.

  const baseUpdate = hook.baseUpdate;

  const baseState = hook.baseState;

  // Find the first unprocessed update.

  let first;

  if (baseUpdate !== null) {

    if (last !== null) {

      // For the first update, the queue is a circular linked list where

      // `queue.last.next = queue.first`. Once the first update commits, and

      // the `baseUpdate` is no longer empty, we can unravel the list.

      last.next = null;

    }

    first = baseUpdate.next;

  } else {

    first = last !== null ? last.next : null;

  }

  if (first !== null) {

    let newState = baseState;

    let newBaseState = null;

    let newBaseUpdate = null;

    let prevUpdate = baseUpdate;

    let update = first;

    let didSkip = false;

    do {

      const updateExpirationTime = update.expirationTime;

      if (updateExpirationTime < renderExpirationTime) {

        // Priority is insufficient. Skip this update. If this is the first

        // skipped update, the previous update/state is the new base

        // update/state.

        if (!didSkip) {

          didSkip = true;

          newBaseUpdate = prevUpdate;

          newBaseState = newState;

        }

        // Update the remaining priority in the queue.

        if (updateExpirationTime > remainingExpirationTime) {

          remainingExpirationTime = updateExpirationTime;

        }

      } else {

        markRenderEventTimeAndConfig(

          updateExpirationTime,

          update.suspenseConfig,

        );

        // Process this update.

        if (update.eagerReducer === reducer) {

          // If this update was processed eagerly, and its reducer matches the

          // current reducer, we can use the eagerly computed state.

          newState = ((update.eagerState: any): S);

        } else {

          const action = update.action;

          newState = reducer(newState, action);

        }

      }

      prevUpdate = update;

      update = update.next;

    } while (update !== null && update !== first);

    if (!didSkip) {

      newBaseUpdate = prevUpdate;

      newBaseState = newState;

    }

    // Mark that the fiber performed work, but only if the new state is

    // different from the current state.

    if (!is(newState, hook.memoizedState)) {

      markWorkInProgressReceivedUpdate();

    }

    hook.memoizedState = newState;

    hook.baseUpdate = newBaseUpdate;

    hook.baseState = newBaseState;

    queue.lastRenderedState = newState;

  }

  const dispatch: Dispatch<A> = (queue.dispatch: any);

  return [hook.memoizedState, dispatch];

}

巴特西

react 16 Hooks渲染流程

useState

mountState

memoizedState

setstate

更新

updateReducer

最新文章

热门文章