前言
这章开始介绍相关的生命周期,之前的hook都是和更新渲染、更新相关的;
useEffect 解决函数组件中的生命周期,对应类组件中,componentDidMount
、componentDidUpdate
、componentWillUnmount
等生命周期方法;
生命周期方法的设计旨在解决一系列与组件的创建、更新和销毁相关的问题,以确保开发者有足够的控制权来执行特定的逻辑。
源码解析
js
useEffect(setup, dependencies?)
// setup它应该返回一个 清理函数(cleanup)
mount阶段
按照常规流程,调用HooksDispatcherOnMountInDEV.useEffect 的方法,前置check检查方法,核心代码mountEffect(setup,dependencies) ;
首先调用mountWorkInProgressHook方法,创建hook对象
js
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对象;
js
// 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上的关键信息;
js
hook.memoizedState = effect;
没有任何值返回;
js
const ChildDeletion = 0b00000000000000000000010000;
const PassiveMask = Passive | ChildDeletion;
在commitRoot阶段,在挂载真实dom之前判断子flags或者当前flags (flags & PassiveMask) != 0 如果成立,会往任务队列中push一个任务,当前任务队列执行完之后在下一个任务队列执行flushPassiveEffects 函数,主要执行useEffect的回调函数setup和清理函数(cleanup);
第一次遍历fiber树,将要执行cleanup函数,如果 (fiber.flags & Passive) != 0 ,找到当前fiber.updateQueue.lastEffect , 找到第一个effect,开始遍历effect队列,如果 HasEffect |Passive 属于effect.tag的子集,并且effect.destroy不为空,执行effect.destroy方法;
js
(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树的时候,
js
const StaticMask = LayoutStatic | PassiveStatic | RefStatic;
fiber.flags &= StaticMask
调用HooksDispatcherOnUpdateInDEV.useSyncExternalStore 方法,调用check方法,核心方法updateEffectImpl(Passive, Passive, create, deps) , 第一个参数是flags,第二个参数是tag;
调用updateWorkInProgressHook方法,更新mount阶段创建的hook对象;当前deps和之前的effect.deps进行比较,如果相同,
js
hook.memoizedState = pushEffect(Passive, create, destroy, deps)
参考上面的pushEffect方法,
如果不同,更新flags,更新memoizedState值; 如果依赖项为undefined或者null,那么会判断成更新,走以下链路;
js
fiber.flags |= Passive;
hook.memoizedState = pushEffect(HasEffect | Passive, create, destroy, nextDeps);
判断当前的更新lane是否为1(先理解成点击事件,后面会讲lane模型的时候会细说),如果通过点击事件触发的更新渲染,在当前任务队列的最后时机,会执行setup和cleanup相关的方法;
总结
useEffect 可以模拟生命周期,在mount阶段一定会执行,在更新阶段如果依赖项有变化,那么更新就会执行,而在执行setup函数前,会调用所有fiber上的cleanup函数;
但是useEffct并不是模拟componentDidMount
、componentDidUpdate
、componentWillUnmount
这些方法,useEffect相关的执行时机会晚于以上生命周期函数,事实上,上面的生命周期对应的是useLayoutEffct的执行时机。
useEfect执行时机在当前任务队列中最后,或者在下一个任务队列,是所有生命周期最晚的。