經典 必考 React高頻面試題

2021-10-05 19:41:44 字數 2855 閱讀 5983

初始化階段

constructor 建構函式

getdefaultprops props預設值

getinitialstate state預設值

掛載階段

componentwillmount 元件初始化渲染前呼叫

render 元件渲染

componentdidmount元件掛載到 dom後呼叫

更新階段

componentwillreceiveprops 元件將要接收新 props前呼叫

shouldcomponentupdate 元件是否需要更新

componentwillupdate 元件更新前呼叫

render 元件渲染

componentdidupdate 元件更新後呼叫

解除安裝階段

componentwillunmount 元件解除安裝前呼叫

setstate本身並不是非同步的,而是 react的批處理機制給人一種非同步的假象

react會批處理機制中儲存的多個 setstate進行合併

react事件並沒有繫結在真實的 dom節點上,而是通過事件**,在最外層的 document上對事件進行統一分發。

元件掛載、更新時:事件初始化:觸發事件時:

react在 document上進行統一的事件分發, dispatchevent通過迴圈呼叫所有層級的事件來模擬事件冒泡和捕獲。

在 react原始碼中,當具體到某一事件處理函式將要呼叫時,將呼叫 invokeguardedcallback方法。

react 事件使用駝峰命名,而不是全部小寫。

通過 jsx , 你傳遞乙個函式作為事件處理程式,而不是乙個字串。

在 react 中你不能通過返回 false 來阻止預設行為。必須明確呼叫 preventdefault

事件處理程式將傳遞 syntheticevent 的例項,這是乙個跨瀏覽器原生事件包裝器。它具有與瀏覽器原生事件相同的介面,包括 stoppropagation() 和 preventdefault(),在所有瀏覽器中他們工作方式都相同。

react的所有事件都通過 document進行統一分發。當真實 dom觸發事件後冒泡到 document後才會對 react事件進行處理。

所以原生的事件會先執行,然後執行 react合成事件,最後執行真正在 document上掛載的事件

react事件和原生事件最好不要混用。原生事件中如果執行了 stoppropagation方法,則會導致其他 react事件失效。因為所有元素的事件將無法冒泡到 document上,導致所有的 react事件都將無法被觸發。

vitrualdom的優勢在於 react的 diff演算法和批處理策略, react在頁面更新之前,提前計算好了如何進行更新和渲染 dom。實際上,這個計算過程我們在直接操作 dom時,也是可以自己判斷和實現的,但是一定會耗費非常多的精力和時間,而且往往我們自己做的是不如 react好的。所以,在這個過程中 react幫助我們"提公升了效能"。

$$typeof是乙個 symbol型別的變數,這個變數可以防止 xss json中不能儲存 symbol型別的變數。

createelement函式對 key和 ref等特殊的 props進行處理,並獲取 defaultprops對預設 props進行賦值,並且對傳入的孩子節點進行處理,最終構造成乙個 reactelement物件(所謂的虛擬 dom)。

jsx只是為 react.createelement(component,props,…children)方法提供的語法糖。

所有的 jsx**最後都會轉換成 react.createelement(…), babel幫助我們完成了這個轉換的過程。

所以使用了 jsx的**都必須引入 react。

babel在編譯時會判斷 jsx中元件的首字母,當首字母為小寫時,其被認定為原生 dom標籤, createelement的第乙個變數被編譯為字串;當首字母為大寫時,其被認定為自定義元件, createelement的第乙個變數被編譯為物件;

在 ie(8-11)和 edge瀏覽器中,乙個乙個插入無子孫的節點,效率要遠高於插入一整個序列化完整的節點樹。

react通過 lazytree,在 ie(8-11)和 edge中進行單個節點依次渲染節點,而在其他瀏覽器中則首先將整個大的 dom結構構建好,然後再整體插入容器。

並且,在單獨渲染節點時, react還考慮了 fragment等特殊節點,這些節點則不會乙個乙個插入渲染。

高階元件( hoc)是 react中的高階技術,用來重用元件邏輯。但高階元件本身並不是 reactapi。它只是一種模式,這種模式是由 react自身的組合性質必然產生的。

對比原生元件增強的項:

可操作所有傳入的 props

可操作元件的生命週期

可操作元件的 static方法

獲取 refs

對比原生元件增強的項:

可操作所有傳入的 props

可操作元件的生命週期

可操作元件的 static方法

獲取 refs

可操作 state

可以渲染劫持

hoc可以實現的功能:

組合渲染

條件渲染

操作 props

獲取 refs

狀態管理

操作 state

渲染劫持

hoc在業務中的實際應用場景:

日誌打點

許可權控制

雙向繫結

表單校驗

mixin 可能會相互依賴,相互耦合,不利於**維護

不同的 mixin中的方法可能會相互衝突

mixin非常多時,元件是可以感知到的,甚至還要為其做相關處理,這樣會給**造成滾雪球式的複雜性

減少狀態邏輯復用的風險

避免地獄式巢狀

讓元件更容易理解

使用函式代替class

C 高頻面試題

malloc free是c語言的標準庫函式,new delete是c 的運算子。由於malloc free是庫函式而不是運算子,不在編譯器控制許可權之內。對於使用者自定義的物件而言,用maloc free無法滿足動態管理物件的要求。廢話 new是型別安全的,malloc不是。int a new fl...

C 高頻面試題

字首式可以返回物件的引用,而字尾式必須返回物件的值所以導致在大物件產生時產生了較大的複製開銷,因此處理自定義型別的時候盡量使用字首式。a b b a a b 相對於c,c 多了過載 內聯函式 異常處理,擴充套件了物件導向的設計內容 類 繼承 虛函式 模板。c 並不是完全的物件導向,它也可以寫出面向過...

STL高頻面試題

vector的內部是使用動態陣列的方式來實現的,如果動態陣列的內部實現不夠用,就要動態的重新分配記憶體。然後把原陣列的內容拷貝過去。vector和陣列類似,擁有連續的記憶體空間,支援隨機的訪問,在中間進行元素的插入和刪除的操作時間複雜度是o n list是由雙向鍊錶實現的,只能通過陣列指標來進行資料...