课程地址 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时更新的具体顺序
类组件生命周期与 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