useEffect的执行是依赖于第二个参数[]它的依赖项的,因此我们需要回答2个问题:
- useEffect第二个参数[]如何影响fn的执行?换句话说,它的第二个参数是如何影响fiber创建Passive Effect的?
- 不包含第二个参数,Mount时,Update时,每次render时都会创建一个Passive Effect
- 包含一个空数组[]作为依赖项,它会在mount时,创建Passive Effect
- 包含一个依赖项[dep],它会在mount时,dep依赖项变化时,创建Passive Effect
- 对于classComponent,会在mount时创建Placement的Effect
- render阶段到commit阶段,传递的时包含不同fiber节点的effect的链表
- commit阶段时将状态变化(Effect)渲染在视图中
- 渲染视图前,beforeMutation阶段
- 渲染视图中,mutation阶段,Placement会执行appendChild,DOM节点插入到视图中
- 渲染视图后,layout阶段,调用componentDidMount
- fn和componentDidMount的执行时机分别是什么?
- useEffect时commit完成后异步调用
- componentDidMount是commit阶段完成视图更新(mutation阶段)后,在layout阶段同步调用
- useLayoutEffect和componentDidMount调用时机一致,也是在layout阶段同步调用
所有与视图相关的操作都有对应的Effect:
- 插入Dom元素,Placemenet Effect
- 更新Dom元素,Update Effect
- 删除Dom元素,Deletion Effect
- 更新Ref属性,Ref Effect
- 包含useEffect回调执行,Passive Effect