Hoooks

定义

通过全局变量 ReactCurrentOwner 的 currentDispatcher 属性挂载 hooks api

// ReactHooks.js

import ReactCurrentOwner from './ReactCurrentOwner';

function resolveDispatcher() {
  const dispatcher = ReactCurrentOwner.currentDispatcher;
  invariant(
    dispatcher !== null,
    'Hooks can only be called inside the body of a function component.',
  );
  return dispatcher;
}

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

function useReducer<S, A>(
  reducer: (S, A) => S,
  initialState: S,
  initialAction: A | void | null,
) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useReducer(reducer, initialState, initialAction);
}

// ...

真正赋值 ReactCurrentOwner.currentDispatcher 是在 renderRoot 的开始时时候为赋值为 Dispatcher，结束 workLoop 后赋值为 null.即只有在 workLoop 阶段才会有值。

// ReactFiberScheduler.js

function renderRoot(root: FiberRoot, isYieldy: boolean): void {

  flushPassiveEffects();

  isWorking = true;
  if (enableHooks) {
    ReactCurrentOwner.currentDispatcher = Dispatcher;
  } else {
    ReactCurrentOwner.currentDispatcher = DispatcherWithoutHooks;
  }
  // ....

  // ...
  // We're done performing work. Time to clean up.
  isWorking = false;
  ReactCurrentOwner.currentDispatcher = null;
  // ...
}

更新阶段调用 hooks 过程

在 beginWork 里执行 updateFunctionComponent、mountIndeterminateComponent、 updateForwardRef（即对应函数式组件）的更新，会先执行 prepareToUseHooks (和 context 类似执行 prepareToReadContext)，在 render 完成后，执行 finishHooks.

function updateFunctionComponent(
current,
workInProgress,
Component,
nextProps: any,
renderExpirationTime,
) {
const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
const context = getMaskedContext(workInProgress, unmaskedContext);

let nextChildren;
prepareToReadContext(workInProgress, renderExpirationTime);
// hooks 方式写的组件是可以读取 context 的，且可以读取多个 context 的，即为什么 prepareToReadContext 会在 fiber 节点上使用链表方式 currentlyRenderingFiber.firstContextDependency = lastContextDependency = contextItem; 去记录 context的原因
prepareToUseHooks(current, workInProgress, renderExpirationTime);
if (__DEV__) {
ReactCurrentOwner.current = workInProgress;
setCurrentPhase('render');
nextChildren = Component(nextProps, context);
setCurrentPhase(null);
} else {
nextChildren = Component(nextProps, context);
}
// 
nextChildren = finishHooks(Component, nextProps, nextChildren, context);

// React DevTools reads this flag.
workInProgress.effectTag |= PerformedWork;
reconcileChildren(
current,
workInProgress,
nextChildren,
renderExpirationTime,
);
return workInProgress.child;
}

prepareToUseHooks

初始化模块当中的全局变量

function prepareToUseHooks(
  current: Fiber | null,
  workInProgress: Fiber,
  nextRenderExpirationTime: ExpirationTime,
): void {
  if (!enableHooks) {
    return;
  }
  // 当前更新的优先级
  renderExpirationTime = nextRenderExpirationTime;
  // 当前更新的 fiber 
  currentlyRenderingFiber = workInProgress;
  // 非首次渲染，memoizedState 记录的是 functionComponent当中第一个 hooks api 对应的 hook 对象
  firstCurrentHook = current !== null ? current.memoizedState : null;

}

finishHooks

didScheduleRenderPhaseUpdate 表示在渲染过程中产生的 update。即在 functionComponent 的 return 之前调用了 useState 返回的 setXXX 则这个变量被赋值为 true，目的是让在渲染过程中产生的 update 经过 while 渲染判断在一次渲染过程中就被执行掉，而不是等到下一次更新中执行
每一个 hook api 都会对应一个 hook 对象，挂载在 functionComponent 对应的 fiber 节点上的 memoizedState 属性上

