useEffect 对比 componentDidMount

2,696 阅读1分钟

useEffect的执行是依赖于第二个参数[]它的依赖项的,因此我们需要回答2个问题:

  1. 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
  1. 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