面試官:說說你對react生命周期的理解
hello派近，這里是瀟晨，今天我們來看下react生命周期在各個階段是怎樣執(zhí)行的洁桌，在面試的過程中有沒有遇到這個問題呢渴丸，大家也可以學習往期react源碼體系文章哦，往期文章目錄在文章結(jié)尾另凌。
在之前的react源碼介紹中谱轨，我們可以將應用的渲染過程分為mount階段（應用首次渲染）和update階段（應用狀態(tài)更新），無論在mount階段還是update階段吠谢，都會經(jīng)歷兩個子階段土童，一個是render階段，一個是commit階段工坊。
-
mount時：- 在
render階段會根據(jù)jsx對象構(gòu)建新的workInProgressFiber樹献汗，不太了解Fiber雙緩存的可以查看往期文章 Fiber架構(gòu)，然后將相應的fiber節(jié)點標記為Placement王污，表示這個fiber節(jié)點需要被插入到dom樹中罢吃，然后會這些帶有副作用的fiber節(jié)點加入一條叫做Effect List的鏈表中。 - 在
commit階段會遍歷render階段形成的Effect List昭齐，執(zhí)行鏈表上相應fiber節(jié)點的副作用尿招，比如Placement插入，或者執(zhí)行Passive（useEffect的副作用）阱驾。將這些副作用應用到真實節(jié)點上
- 在
-
update時：- 在
render階段會根據(jù)最新狀態(tài)的jsx對象對比current Fiber就谜，再構(gòu)建新的workInProgressFiber樹，這個對比的過程就是diff算法里覆，diff算法又分成單節(jié)點的對比和多節(jié)點的對比吁伺，不太清楚的同學參見之前的文章 diff算法 ，對比的過程中同樣會經(jīng)歷收集副作用的過程租谈，也就是將對比出來的差異標記出來篮奄，加入Effect List中，這些對比出來的副作用例如：Placement（插入）割去、Update(更新)窟却、Deletion（刪除）等。 - 在
commit階段同樣會遍歷Effect List呻逆，將這些fiber節(jié)點上的副作用應用到真實節(jié)點上
- 在
為什么要先講render在mount和update階段的整體流程呢夸赫，這是因為react生命周期就是穿插在這些子階段中執(zhí)行的，來看一張圖
-
render階段：-
mount時：組件首先會經(jīng)歷constructor咖城、getDerivedStateFromProps茬腿、componnetWillMount呼奢、render -
update時：組件首先會經(jīng)歷componentWillReceiveProps、getDerivedStateFromProps切平、shouldComponentUpdate握础、render -
error時：會調(diào)用getDerivedStateFromError
-
-
commit階段-
mount時：組件會經(jīng)歷componnetDidMount -
update時：組件會調(diào)用getSnapshotBeforeUpdate、componnetDidUpdate -
unMount時：調(diào)用componnetWillUnmount -
error時：調(diào)用componnetDidCatch
-
其中紅色的部分不建議使用悴品，需要注意的是commit階段生命周期在mutation各個子階段的執(zhí)行順序禀综，可以復習上一章
接下來根據(jù)一個例子來講解在mount時和update時更新的具體順序：
react源碼11.2
react源碼11.3
-
mount時：首先會按照深度優(yōu)先的方式，依次構(gòu)建wip Fiber節(jié)點然后切換成current Fiber苔严，在render階段會依次執(zhí)行各個節(jié)點的constructor定枷、getDerivedStateFromProps/componnetWillMount、render届氢，在commit階段欠窒，也就是深度優(yōu)先遍歷向上冒泡的時候依次執(zhí)行節(jié)點的componnetDidMount -
update時：同樣會深度優(yōu)先構(gòu)建wip Fiber樹，在構(gòu)建的過程中會diff子節(jié)點退子，在render階段贱迟，如果返現(xiàn)有節(jié)點的變化，例如上圖的c2絮供，那就標記這個節(jié)點Update Flag，然后執(zhí)行getDerivedStateFromProps和render茶敏，在commit階段會依次執(zhí)行節(jié)點的getSnapshotBeforeUpdate壤靶、componnetDidUpdate