function finishHooks(
  Component: any,
  props: any,
  children: any,
  refOrContext: any,
): any {
  if (!enableHooks) {
    return children;
  }

  // This must be called after every function component to prevent hooks from
  // being used in classes.

  // 如果是重复渲染的情况，清空全局变量 currentHook workInProgressHook，并计数 numberOfReRenders 渲染次数，在 dispatchAction 会 判断次数如果大于 RE_RENDER_LIMIT 抛出错误
  // 再执行一次 Component(props, refOrContext); 将 重复渲染在一次 更新中执行掉
  while (didScheduleRenderPhaseUpdate) {
    // Updates were scheduled during the render phase. They are stored in
    // the `renderPhaseUpdates` map. Call the component again, reusing the
    // work-in-progress hooks and applying the additional updates on top. Keep
    // restarting until no more updates are scheduled.
    didScheduleRenderPhaseUpdate = false;
    numberOfReRenders += 1;

    // Start over from the beginning of the list
    currentHook = null;
    workInProgressHook = null;
    componentUpdateQueue = null;

    children = Component(props, refOrContext);
  }
  renderPhaseUpdates = null;
  numberOfReRenders = 0;

  // 更新中的 fiber 对象
  const renderedWork: Fiber = (currentlyRenderingFiber: any);
  // firstWorkInProgressHook 是 functionComponent 每一个 hooks 对应的 hook 对象。
  renderedWork.memoizedState = firstWorkInProgressHook;
  renderedWork.expirationTime = remainingExpirationTime;
 // 对于useEffect 或者 useLayoutEffect 生成的 effect 链 
  renderedWork.updateQueue = (componentUpdateQueue: any);

  const didRenderTooFewHooks =
    currentHook !== null && currentHook.next !== null;

  renderExpirationTime = NoWork;
  currentlyRenderingFiber = null;

  firstCurrentHook = null;
  currentHook = null;
  firstWorkInProgressHook = null;
  workInProgressHook = null;

  remainingExpirationTime = NoWork;
  componentUpdateQueue = null;

  // Always set during createWorkInProgress
  // isReRender = false;

  // These were reset above
  // didScheduleRenderPhaseUpdate = false;
  // renderPhaseUpdates = null;
  // numberOfReRenders = 0;

  return children;
}

useState

实际使用的是 useReducer

function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  return useReducer(
    basicStateReducer,
    // useReducer has a special case to support lazy useState initializers
    (initialState: any),
  );
}

function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
  return typeof action === 'function' ? action(state) : action;
}

useReducer

在每个 hooks api 调用时会调用 createWorkInProgressHook 创建一个 hook 对象并赋值给全局变量 workInProgressHook 。

在 createWorkInProgressHook 内部 hook 对象构建成链表结构

