react useEffect 原理杂谈

关于 react useEffect 的一些逻辑梳理

# 初始化阶段

1. 调用 mountEffect， 设置 fiberFlags
2. mountEffect 调用 mountWorkInProgrsss 把当前 effect hook 加到 currentlyRenderingFiber.memoizedState
3. 此时直到 commitRoot 阶段 effect.destory 还是 undefinded
4. commitRoot 异步调用刷新 PassiveEffect， 执行 useEffect 传递的回调， 同时把回调的返回值设置为 effect.destory

# 更新阶段

1. 调用 updateEffect
2. updateEffect 调用 updateWorkInProgress 把当前 effect hook 加到 currentlyRenderingFiber.memoizedState
3. 根据 prevDeps 跟 nextDeps， 判断是否需要给当前 fiber 打上 Flag 用于 commitRoot 阶段的处理
4. 此时直到 commitRoot 阶段 effect.destory 都还是上一次设置的 destory

# 总结

无论是初始化阶段还是更新阶段都需要使用 pushEffect 设置 currentlyRenderingFiber.updateQueue
最终 commit 阶段会根据 hook.tag 判断该 hook 的回调是否需要重新执行