react基礎(chǔ)知識總結(jié)

更新時間：2021年04月23日 09:38:10 作者：greet_eason

這篇文章主要介紹了react常用的基礎(chǔ)知識總結(jié)，幫助大家更好的理解和學習使用react框架，感興趣的朋友可以了解下

前言

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

開始

React 生命周期

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

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

借圖：

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

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

componentWillMount存在的問題

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

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

新的生命周期

static getDerivedStateFromProps

觸發(fā)時間(v16.4修正)：組件每次被rerender的時候，包括在組件構(gòu)建之后(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，無暇他顧（布局、動畫），造成掉幀、延遲響應(yīng)（甚至無響應(yīng)）等不佳體驗。fiber應(yīng)運而生。

Fiber 是對react reconciler（調(diào)和）核心算法的重構(gòu)。關(guān)鍵特性如下：

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

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

Fiber tree

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

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

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

Fiber reconciler

reconcile過程分為2個階段：

1.（可中斷）render/reconciliation 通過構(gòu)造workInProgress tree得出change

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

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

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

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

// 第2階段 commit
componentDidMount
componentDidUpdate
componentWillUnmount

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

fiber tree與workInProgress tree

雙緩沖技術(shù)：指的是workInProgress tree構(gòu)造完畢，得到的就是新的fiber tree，然后把current指針指向workInProgress tree，由于fiber與workInProgress互相持有引用，舊fiber就作為新fiber更新的預(yù)留空間，達到復用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;
}

這么做的好處：

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

fiber 中斷恢復

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

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

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

React setState

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

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

React 事件機制

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