前提

• 针对React 16.8.3版本
• 仅分析useEffect，因为其他并没有那么重要和复杂

重点

• mount和update阶段执行的useEffect函数不是同一个函数
• hook跟之前的setState共用fiber.effectTag和fiber.updateQueue
• hook effect链表跟更新完fiber树的结果effect链表是完全不相关的东西

问答

如何和在哪里实现mount和update区分调用？

• 在renderWithHooks函数的：nextCurrentHook === null ? HooksDispatcherOnMount : HooksDispatcherOnUpdate;

useEffect的执行流程是什么？

• mountEffectImpl, updateEffectImpl在初始化时注入hook的tag到全局变量sideEffectTag
• 上面之后会往fiber.updateQueue注入effect的update，也就是包括你传给useEffect函数
• 然后在update阶段，renderWithHooks会往所有函数的fiber.effectTag注入sideEffectTag
• commit阶段，commitPassiveEffects函数effect.effectTag & Passive判断就会为true，就会执行和合并含有hook的fiber.updateQueue，也就是你传给useEffect的函数