function useReducer<S, A>(
reducer: (S, A) => S,
initialState: S,
initialAction: A | void | null,
): [S, Dispatch<A>] {
// 找到正在执行更新的 fiber 
currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
// 创建一个 hook 对象， 并通过全局变量构建 hook 链表
workInProgressHook = createWorkInProgressHook();
// 非首次渲染， queue 不为空的情况
let queue: UpdateQueue<A> | null = (workInProgressHook.queue: any);
if (queue !== null) {
// Already have a queue, so this is an update.
// 重复渲染
if (isReRender) {
  // This is a re-render. Apply the new render phase updates to the previous
  // work-in-progress hook.
  const dispatch: Dispatch<A> = (queue.dispatch: any);
  if (renderPhaseUpdates !== null) {
    // Render phase updates are stored in a map of queue -> linked list
    // renderPhaseUpdates 在 dispatchAction 被设置已 queque 为 key 的 map对象
    const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
    if (firstRenderPhaseUpdate !== undefined) {
      // 取出来后 删掉 queue
      renderPhaseUpdates.delete(queue);
      let newState = workInProgressHook.memoizedState;
      let update = firstRenderPhaseUpdate;
      // 重复渲染的过程中 所有update 立马执行，不进行 expirationTime 的判断
      do {
        // Process this render phase update. We don't have to check the
        // priority because it will always be the same as the current
        // render's.
        const action = update.action;
        newState = reducer(newState, action);
        update = update.next;
      } while (update !== null);
      // 更新 memoizedState 
      workInProgressHook.memoizedState = newState;

      // Don't persist the state accumlated from the render phase updates to
      // the base state unless the queue is empty.
      // TODO: Not sure if this is the desired semantics, but it's what we
      // do for gDSFP. I can't remember why.
      if (workInProgressHook.baseUpdate === queue.last) {
        workInProgressHook.baseState = newState;
      }

      return [newState, dispatch];
    }
  }
  return [workInProgressHook.memoizedState, dispatch];
}

// The last update in the entire queue
const last = queue.last;
// The last update that is part of the base state.
const baseUpdate = workInProgressHook.baseUpdate;

// 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 {
  // 获取第一个  update 
  first = last !== null ? last.next : null;
}
if (first !== null) {
  // 原来的老的值
  let newState = workInProgressHook.baseState;
  let newBaseState = null;
  let newBaseUpdate = null;
  let prevUpdate = baseUpdate;
  let update = first;
  let didSkip = false;
  // 将 update 链循环执行完
  do {
    const updateExpirationTime = update.expirationTime;
    // hooks 之后的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.
      // 只有有第一个在当前更新中更新优先级小于renderExpirationTime的（需要跳过的），那么 didSkip 会被设置为 true
      if (!didSkip) {
        didSkip = true;
        // 记录的是这个需要被跳过的 update 的前一个 update
        newBaseUpdate = prevUpdate;
        // 前一个 state  
        newBaseState = newState;
      }
      // Update the remaining priority in the queue.
      // remainingExpirationTime 初始值为 0
      // 只要有一个被跳过，则赋值为 跳过的update的对应的 expirationTime
      // 最后被设置为需要跳过的 update 里优先级最大的 expirationTime
      // 最后在 finishHooks  中会被设置为 fiber 对象的 expirationTime，即尚未执行更新的 update 里优先级最高的 expirationTime
      if (updateExpirationTime > remainingExpirationTime) {
        remainingExpirationTime = updateExpirationTime;
      }
    } else {
      // Process this update.
      const action = update.action;
      // 对于 useState 来说 action 就是更新后的值，而非 function
      // 即 newState = action 赋值新值
      newState = reducer(newState, action);
    }
    prevUpdate = update;
    update = update.next;
  } while (update !== null && update !== first);

  //  如果没有跳过的
  if (!didSkip) {
    // prevUpdate 为最后一个 update 即 last  
    newBaseUpdate = prevUpdate;
    newBaseState = newState;
  }
  // memoizedState 更新为新的 state
  workInProgressHook.memoizedState = newState;
  // 更新 baseUpdate, baseUpdate 记录的要么是 last 要么是需要跳过的update 的前一个 update 
  //  即在开头判断 baseUpdate  如果不为 null，则从 baseUpdate.next 开始更新
  workInProgressHook.baseUpdate = newBaseUpdate;
  workInProgressHook.baseState = newBaseState;
}

const dispatch: Dispatch<A> = (queue.dispatch: any);
return [workInProgressHook.memoizedState, dispatch];
}

// 首次渲染， hook.queue 为空
// There's no existing queue, so this is the initial render.
if (reducer === basicStateReducer) {
// useState 的情况  
// Special case for `useState`.
if (typeof initialState === 'function') {
  initialState = initialState();
}
} else if (initialAction !== undefined && initialAction !== null) {
// useReducer 接受的第三个参数，用来计算 initialState
initialState = reducer(initialState, initialAction);
}
// 将 initialState 挂载到 hook 对象上的 memoizedState 及 baseState，即使得 functionComponent 也有读取 state 的能力
// hook 对象是更细粒度的 fiber
workInProgressHook.memoizedState = workInProgressHook.baseState = initialState;
// 挂载 queue，last 用来记录 dispatchAction 函数中生成的 update 链
queue = workInProgressHook.queue = {
last: null,
dispatch: null,
};
// 生成dispatch函数 
const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
null,
currentlyRenderingFiber,
queue,
): any));
return [workInProgressHook.memoizedState, dispatch];
}

createWorkInProgressHook

创建 hook 对象，并构建链表结构
firstWorkInProgressHook 变量在这里被赋值为第一个创建的 hook，执行完 functionComponent 得到 children 后会走 finishHooks，将 firstWorkInProgressHook 赋值给 fiber.memoizedState，再将 firstWorkInProgressHook 清空

