前言

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

開始

React 生命周期

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

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

借圖：

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

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

componentWillMount存在的問題

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

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

新的生命周期

static getDerivedStateFromProps

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

getSnapshotBeforeUpdate

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

React Fiber

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

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

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

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

Fiber tree

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

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

Fiber reconciler

reconcile過程分為2個階段：

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

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

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

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

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

fiber tree與workInProgress tree

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

每個fiber上都有個alternate屬性，也指向一個fiber，創建workInProgress節點時優先取alternate，沒有的話就創建一個

這么做的好處：

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

fiber 中斷 恢復

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

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

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

React setState

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

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

React 事件機制

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

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

原文鏈接：https://juejin.cn/post/6953926016083427335