写点什么

面试官: 说说你对 react 生命周期的理解

作者:全栈潇晨
  • 2021 年 12 月 13 日
  • 本文字数:1421 字

    阅读完需:约 5 分钟

面试官:说说你对 react 生命周期的理解

hello,这里是潇晨,今天我们来看下react生命周期在各个阶段是怎样执行的,在面试的过程中有没有遇到这个问题呢,大家也可以学习往期react源码体系文章哦,往期文章目录在文章结尾。


在之前的react源码介绍中,我们可以将应用的渲染过程分为mount阶段(应用首次渲染)和update阶段(应用状态更新),无论在mount阶段还是update阶段,都会经历两个子阶段,一个是render阶段,一个是commit阶段。


  • mount时:

  • render阶段会根据jsx对象构建新的workInProgressFiber树,不太了解Fiber双缓存的可以查看往期文章 Fiber架构,然后将相应的fiber节点标记为Placement,表示这个fiber节点需要被插入到dom树中,然后会这些带有副作用的fiber节点加入一条叫做Effect List的链表中。

  • commit阶段会遍历render阶段形成的Effect List,执行链表上相应fiber节点的副作用,比如Placement插入,或者执行PassiveuseEffect的副作用)。将这些副作用应用到真实节点上

  • update时:

  • render阶段会根据最新状态的jsx对象对比current Fiber,再构建新的workInProgressFiber树,这个对比的过程就是diff算法,diff算法又分成单节点的对比和多节点的对比,不太清楚的同学参见之前的文章 diff算法 ,对比的过程中同样会经历收集副作用的过程,也就是将对比出来的差异标记出来,加入Effect List中,这些对比出来的副作用例如:Placement(插入)、Update(更新)、Deletion(删除)等。

  • commit阶段同样会遍历Effect List,将这些fiber节点上的副作用应用到真实节点上


为什么要先讲rendermountupdate阶段的整体流程呢,这是因为react生命周期就是穿插在这些子阶段中执行的,来看一张图


  • render阶段:

  • mount时:组件首先会经历constructorgetDerivedStateFromPropscomponnetWillMountrender

  • update时:组件首先会经历componentWillReceivePropsgetDerivedStateFromPropsshouldComponentUpdaterender

  • error时:会调用getDerivedStateFromError

  • commit阶段

  • mount时:组件会经历componnetDidMount

  • update时:组件会调用getSnapshotBeforeUpdatecomponnetDidUpdate

  • unMount时:调用componnetWillUnmount

  • error时:调用componnetDidCatch


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


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




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

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

视频讲解(高效学习):点击学习

往期 react 源码解析文章:

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.总结&第一章的面试题解答

用户头像

全栈潇晨

关注

还未添加个人签名 2021.02.17 加入

还未添加个人简介

评论

发布
暂无评论
面试官:说说你对react生命周期的理解