function createWorkInProgressHook(): Hook {
  if (workInProgressHook === null) {
    // This is the first hook in the list
    if (firstWorkInProgressHook === null) {
      // 都为 null，是非重复渲染的
      isReRender = false;
      currentHook = firstCurrentHook;
      if (currentHook === null) {
        // This is a newly mounted hook
        // 首次渲染，创建 hook 对象
        workInProgressHook = createHook();
      } else {
        // Clone the current hook.
        workInProgressHook = cloneHook(currentHook);
      }
      firstWorkInProgressHook = workInProgressHook;
    } else {
      // There's already a work-in-progress. Reuse it.
      // firstWorkInProgressHook 不为 null，说明 finishHooks 方法中的didScheduleRenderPhaseUpdate 为true 导致  while 循环在执行，即说明在重复渲染
      // 重复渲染的 
      isReRender = true;
      currentHook = firstCurrentHook;
      workInProgressHook = firstWorkInProgressHook;
    }
  } else {
    // 非首次渲染，并未执行过其他的 hooks api，也是非重复渲染的 
    if (workInProgressHook.next === null) {
      isReRender = false;
      let hook;
      if (currentHook === null) {
        // This is a newly mounted hook
        hook = createHook();
      } else {
        currentHook = currentHook.next;
        if (currentHook === null) {
          // This is a newly mounted hook
          hook = createHook();
        } else {
          // Clone the current hook.
          hook = cloneHook(currentHook);
        }
      }
      // 如果 next 为null 那么将 hook1.next = hook2 
      // Append to the end of the list
      workInProgressHook = workInProgressHook.next = hook;
    } else {
      // There's already a work-in-progress. Reuse it.
      // next 不为 null，复用原来的
      //  重复渲染
      isReRender = true;
      workInProgressHook = workInProgressHook.next;
      currentHook = currentHook !== null ? currentHook.next : null;
    }
  }
  return workInProgressHook;
}

// createHook

function createHook(): Hook {
  return {
    memoizedState: null,

    baseState: null,
    queue: null,
    baseUpdate: null,

    next: null,
  };
}

dispatchAction

用来生成 dispatch 函数
创建 update，并构建 update 的链表结构，将 queue.last 指向最后一个产生的 update

function dispatchAction<A>(fiber: Fiber, queue: UpdateQueue<A>, action: A) {
// rerendered 次数 大于 RE_RENDER_LIMIT 则报错
invariant(
numberOfReRenders < RE_RENDER_LIMIT,
'Too many re-renders. React limits the number of renders to prevent ' +
  'an infinite loop.',
);

const alternate = fiber.alternate;
if (
// 只有在 return 之前调用 setXXX, 即在更新当前 functionComponent 的中过程调用了 setState ，还未执行 finishHooks。 currentlyRenderingFiber => 当前 function 对应的 Fiber 
fiber === currentlyRenderingFiber ||  
(alternate !== null && alternate === currentlyRenderingFiber)
) {
// This is a render phase update. Stash it in a lazily-created map of
// queue -> linked list of updates. After this render pass, we'll restart
// and apply the stashed updates on top of the work-in-progress hook.
didScheduleRenderPhaseUpdate = true;
const update: Update<A> = {
  expirationTime: renderExpirationTime,
  action,
  next: null,
};
// 将重复渲染的 update 收集， 在 useReducer 中会判断 renderPhaseUpdates 是否为空，并去 queue 对应的 update
if (renderPhaseUpdates === null) {
  renderPhaseUpdates = new Map();
}
const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
if (firstRenderPhaseUpdate === undefined) {
  renderPhaseUpdates.set(queue, update);
} else {
  // Append the update to the end of the list.
  let lastRenderPhaseUpdate = firstRenderPhaseUpdate;
  while (lastRenderPhaseUpdate.next !== null) {
    lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
  }
  // 重复渲染的 update 构建链表
  lastRenderPhaseUpdate.next = update;
}
} else {
// 计算 expirationTime 
const currentTime = requestCurrentTime();
const expirationTime = computeExpirationForFiber(currentTime, fiber);
// 创建 update 
const update: Update<A> = {
  expirationTime,
  action,
  next: null,
};
// useEffect 相关
flushPassiveEffects();
// Append the update to the end of the list.
// last 是 queue 用来标识最后一个 update 的
// last.next 用来标识第一个 即 first update
// 首次为 null， queue.last = update1, update1.next = update1
const last = queue.last;
if (last === null) {
  // This is the first update. Create a circular list.
  update.next = update;
} else {
  // last 不为 null 即非首次
  // first -> update1
  const first = last.next;
  if (first !== null) {
    // Still circular.
    // 新的 update 即 update2.next = update1;
    update.next = first;
  }
  // update1.next = update2;
  last.next = update;
}
// last = update2;
queue.last = update;
// 加入调度
scheduleWork(fiber, expirationTime);
}
}

useEffect 与 useLayoutEffect

