Skip to content

Latest commit

 

History

History
35 lines (21 loc) · 1.68 KB

11.生命周期调用顺序.md

File metadata and controls

35 lines (21 loc) · 1.68 KB

生命周期调用顺序

课程地址 https://xiaochen1024.com/courseware/60b1b2f6cf10a4003b634718/60b1b367cf10a4003b634723

针对类组件,各阶段生命周期执行情况看下图

类组件

render阶段:

  • mount时:组件首先会经历constructor、getDerivedStateFromProps、componnetWillMount、render
  • update时:组件首先会经历componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、render
  • error时:会调用getDerivedStateFromError

commit阶段

  • mount时:组件会经历componnetDidMount
  • update时:组件会调用getSnapshotBeforeUpdate、componnetDidUpdate
  • unMount时:调用componnetWillUnmount
  • error时:调用componnetDidCatch

红色的部分不建议使用

在mount时和update时更新的具体顺序

在mount时和update时更新的具体顺序

类组件生命周期与 Fiber

类组件生命周期与Fiber

mount时:首先会按照深度优先的方式,依次构建wip Fiber节点然后切换成 current Fiber,在 render阶段 会依次执行各个节点的 constructor、getDerivedStateFromProps/componnetWillMount、render,在 commit阶段,也就是深度优先遍历向上冒泡的时候依次执行节点的componnetDidMount

update时:同样会深度优先构建wip Fiber树,在构建的过程中会diff子节点,在render阶段,如果返现有节点的变化,例如上图的c2,那就标记这个 节点Update Flag,然后执行getDerivedStateFromProps和render,在commit阶段会依次执行节点的 getSnapshotBeforeUpdate、componnetDidUpdate