1. 簡述 React 16 版本中初始渲染的流程
React 16渲染過程可以分為 Scheduler、Reconciliation八回、Commit 這三個階段
image.png
- Scheduer （調(diào)度層）:流程主要是創(chuàng)建更新
- render （協(xié)調(diào)層）:此階段負責為每一個react元素創(chuàng)建 Fiber 數(shù)據(jù)結構并為 Fiber 節(jié)點打標記effectTag屬性毫深，存儲當前 Fiber 節(jié)點要進行的 DOM 操作 ,然后在render 結束后吩坝， fiber 會被保存到 fiberroot 中
- commit（渲染層）:先獲取到render 的結果， 根據(jù) fiber 中的 effectTag 屬性進行相應的 DOM 操作哑蔫，此階段是不可以被打斷的
2.為什么 React 16 版本中 render 階段放棄了使用遞歸
- 遞歸無法中斷钉寝，執(zhí)行重任務耗時長。
- JavaScript 是單線程闸迷，無法同時執(zhí)行其他任務嵌纲，當VirtualDOM層次比較深，將會長期占用主線程腥沽，當用戶有其他操作逮走，就會導致任務延遲頁面卡頓，用戶體驗差巡球。
3.簡述 React 16 版本中 commit 階段的三個子階段分別做了什么事情
-
before mutation階段（執(zhí)行DOM操作前）
- 主要調(diào)用類組件生命周期函數(shù)getSnapshotBeforeUpdate,并且把舊的props和舊的states傳遞進去
-
mutation階段（執(zhí)行DOM操作）
- 獲取對象得effects言沐，根據(jù)不同的 effectTag 執(zhí)行不同的操作
- 插入節(jié)點：commitPlacement
- 更新節(jié)點：commitWork
- 刪除節(jié)點：commitDeletion
- 獲取對象得effects言沐，根據(jù)不同的 effectTag 執(zhí)行不同的操作
-
layout階段（執(zhí)行DOM操作后）
- 調(diào)用類組件的生命周期函數(shù)
- 初次渲染階段調(diào)用componentDidMount生命周期函數(shù)
- 更新階段調(diào)用componentDidUpdate生命周期函數(shù)
- 執(zhí)行渲染完成之后的回調(diào)函數(shù)，也就是render函數(shù)的第三個參數(shù)酣栈，并且更改this指向险胰，指向render方法的第一個參數(shù)
- 調(diào)用函數(shù)組件的鉤子函數(shù)
- firstEffect：指向第一個更新的節(jié)點
- nextEffect：指向下一個更新的節(jié)點
- 調(diào)用類組件的生命周期函數(shù)
4.簡述 workInProgress Fiber 樹存在的意義是什么
- React 使用雙緩存技術完成 Fiber 樹的構建與替換，實現(xiàn)DOM對象的快速更新矿筝。
- 在 React 中最多會同時存在兩棵 Fiber 樹起便，當前在屏幕中顯示的內(nèi)容對應的 Fiber 樹叫做 current Fiber 樹，當發(fā)生更新時，React 會在內(nèi)存中重新構建一顆新的 Fiber 樹榆综，這顆正在構建的 Fiber 樹叫做 workInProgress Fiber 樹妙痹。在雙緩存技術中，workInProgress Fiber 樹就是即將要顯示在頁面中的 Fiber 樹鼻疮，當這顆 Fiber 樹構建完成后怯伊，React 會使用它直接替換 current Fiber 樹達到快速更新 DOM 的目的，因為 workInProgress Fiber 樹是在內(nèi)存中構建的所以構建它的速度是非撑泄担快的耿芹。一旦 workInProgress Fiber 樹在屏幕上呈現(xiàn)，它就會變成 current Fiber 樹挪哄。
- 在 current Fiber 節(jié)點對象中有一個 alternate 屬性指向?qū)?workInProgress Fiber 節(jié)點對象吧秕，在 workInProgress Fiber 節(jié)點中有一個 alternate 屬性也指向?qū)?current Fiber 節(jié)點對象。
