React@v19源码---useEffectuse / LayoutEffect

总结

其实mount和 update 执行的函数没什么太大区别。pushEffect才是核心

• 创建/获取 hook 对象，
• 处理deps
• 执行pushEffect

hook.memoizedState里保存的是 effect 对象

需要注意的点：

• PassiveEffect、PassiveStaticEffect 是 fiber.flags 上的标记，用来判断是否有副作用相关的逻辑，跟HookPassive、HookHasEffect不一样，HookPassive是 hooks 上的tag标记，别搞混了
• 依赖对比是通过Object.is进行比较的，跟 props 和 state 是否更改的判断方法一样
• inst 是个对象，有个destory函数，这个就是 useEffect 第一个参数回调函数的返回值

pushEffect

function pushEffect(
  tag: HookFlags,
  create: () => (() => void) | void,
  inst: EffectInstance,
  deps: Array<mixed> | null
): Effect {
  const effect: Effect = {
    tag,
    // create 为 useEffect第一个参数
    create,
    // inst
    inst,
    // deps 为 useEffect第二个参数
    deps,
    // Circular
    next: (null: any),
  };
  let componentUpdateQueue: null | FunctionComponentUpdateQueue =
    (currentlyRenderingFiber.updateQueue: any);
  if (componentUpdateQueue === null) {
    // 函数式组件的updateQueue结构为
    // {
    //   lastEffect: null,
    //   events: null,
    //   stores: null
    // }
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
    // 串成环状链表
    componentUpdateQueue.lastEffect = effect.next = effect;
  } else {
    const lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      // 说明链表是空的
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      // 取出第一位
      const firstEffect = lastEffect.next;
      // 将最新的effect串在表尾
      lastEffect.next = effect;
      // 闭环
      effect.next = firstEffect;
      // 更新表尾
      componentUpdateQueue.lastEffect = effect;
    }
  }
  return effect;
}

flushPassiveEffectsImpl

function flushPassiveEffectsImpl() {
  if (rootWithPendingPassiveEffects === null) {
    return false;
  }

  const transitions = pendingPassiveTransitions;
  pendingPassiveTransitions = null;
  // 保存有副作用的fiber的fiberRootNode和待处理的副作用优先级，然后清空全局变量
  const root = rootWithPendingPassiveEffects;
  const lanes = pendingPassiveEffectsLanes;
  rootWithPendingPassiveEffects = null;

  pendingPassiveEffectsLanes = NoLanes;

  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
    throw new Error("Cannot flush passive effects while already rendering.");
  }

  // 保存当前执行上下文，处理完之后恢复
  const prevExecutionContext = executionContext;
  // 进入commit阶段
  // 这个操作除了这个地方之外 还有在commit阶段（commitRootImpl）
  executionContext |= CommitContext;
  // 先执行unMount 后执行mount
  // 两个操作逻辑基本一致 从root开始递归检查subtreeFlags是否有对应flag，
  // 一直继续向下遍历，到最底
  // 深度优先的后续遍历，跟commit阶段一个逻辑
  commitPassiveUnmountEffects(root.current);
  commitPassiveMountEffects(root, root.current, lanes, transitions);

  // 恢复处理effect之前的执行上下文
  executionContext = prevExecutionContext;
  // 所有异步结束之前都要刷新一下同步任务
  flushSyncWorkOnAllRoots();

  return true;
}

commitHookEffectListUnmount

unmount 先触发

function commitHookEffectListUnmount(
  flags: HookFlags,
  finishedWork: Fiber,
  nearestMountedAncestor: Fiber | null
) {
  const updateQueue: FunctionComponentUpdateQueue | null =
    (finishedWork.updateQueue: any);
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  if (lastEffect !== null) {
    // 遍历所有effect
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      //
      if ((effect.tag & flags) === flags) {
        // 是否包含flags
        // Unmount
        const inst = effect.inst;
        const destroy = inst.destroy;
        if (destroy !== undefined) {
          // 清空destroy，以便重新生成
          inst.destroy = undefined;
          // 执行destroy
          safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
        }
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}

commitPassiveMountEffects

function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
  const updateQueue: FunctionComponentUpdateQueue | null =
    (finishedWork.updateQueue: any);
  const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
  if (lastEffect !== null) {
    const firstEffect = lastEffect.next;
    let effect = firstEffect;
    do {
      if ((effect.tag & flags) === flags) {
        // Mount
        const create = effect.create;
        const inst = effect.inst;
        // 执行useEffect第一个参数
        const destroy = create();
        // 更新destroy
        inst.destroy = destroy;
      }
      effect = effect.next;
    } while (effect !== firstEffect);
  }
}

触发时机在哪呢

在 commit 阶段的 layout 阶段

// commitRoot中设置优先级为离散事件优先级，也就是SyncLane
setCurrentUpdatePriority(DiscreteEventPriority);
// ⬇️ `layout` 阶段
commitLayoutEffects(finishedWork, root, lanes);
// ⬇️
commitLayoutEffectOnFiber(root, current, finishedWork, committedLanes);
// ⬇️
if (flags & Update) {
  // 同步去执行useLayoutEffect的回调
  // 这里传入的是HookLayout | HookHasEffect 刚好跟useLayoutEffect的effect.tag对应
  commitHookLayoutEffects(finishedWork, HookLayout | HookHasEffect);
}
// ⬇️
// 上文讲过就不重复了
commitHookEffectListMount(hookFlags, finishedWork);