第八章：useEffect源码解析

前言

这章开始介绍相关的生命周期，之前的hook都是和更新渲染、更新相关的；
useEffect解决函数组件中的生命周期，对应类组件中，componentDidMount、componentDidUpdate、componentWillUnmount等生命周期方法；
生命周期方法的设计旨在解决一系列与组件的创建、更新和销毁相关的问题，以确保开发者有足够的控制权来执行特定的逻辑。

源码解析

useEffect(setup, dependencies?)
// setup它应该返回一个 清理函数（cleanup）

mount阶段

按照常规流程，调用HooksDispatcherOnMountInDEV.useEffect的方法，前置check检查方法，核心代码mountEffect(setup,dependencies);
首先调用mountWorkInProgressHook方法，创建hook对象

const hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null
};
const Passive = 0b00000000000000100000000000;
const PassiveStatic = 0b00100000000000000000000000;
fiber.flags |= (Passive | PassiveStatic);

flags属性的作用？
在fiber上有一个flags属性，是一个标记，比如useEffect的回调setup函数不会立刻执行，在之后的某一个环节才会执行，就是通过这个标识的判断出是否执行的。

执行pushEffect(HasEffect | Passive, create, destroy, deps) 方法，pushEffect创建effect对象；

// pushEffect第一个参数为tag
const HasEffect = 0b0001;
const Passive =  0b1000;
const effect = {
    tag: tag, // 关于执行任务的时机判断
    create: setup,
    destroy: undefined,
    deps: dependencies,
    next: null
};
fiber.updateQueue = {
  lastEffect: effect,
  stores: null
}  

可以看出pushEffct函数作用是为了往fiber.updateQueue.lastEffec的环状链表上创建effct对象，保存effct上的关键信息；

hook.memoizedState = effect;

没有任何值返回；

const ChildDeletion = 0b00000000000000000000010000;
const PassiveMask = Passive | ChildDeletion;

在commitRoot阶段，在挂载真实dom之前判断子flags或者当前flags (flags & PassiveMask) != 0 如果成立，会往任务队列中push一个任务,当前任务队列执行完之后在下一个任务队列执行flushPassiveEffects函数，主要执行useEffect的回调函数setup和清理函数（cleanup）；

// 执行所有的cleanup方法， 会遍历所有的fiber树
commitPassiveUnmountEffects(root.current);
// 执行所有的setup方法， 会遍历所有的fiber树
commitPassiveMountEffects(root, root.current, lanes, transitions);

第一次遍历fiber树，将要执行cleanup函数，如果 (fiber.flags & Passive) != 0，找到当前fiber.updateQueue.lastEffect , 找到第一个effect，开始遍历effect队列，如果 HasEffect ｜Passive 属于effect.tag的子集，并且effect.destroy不为空，执行effect.destroy方法；

(HasEffect ｜Passive) & effect.tag === (HasEffect ｜Passive)

第二次遍历fiber树，将要执行setup函数，如果 (fiber.flags & Passive) != 0，找到当前fiber.updateQueue.lastEffect , 找到第一个effect，开始遍历effect队列，如果 HasEffect ｜Passive 属于effect.tag的子集，并且执行effect.create函数，effect.destroy = setup() 此时会执行setup内部的方法；

update阶段

新建fiber树的时候，

const StaticMask = LayoutStatic | PassiveStatic | RefStatic;
fiber.flags &= StaticMask

调用HooksDispatcherOnUpdateInDEV.useEffect方法，调用check方法，核心方法updateEffectImpl(Passive, Passive, create, deps)， 第一个参数是flags，第二个参数是tag;
调用updateWorkInProgressHook方法，更新mount阶段创建的hook对象；当前deps和之前的effect.deps进行比较，如果相同，

hook.memoizedState = pushEffect(Passive, create, destroy, deps)

参考上面的pushEffect方法，
如果不同，更新flags，更新memoizedState值； 如果依赖项为undefined或者null，那么会判断成更新，走以下链路；

fiber.flags |= Passive;
hook.memoizedState = pushEffect(HasEffect | Passive, create, destroy, nextDeps);

在commitRoot方法中，如果 (fiber.flags & Passive) != 0 成立，会往任务队列中添加任务，在宏任务/微任务中执行flushPassiveEffects方法；

同时在当前任务队列中判断当前的更新lane是否为1(先理解成点击事件，后面会讲lane模型的时候会细说)，如果通过点击事件触发的更新渲染，在当前任务队列的最后时机，如果已经执行了，会在下一个任务队列中就执行flushPassiveEffects方法就会直接return；

执行setup和cleanup相关的方法；判断方法和mount的执行一致；
如果依赖没有变化, effect.tag = Passive 判断条件 (HasEffect ｜Passive) & effect.tag === (HasEffect ｜Passive) 不成立，就不会执行；
依赖有变化，effect.tag = HasEffect | Passive 判断条件成立，就会执行setup函数。

总结

useEffect可以模拟生命周期，在mount阶段一定会执行，在更新阶段如果依赖项有变化，那么更新就会执行，而在执行setup函数前，会调用所有fiber上的cleanup函数；
但是useEffct并不是模拟componentDidMount、componentDidUpdate、componentWillUnmount这些方法，useEffect相关的执行时机会晚于以上生命周期函数，事实上，上面的生命周期对应的是useLayoutEffct的执行时机。
useEfect执行时机在当前任务队列中最后，或者在下一个任务队列，是所有生命周期最晚的。