前言

最近在準備面試。復習了一些react的知識點，特此總結。

開始

React 生命周期

react 16以前的生命周期是這樣的

組件在首次渲染時會被實例化，然后調用實例上面的componentWillMount，render和componentDidMount函數(shù)。組件在更新渲染時可以調用componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，render和componentDidUpdate函數(shù)。組件在卸載時可以調用componentWillUnmount函數(shù)。

借圖：

從 React v16.3 開始，React 建議使用getDerivedStateFromProps和getSnapshotBeforeUpdate兩個生命周期函數(shù)替代 componentWillMount，componentWillReceiveProps和componentWillUpdate三個生命周期函數(shù)。這里需要注意的是 新增的兩個生命周期 函數(shù)和原有的三個生命周期函數(shù)必須分開使用，不能混合使用

目前的生命周期(借圖)：

componentWillMount存在的問題

有人認為在componentWillMount中可以提前進行異步請求,避免白屏。但是react在調用render渲染頁面的時候，render并不會等待異步請求結束，再獲取數(shù)據(jù)渲染。這么寫是有潛在隱患的。

而在react fiber之后 可能在一次渲染中多次調用。原因是：react fiber技術使用增量渲染來解決掉幀的問題，通過requestIdleCallback調度執(zhí)行每個任務單元，可以中斷和恢復，生命周期一旦中斷，恢復之后會重新跑一次之前的生命周期

新的生命周期

static getDerivedStateFromProps

• 觸發(fā)時間(v16.4修正)：組件每次被rerender的時候，包括在組件構建之后(render之前最后執(zhí)行)，每次獲取新的props或state之后。在v16.3版本時，組件state的更新不會觸發(fā)該生命周期
• 每次接收新的props之后都會返回一個對象作為新的state，返回null則說明不需要更新state
• 配合componentDidUpdate，可以覆蓋componentWillReceiveProps的所有用法
  

getSnapshotBeforeUpdate

觸發(fā)時間: update發(fā)生的時候，在render之后，在組件dom渲染之前。
返回一個值，作為componentDidUpdate的第三個參數(shù)。
配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法。

React Fiber

由于React渲染/更新過程一旦開始無法中斷，持續(xù)占用主線程，主線程忙于執(zhí)行JS，無暇他顧（布局、動畫），造成掉幀、延遲響應（甚至無響應）等不佳體驗。fiber應運而生。

Fiber 是對react reconciler（調和） 核心算法的重構。關鍵特性如下：

• 增量渲染（把渲染任務拆分成塊，勻到多幀）
• 更新時能夠暫停，終止，復用渲染任務
• 給不同類型的更新賦予優(yōu)先級
• 并發(fā)方面新的基礎能力
  

增量渲染用來解決掉幀的問題，渲染任務拆分之后，每次只做一小段，做完一段就把時間控制權交還給主線程，而不像之前長時間占用。

Fiber tree

• Fiber之前的reconciler（被稱為Stack reconciler）自頂向下的遞歸mount/update，無法中斷（持續(xù)占用主線程），這樣主線程上的布局、動畫等周期性任務以及交互響應就無法立即得到處理，影響體驗。
• Fiber解決這個問題的思路是把渲染/更新過程（遞歸diff）拆分成一系列小任務，每次檢查樹上的一小部分，做完看是否還有時間繼續(xù)下一個任務，有的話繼續(xù)，沒有的話把自己掛起，主線程不忙的時候再繼續(xù)。

fiber樹其實是一個單鏈表結構，child指向第一個子節(jié)點，return指向父節(jié)點，sibling指向下個兄弟節(jié)點。結構如下：

// fiber tree節(jié)點結構
{
    stateNode,
    child,
    return,
    sibling,
    ...
}

Fiber reconciler

reconcile過程分為2個階段：

1.（可中斷）render/reconciliation 通過構造workInProgress tree得出change

2.（不可中斷）commit 應用這些DOM change（更新DOM樹、調用組件生命周期函數(shù)以及更新ref等內部狀態(tài)）

構建workInProgress tree的過程就是diff的過程，通過requestIdleCallback來調度執(zhí)行一組任務，每完成一個任務后回來看看有沒有插隊的（更緊急的），每完成一組任務，把時間控制權交還給主線程，直到下一次requestIdleCallback回調再繼續(xù)構建workInProgress tree

生命周期也被分成了兩個階段：

// 第1階段 render/reconciliation
componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate

// 第2階段 commit
componentDidMount
componentDidUpdate
componentWillUnmount

第1階段的生命周期函數(shù)可能會被多次調用，默認以low優(yōu)先級執(zhí)行，被高優(yōu)先級任務打斷的話，稍后重新執(zhí)行。

fiber tree與workInProgress tree

雙緩沖技術：指的是workInProgress tree構造完畢，得到的就是新的fiber tree，然后把current指針指向workInProgress tree，由于fiber與workInProgress互相持有引用，舊fiber就作為新fiber更新的預留空間，達到復用fiber實例的目的。

每個fiber上都有個alternate屬性，也指向一個fiber，創(chuàng)建workInProgress節(jié)點時優(yōu)先取alternate，沒有的話就創(chuàng)建一個

let workInProgress = current.alternate;
if (workInProgress === null) {
  //...
  workInProgress.alternate = current;
  current.alternate = workInProgress;
} else {
  // We already have an alternate.
  // Reset the effect tag.
  workInProgress.effectTag = NoEffect;

  // The effect list is no longer valid.
  workInProgress.nextEffect = null;
  workInProgress.firstEffect = null;
  workInProgress.lastEffect = null;
}

這么做的好處：

• 能夠復用內部對象（fiber）
• 節(jié)省內存分配、GC的時間開銷
  

fiber 中斷 恢復

中斷：檢查當前正在處理的工作單元，保存當前成果（firstEffect, lastEffect），修改tag標記一下，迅速收尾并再開一個requestIdleCallback，下次有機會再做

斷點恢復：下次再處理到該工作單元時，看tag是被打斷的任務，接著做未完成的部分或者重做

P.S.無論是時間用盡“自然”中斷，還是被高優(yōu)任務粗暴打斷，對中斷機制來說都一樣。

React setState

在代碼中調用setState函數(shù)之后，React 會將傳入的參數(shù)對象與組件當前的狀態(tài)合并，然后觸發(fā)所謂的調和過程（Reconciliation）。經過調和過程，React 會以相對高效的方式根據(jù)新的狀態(tài)構建 React 元素樹并且著手重新渲染整個UI界面。在 React 得到元素樹之后，React 會自動計算出新的樹與老樹的節(jié)點差異，然后根據(jù)差異對界面進行最小化重渲染。在差異計算算法中，React 能夠相對精確地知道哪些位置發(fā)生了改變以及應該如何改變，這就保證了按需更新，而不是全部重新渲染。

setState調用時有時是同步的（settimeout,自定義dom事件），有時是異步的（普通調用）

React 事件機制

React事件是通過事件代理，在最外層的 document上對事件進行統(tǒng)一分發(fā)，并沒有綁定在真實的 Dom節(jié)點上。 而且react內部對原生的Event對象進行了包裹處理。具有與瀏覽器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。

以上就是react基礎知識總結的詳細內容，更多關于react基礎知識的資料請關注腳本之家其它相關文章！

最新評論