都是执行的 useEffectImpl 不同的是前两个参数不同
- 第一个参数为标记当前 fiber 的 effectTag
- 第二个参数标记的是 hook 对象的 effectTag
- 第三个参数 create 为传入的匿名函数
- 第四个参数 inputs 为依赖数组
useLayoutEffect 会在 commitRoot 的第三次循环 commitAllLifeCycles => commitLifeCycles 中被执行，执行时机相当于 componentDidMount 和 componentDidUpdate
在执行 commitAllLifeCycles 时会根据 nextEffect 是否有 Passive （passiveEffect）赋值 rootWithPendingPassiveEffects = finishedRoot 在执行完 commitRoot 的三次循环后会判断这个变量如果存在则将 commitPassiveEffects 加入到 Schedule_scheduleCallback 异步任务调度中
useEffect 会在 commitPassiveEffects 被执行，先执行 destroy 再执行 create。加入调度任务中是为了给浏览器更多时间渲染，js执行更少的时间，防止页面阻塞。

// ReactHookEffectTags
const NoEffect = /*             */ 0b00000000;   // => NoHookEffect
const UnmountSnapshot = /*      */ 0b00000010;
const UnmountMutation = /*      */ 0b00000100;
const UnmountMutation = /*      */ 0b00000100;
const MountMutation = /*        */ 0b00001000;
const UnmountLayout = /*        */ 0b00010000;
const MountLayout = /*          */ 0b00100000;
const MountPassive = /*         */ 0b01000000;
const UnmountPassive = /*       */ 0b10000000;

// ReactSideEffectTags 
const Update = /*                */ 0b000000000100;   // => updateEffect
const Passive = /*               */ 0b001000000000;   //  => passiveEffect

function useLayoutEffect(
  create: () => mixed,
  inputs: Array<mixed> | void | null,
): void {

  useEffectImpl(
    UpdateEffect, 
    UnmountMutation | MountLayout,  // => 0b00100100
    create, 
    inputs
  );
}

export function useEffect(
  create: () => mixed,
  inputs: Array<mixed> | void | null,
): void {
  useEffectImpl(
    UpdateEffect | PassiveEffect, // => 0b001000000100
    UnmountPassive | MountPassive, // => 0b11000000
    create,
    inputs,
  );
}

useEffectImpl

给 fiber 标记对应的 effectTag
调用 pushEffect 创建 hook 对象的 effect 并标记对应的 hookEffectTag，构建 effect 链赋值给 fiber 对象的 updateQueue

areHookInputsEqual 方法对比依赖数组，如果依赖变化则执行 pushEffect。即如果不传依赖数组，每次都会执行 pushEffect

function useEffectImpl(fiberEffectTag, hookEffectTag, create, inputs): void {
currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
workInProgressHook = createWorkInProgressHook();

// inputs 为传入的依赖数组，如果为空，则是回调函数自身
let nextInputs = inputs !== undefined && inputs !== null ? inputs : [create];
let destroy = null;
// currentHook !== null 非首次渲染
if (currentHook !== null) {
const prevEffect = currentHook.memoizedState;
destroy = prevEffect.destroy;
// 前后对比依赖项是否变化
if (areHookInputsEqual(nextInputs, prevEffect.inputs)) {
  // 如果相同
  pushEffect(NoHookEffect, create, destroy, nextInputs);
  return;
}
}
// 第一次渲染 或者 依赖不相同  
// 标记 fiber 的 effectTag 为 fiberEffectTag 
currentlyRenderingFiber.effectTag |= fiberEffectTag;
workInProgressHook.memoizedState = pushEffect(
hookEffectTag,
create,
destroy,
nextInputs,
);
}

areHookInputsEqual

对比依赖数组的每一项是否相同，都相同则返回 true 否则返回 false

对 Object.is 的 Polyfill

function areHookInputsEqual(arr1: any[], arr2: any[]) {
// Don't bother comparing lengths in prod because these arrays should be
// passed inline.
for (let i = 0; i < arr1.length; i++) {
// Inlined Object.is polyfill.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
const val1 = arr1[i];
const val2 = arr2[i];
if (
  (val1 === val2 && (val1 !== 0 || 1 / val1 === 1 / (val2: any))) ||
  (val1 !== val1 && val2 !== val2) // eslint-disable-line no-self-compare
) {
  continue;
}
return false;
}
return true;
}

pushEffect

