乐趣区

关于react.js:React-Hooks

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];
}
退出移动版