写点什么

react 源码解析 11. 生命周期调用顺序

用户头像
全栈潇晨
关注
发布于: 2021 年 06 月 11 日

react 源码解析 11.生命周期调用顺序

视频课程(高效学习):进入课程

课程目录:

1.开篇介绍和面试题


2.react的设计理念


3.react源码架构


4.源码目录结构和调试


5.jsx&核心api


6.legacy和concurrent模式入口函数


7.Fiber架构


8.render阶段


9.diff算法


10.commit阶段


11.生命周期


12.状态更新流程


13.hooks源码


14.手写hooks


15.scheduler&Lane


16.concurrent模式


17.context


18事件系统


19.手写迷你版react


20.总结&第一章的面试题解答


21.demo

各阶段生命周期执行情况

函数组件 hooks 的周期会在 hooks 章节讲解,这一章的使命周期主要针对类组件,各阶段生命周期执行情况看下图:



  • render 阶段:

  • mount 时:组件首先会经历 constructor、getDerivedStateFromProps、componnetWillMount、render

  • update 时:组件首先会经历 componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、render

  • error 时:会调用 getDerivedStateFromError

  • commit 阶段

  • mount 时:组件会经历 componnetDidMount

  • update 时:组件会调用 getSnapshotBeforeUpdate、componnetDidUpdate

  • unMount 时:调用 componnetWillUnmount

  • error 时:调用 componnetDidCatch


其中红色的部分不建议使用,需要注意的是 commit 阶段生命周期在 mutation 各个子阶段的执行顺序,可以复习上一章


接下来根据一个例子来讲解在 mount 时和 update 时更新的具体顺序:




  • 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

发布于: 2021 年 06 月 11 日阅读数: 8
用户头像

全栈潇晨

关注

还未添加个人签名 2021.02.17 加入

还未添加个人简介

评论

发布
暂无评论
react源码解析11.生命周期调用顺序