构建 functionComponent 所有的 effect 链，保存在 fiber 对象的 componentUpdateQueue 属性的 lastEffect 上

在 finishHooks 时将 componentUpdateQueue 赋值给 fiber.updateQueue


function pushEffect(tag, create, destroy, inputs) {
const effect: Effect = {
tag, //  => hookEffectTag
create, 
destroy,
inputs,
// Circular
next: (null: any),
};
// 构建 functionComponent 所有的 effect  链
if (componentUpdateQueue === null) {
componentUpdateQueue = createFunctionComponentUpdateQueue();
componentUpdateQueue.lastEffect = effect.next = effect;
} else {
const lastEffect = componentUpdateQueue.lastEffect;
if (lastEffect === null) {
  componentUpdateQueue.lastEffect = effect.next = effect;
} else {
  const firstEffect = lastEffect.next;
  lastEffect.next = effect;
  effect.next = firstEffect;
  componentUpdateQueue.lastEffect = effect;
}
}
return effect;
}

function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue { return { lastEffect: null, }; }


## commitHookEffectList
- 在 `commitRoot` 的三次循环中均有被调用，三次循环后 还有一次调用是针对 `useEffect` 的
- 在一次更新渲染中会先执行上一次 `effect` 的 `destroy`，即官方推荐不能在 `hooks Api` 之前写 `if` 条件判断是否使用 `hooks`，这样会下一次更新时构建的 `effect` 链的顺序是和上次不一样的，导致在 `commitRoot` 时顺序错乱。
```js
function commitHookEffectList(
  unmountTag: number,
  mountTag: number,
  finishedWork: Fiber,
) {
  if (!enableHooks) {
    return;
  }
  // 读取 updateQueue
  const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
  let lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  // 遍历在 useEffectImpl 中 pushEffect 生成的 effect 链 （hook对象的）
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      // 如果 effect.tag  有 unmountTag 则执行 destroy()
      if ((effect.tag & unmountTag) !== NoHookEffect) {
        // Unmount
        const destroy = effect.destroy;
        effect.destroy = null;
        if (destroy !== null) {
          destroy();
        }
      }
      // 如果 effect.tag 有 moountTag 则执行 create()
      if ((effect.tag & mountTag) !== NoHookEffect) {
        // Mount
        const create = effect.create;

        let destroy = create();
        if (typeof destroy !== 'function') {
          // 非函数返回的提示
          if (__DEV__) {
            if (destroy !== null && destroy !== undefined) {
              warningWithoutStack(
                false,
                'useEffect function must return a cleanup function or ' +
                  'nothing.%s%s',
                typeof destroy.then === 'function'
                  ? '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +
                    'Instead, you may write an async function separately ' +
                    'and then call it from inside the effect:\n\n' +
                    'async function fetchComment(commentId) {\n' +
                    '  // You can await here\n' +
                    '}\n\n' +
                    'useEffect(() => {\n' +
                    '  fetchComment(commentId);\n' +
                    '}, [commentId]);\n\n' +
                    'In the future, React will provide a more idiomatic solution for data fetching ' +
                    "that doesn't involve writing effects manually."
                  : '',
                getStackByFiberInDevAndProd(finishedWork),
              );
            }
          }
          destroy = null;
        }
        effect.destroy = destroy;
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}

第一次循环 commitBeforeMutationLifecycles

unmountTag -> UnmountSnapshot。在 useEffectImpl 没有推入 UnmountSnapshot。 因此不会执行 destroy
mountTag -> NoHookEffect。也不会执行 create

function commitBeforeMutationLifeCycles( current: Fiber | null, finishedWork: Fiber, ): void { switch (finishedWork.tag) { case FunctionComponent: case ForwardRef: case SimpleMemoComponent: { commitHookEffectList(UnmountSnapshot, NoHookEffect, finishedWork); return; } //... } //... }


### 第二次循环 commitAllHostEffects
- `commitAllHostEffects` 对 `dom` 节点的 `PlacementAndUpdate` 和 `Update` 会先执行 `commitWork`
- `unmountTag -> UnmountMutation` 对应 `useLayoutEffect` 传入 `UnmountMutation | MountLayout`，因此会执行 `useLayoutEffect` 的 `destroy`
- `mountTag -> MountMutation`。没有标记 `MountMutation` 因此都不会执行 `create` 

```js
function commitWork(current: Fiber | null, finishedWork: Fiber): void {
  // ...
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
      // Note: We currently never use MountMutation, but useLayout uses
      // UnmountMutation.
      commitHookEffectList(UnmountMutation, MountMutation, finishedWork);
      return;
    }
    // ...
  }
}

