useEffect和useLayoutEffect的源码解读

useEffect 和 useLayoutEffect 的源码解读

useEffect

文件在 packages/react-reconciler/src/ReactFiberHooks.old.js

源码解读

根据上一篇 useState 的经验可知&＃xff0c;useEffect 在 mount 的时候&＃xff0c;会调用 mountEffectImpl 函数&＃xff0c;在 update 的时候&＃xff0c;会调用 updateEffectImpl 函数

mountEffectImpl

1. 首先调用 mountWorkInProgressHook 获取当前 hook对应的数据

2. 获取 effect 对应的 依赖项

3. 为当前 fiber 的 flags 增加上 该hook的 fiberFlags&＃xff08;这个 fiberFlags 对于 useEffect 和 useLauoutEffect 是不同的&＃xff0c;所以用于区分这两者&＃xff09;

4. 将pushEffect函数返回的 新的 effect 赋值给 hook.memoizedState

   (注意&＃xff1a;对于 useState 来说&＃xff0c;memoizedState 保存的是状态&＃xff0c;而 useEffect 来说&＃xff0c;memoizedState 实际上是保存的 当前hook上最后一个 effect 数据)

pushEffect

判断 componentUpdateQueue 是否存在&＃xff0c;若存在&＃xff0c;就为这个环状链表附加一个 effect&＃xff1b;若不存在&＃xff0c;就新建一个环状链表

1. 首先会创建一个变量 componentUpdateQueue&＃xff0c;并被赋值给 currentlyRenderingFiber.updateQueue

   updateQueue 的数据结构是&＃xff1a;

   

2. 若 componentUpdateQueue 不存在&＃xff0c;把创建的数据结构 effect 挂载到 componentUpdateQueue.lastEffect 上&＃xff0c;并且effect 与自己形成一条环状链表&＃xff08;与 update 的时候&＃xff0c;数据结构类似&＃xff09;

3. effect数据结构&＃xff1a;&＃xff08;结合 useEffect 的API&＃xff0c;判断以下&＃xff09;

   
   
   1. create &＃xff1a;是 useEfect 的回调函数
   2. destroy&＃xff1a;useEfect 的回调函数的返回值的 那个函数

4. 若 componentUpdateQueue 存在&＃xff0c;则在环状链表后面新加上一个 effect

5. 最终返回本次创建的 effect

updateEffectImpl

useEffect 在 mount 和 update 阶段有什么区别吗&＃xff1f;

在 update时&＃xff0c;前一个 useEffect 已经被执行过了&＃xff0c;所以说前一个 useEffect 可能存在他的 destory 函数

1. 从currentHook.memoizedState中取出 上一次 更新的 effect&＃xff0c;即 prevEffect
2. 再从 prevEffect 中取出 destory 函数&＃xff08;注意&＃xff1a;需要上一次 effect 中的 create 执行完之后 &＃xff0c;才会有 上一次 effect 的 destory 函数&＃xff09;
3. 判断 上一次的 deps 和 这一次的 deps 比较是否相等&＃xff1a;不论是否相等&＃xff0c;都会pushEffect&＃xff0c;只是区别在于一个 hookHasEffect 参数。若相等&＃xff0c;在 pushEffect 函数的第一个参数是直接传一个 hookFlags 参数&＃xff0c;若不相等&＃xff0c;是传的 HookHasEffect | hookFlags

疑惑&＃xff1a;

为什么要在 deps 没有改变的情况下&＃xff0c;还要 pushEffect 呢&＃xff1f;

解答&＃xff1a;

在 函数组件中&＃xff0c;所有 hook 是保存在 fiber.memoizedState 上&＃xff0c;并且会形成一个单向的环状链表&＃xff0c;这些 hooks 的调用顺序都是不变的&＃xff0c;同样&＃xff0c;对于 useEffect 和 useLayoutEffect&＃xff0c;也是保存在一条单向链表上的&＃xff0c;顺序也不能改变。所以即使本次更新 deps 没有改变&＃xff0c;不会调用 hooks 对应的回调函数&＃xff0c;我们也需要 pushEffect&＃xff0c;确保hooks的环状链表在整个更新中都是能对应的上的

useLayOutEffect

源码解读

在 mount 阶段时&＃xff0c;调用 mountLayoutEffect 函数&＃xff0c;在 update 阶段时&＃xff0c;调用 updateLayoutEffect

mountLayoutEffect

可以看出 mountLayoutEffect 最终也是调用 mountEffectImpl 函数&＃xff0c;只不过 传入的第二个参数是 HookLayout

updateLayoutEffect

和 mountLayoutEffect 同理&＃xff0c;也是调用的 updateEffectImpl&＃xff0c; 传入的第二个参数是 HookLayout

总结

所以 useEffect 和 useLayoutEffect 他的整体运行流程基本一致&＃xff0c;唯一不同的是 在 commit 阶段会在不同的时机 调用