面試小抄 react

其中標紅的（ componentwillmount、 componentwillreceiveprops、 componentwillupdate ）是 react 16.3 版本要移除的生命週期，移除原因：react 打算在17版本中，新增 async rendering ， react 將乙個更新過程分為 render 前後兩個階段，render 前是可以被打斷（比如有緊急任務），當生命週期被打斷後，再次執行，並不會從斷點繼續執行，是重新執行的，所以這些生命週期就可能會執行多次。

同時為了彌補失去這三個生命，react 新增了兩個生命週期： static getderivedstatefromprops、 getsnapshotbeforeupdate

getderivedstatefromprops 會在呼叫 render 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫。它應返回乙個物件來更新 state，如果返回 null 則不更新任何內容。

此方法適用於罕見的用例，即 state 的值在任何時候都取決於 props。

static getderivedstatefromprops(nextprops, prevstate) 
複製**

getsnapshotbeforeupdate() 在最近一次渲染輸出（提交到 dom 節點）之前呼叫。它使得元件能在發生更改之前從 dom 中捕獲一些資訊（例如，滾動位置）。此生命週期的任何返回值將作為引數傳遞給 componentdidupdate()。

getsnapshotbeforeupdate 返回的值會做為第三個引數傳遞給 componentdidupdate。

getsnapshotbeforeupdate(prevprops, prevstate) 
componentdidupdate(prevprops, prevstate, snapshot) 
複製**

這是乙個元件的子樹。每個節點中，scu 代表 shouldcomponentupdate 返回的值，而 vdomeq 代表返回的 react 元素是否相同。最後，圓圈的顏色代表了該元件是否需要更新。

react 父元件觸發更新時，它的所有子元件都會觸發更新（即使 props 和 state ）並沒有改變，這樣時候我們在子元件中新增 shouldcomponentupdate 生命週期，判斷狀態是否變更，如果沒有變更返回 false , 這個子元件就不會重新 render。

react.purecomponent 是 react 自動幫我們在 shouldcomponentupdate 做了一層淺比較。

if (this._compositetype === compositetypes.pureclass) 
複製**

react.memo 是乙個高階元件，類似於 react.purecomponent，不同於 react.memo 是 function 元件，react.purecomponent 是 class 元件。

const mycomponent = react.memo(function
mycomponent(props) );
複製**

key 幫助 react 識別哪些元素改變了，比如被新增或刪除。當子元素擁有 key 時，react 使用 key 來匹配原有樹上的子元素以及最新樹上的子元素。正確的使用 key 可以使 react 的更新開銷變小。


key="2015">dukeli>
key="2016">villanovali>
ul>
key="2014">connecticutli>
key="2015">dukeli>
key="2016">villanovali>
ul>
複製**

缺點：

概念：可以理解為元件工廠，傳入原始元件，新增功能，返回新的元件。

缺點：靜態構建：工廠返回的新元件，不會立即執行，即 hoc 工廠函式裡定義的生命週期函式只有新組建渲染時才會執行。

概念：render props 就是乙個 render 函式作為 props 傳遞給了父元件，使得父元件知道如何渲染子元件。

優點：缺點：

概念：hooks 遵循函式式程式設計的理念，主旨是在函式元件中引入類元件中的狀態和生命週期，並且這些狀態和生命週期函式也可以被抽離，實現復用的同時，減少函式元件的複雜性和易用性。

hooks api：

乙個簡單的 custom hooks：

import  from
'react';
function
usetitle(title), [title]);
}複製**

虛擬 dom：react 將 dom 抽象成乙個物件樹，通過對比新舊兩個樹的區別（diff 演算法），然後將更新部分渲染出來。

diff 演算法基於兩個策略：

在 react 中，樹的比對非常簡單，react 只會對兩棵樹進行逐層比較，即比較處於同一層級的節點。

節點比較分成兩種情況：（1）節點型別不同，（2）節點型別相同，屬性不同。

情況（1）：

// dom diff 操作
c.destroy();
d = new d();
複製**

情況（2）：

//變更錢
fontsize: '16px'}} >div>
//變更後
color: 'red'}} >
//執行操作
=> removestyle fontsize
=> addstyle color 'red'
複製**

當列表中插入 f 節點，如下圖：

這個時候就會有兩種情況：（1）節點沒有表示唯一 key ，（2）節點表示了唯一 key

情況（1）結果如下圖：

//執行過程 c unmount d unmount e unmount f mount c mount d mount e mount

複製**

情況（2）結果如下圖：

//執行過程 f mount

複製**

如果在元件的渲染或生命週期方法中引發錯誤，整個元件結構就會從根節點中解除安裝，而不影響其他元件的渲染，可以利用 error boundaries 進行錯誤的優化處理。

class
errorboundary
extends
react.component
;  }
static getderivedstatefromerror(error) ;
}  componentdidcatch(error, info) 
render() 
return
this.props.children; 
}}複製**

react 支援將組建掛在到其他 dom 節點，事件還是按元件原有位置冒泡。

render() 
複製**

fiber 是對 react 核心演算法 reconciliation 的更新實現，將原本的同步更新分成兩個階段。階段1（reconciliation phase）的任務是片段化執行的，每個片段執行完成之後，就會把控制權重新交給 react 排程模組，如果有更高優先順序的任務就去處理，而低優先順序更新任務所做的工作則會完全作廢，然後等待機會重頭再來，如果沒有就執行下乙個片段。階段2（commit phase）是同步執行的，reactdom 會根據階段1計算出來的 effect-list 來更新 dom 。

階段1涉及的生命週期（可能會執行多次）：componentwillmount、 componentwillreceiveprops、 shouldcomponentupdate、 componentwillupdate

階段2涉及的生命週期：componentdidmount、 componentdidupdate、 componentwillunmount

全新的 context api 可以很容易實現祖先節點和子節點通訊，並且沒有***。

const themecontext = react.createcontext('light');
class
themeprovider
extends
react.component
;  render() 
);}}
class themedbutton extends react.component 
);}}
複製**

react.lazy() 提供了動態 import 元件的能力，實現**分割。

suspense 作用是在等待元件時 suspend（暫停）渲染，並顯示載入標識。

import react,  from
'react';
const othercomponent = lazy(() =>
import('./othercomponent'));
function
mycomponent() >
suspense>
);}複製**

面試小抄 react

word 設定小抄格式

紅黑樹小抄

hdfs命令使用小抄

面試小抄 react

word 設定小抄格式

紅黑樹小抄

hdfs命令使用小抄

相關推薦