第三次循环 commitAllLifeCycles

commitAllLifeCycles -> commitLifeCycles
unmountTag -> UnmountLayout. 都没有标记 UnmountLayout 都不会执行 destroy
mountTag -> MountLayout. useLayoutEffect 标记了 MountLayout 因此会执行它的 create 方法，对应 classComponent 组件会在这里执行 componentDidMount 和 componentDidUpdate
执行完 commitLifeCycles 之后，如果 effectTag 有 Passive 则赋值 rootWithPendingPassiveEffects = finishedRoot。为 useEffect 执行做准备


function commitAllLifeCycles(
  finishedRoot: FiberRoot,
  committedExpirationTime: ExpirationTime,
) {
  if (__DEV__) {
    ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();
    ReactStrictModeWarnings.flushLegacyContextWarning();

    if (warnAboutDeprecatedLifecycles) {
      ReactStrictModeWarnings.flushPendingDeprecationWarnings();
    }
  }
  while (nextEffect !== null) {
    const effectTag = nextEffect.effectTag;

    if (effectTag & (Update | Callback)) {
      recordEffect();
      const current = nextEffect.alternate;
      commitLifeCycles(
        finishedRoot,
        current,
        nextEffect,
        committedExpirationTime,
      );
    }

    if (effectTag & Ref) {
      recordEffect();
      commitAttachRef(nextEffect);
    }

    // useEffect 中标记 fiber 的 effectTag 为 updateEffect | passiveEffect 
    // 因此对于 useEffect 的节点会满足条件，从而赋值 rootWithPendingPassiveEffects
    if (enableHooks && effectTag & Passive) {
      rootWithPendingPassiveEffects = finishedRoot;
    }

    nextEffect = nextEffect.nextEffect;
  }
}

function commitLifeCycles(
  finishedRoot: FiberRoot,
  current: Fiber | null,
  finishedWork: Fiber,
  committedExpirationTime: ExpirationTime,
): void {
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case SimpleMemoComponent: {
      commitHookEffectList(UnmountLayout, MountLayout, finishedWork);
      break;
    }
    // ...
  }
}

第四次执行 commitHookEffectList

commitRoot 执行完三次循环后，如果 rootWithPendingPassiveEffects 不为空则将 commitPassiveEffects 加入到 scheduleWork 的调度队列中
即 useEffect 执行是个异步过程，要等到所有节点更新完成、浏览器重新渲染 dom 后才会执行 commitPassiveEffects。即 useLayoutEffect 中可以同步的获取更新后的 dom.

// commitRoot 

//... 

if (
    enableHooks &&
    firstEffect !== null &&
    rootWithPendingPassiveEffects !== null
  ) {
    // This commit included a passive effect. These do not need to fire until
    // after the next paint. Schedule an callback to fire them in an async
    // event. To ensure serial execution, the callback will be flushed early if
    // we enter rootWithPendingPassiveEffects commit phase before then.
    let callback = commitPassiveEffects.bind(null, root, firstEffect);
    if (enableSchedulerTracing) {
      // TODO: Avoid this extra callback by mutating the tracing ref directly,
      // like we do at the beginning of commitRoot. I've opted not to do that
      // here because that code is still in flux.
      callback = Schedule_tracing_wrap(callback);
    }
    passiveEffectCallbackHandle = Schedule_scheduleCallback(callback);
    passiveEffectCallback = callback;
  }

//...

commitPassiveEffects

遍历所有 effect 找到标记了 Passive 的执行 commitPassiveHookEffects

function commitPassiveEffects(root: FiberRoot, firstEffect: Fiber): void {
  rootWithPendingPassiveEffects = null;
  passiveEffectCallbackHandle = null;
  passiveEffectCallback = null;

  // Set this to true to prevent re-entrancy
  const previousIsRendering = isRendering;
  isRendering = true;

  let effect = firstEffect;
  do {
    if (effect.effectTag & Passive) {
      let didError = false;
      let error;
      if (__DEV__) {
        invokeGuardedCallback(null, commitPassiveHookEffects, null, effect);
        if (hasCaughtError()) {
          didError = true;
          error = clearCaughtError();
        }
      } else {
        try {
          commitPassiveHookEffects(effect);
        } catch (e) {
          didError = true;
          error = e;
        }
      }
      if (didError) {
        captureCommitPhaseError(effect, error);
      }
    }
    effect = effect.nextEffect;
  } while (effect !== null);

  isRendering = previousIsRendering;

  // Check if work was scheduled by one of the effects
  const rootExpirationTime = root.expirationTime;
  if (rootExpirationTime !== NoWork) {
    requestWork(root, rootExpirationTime);
  }
}

commitPassiveHookEffects

执行两次
第一次 unmountTag -> UnmountPassive, mountTag -> NoHookEffect 因此只执行 useEffect 的 destroy

第二次unmountTag -> NoHookEffect, 只执行 useEffect 的 create

function commitPassiveHookEffects(finishedWork: Fiber): void {
commitHookEffectList(UnmountPassive, NoHookEffect, finishedWork);
commitHookEffectList(NoHookEffect, MountPassive, finishedWork);
}

useContext

调用 readContext 获取 context

function useContext<T>(
  context: ReactContext<T>,
  observedBits: void | number | boolean,
): T {
  // Ensure we're in a function component (class components support only the
  // .unstable_read() form)
  resolveCurrentlyRenderingFiber();
  return readContext(context, observedBits);
}

useRef

将 ref 对象挂载到 hook.memoizedState 属性上。

function useRef<T>(initialValue: T): {current: T} {
currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
workInProgressHook = createWorkInProgressHook();
let ref;

if (workInProgressHook.memoizedState === null) {
// ref 对象
ref = {current: initialValue};
if (__DEV__) {
  Object.seal(ref);
}
workInProgressHook.memoizedState = ref;
} else {
ref = workInProgressHook.memoizedState;
}
return ref;
}

useImperativeHandle

作用: 子组件配合 forwardRef 往父组件传递方法或者属性
内部使用 useLayoutEffect

function useImperativeMethods<T>(
  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
  create: () => T,
  inputs: Array<mixed> | void | null,
): void {
  // TODO: If inputs are provided, should we skip comparing the ref itself?
  const nextInputs =
    inputs !== null && inputs !== undefined
      ? inputs.concat([ref])
      : [ref, create];

  // TODO: I've implemented this on top of useEffect because it's almost the
  // same thing, and it would require an equal amount of code. It doesn't seem
  // like a common enough use case to justify the additional size.
  useLayoutEffect(() => {
    // 如果传递下来的 ref 是个函数
    if (typeof ref === 'function') {
      const refCallback = ref;
      const inst = create();
      // 将 create 方法执行结果当作参数
      refCallback(inst);
      return () => refCallback(null);
    } else if (ref !== null && ref !== undefined) {
      const refObject = ref;
      const inst = create();
      // 直接将 create 方法的结果挂载到传递下来的 ref.current 上
      refObject.current = inst;
      return () => {
        refObject.current = null;
      };
    }
  }, nextInputs);
}

useCallback

如果依赖项相同则返回同一个 callback

function useCallback<T>(
  callback: T,
  inputs: Array<mixed> | void | null,
): T {
  currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
  workInProgressHook = createWorkInProgressHook();

  const nextInputs =
    inputs !== undefined && inputs !== null ? inputs : [callback];

  const prevState = workInProgressHook.memoizedState;
  if (prevState !== null) {
    const prevInputs = prevState[1];
    if (areHookInputsEqual(nextInputs, prevInputs)) {
      return prevState[0];
    }
  }
  workInProgressHook.memoizedState = [callback, nextInputs];
  return callback;
}

useMemo

返回的是 nextCreate 的执行结果，如果依赖项相同，则会返回上一次的执行结果

function useMemo<T>(
nextCreate: () => T,
inputs: Array<mixed> | void | null,
): T {
currentlyRenderingFiber = resolveCurrentlyRenderingFiber();
workInProgressHook = createWorkInProgressHook();

const nextInputs =
inputs !== undefined && inputs !== null ? inputs : [nextCreate];

const prevState = workInProgressHook.memoizedState;
if (prevState !== null) {
const prevInputs = prevState[1];
if (areHookInputsEqual(nextInputs, prevInputs)) {
  return prevState[0];
}
}

const nextValue = nextCreate();
workInProgressHook.memoizedState = [nextValue, nextInputs];
return nextValue;
}

lz-lee / React-Source-Code

Hooks #15