撩課 Web大前端每天5道面試題 Day34

2021-09-24 07:55:59 字數 1730 閱讀 2077

keys 是 react 用於追蹤哪些列表中元素被修改、被新增或者被移除的輔助標識。

render

() 在開發過程中,我們需要保證某個元素的 key 在其同級元素中具有唯一性。

在 react diff 演算法中 react 會借助元素的 key 值來判斷該元素是新近建立的還是被移動而來的元素,

從而減少不必要的元素重渲染。

此外,react 還需要借助 key 值來判斷元素與本地狀態的關聯關係,

因此我們絕不可忽視轉換函式中 key 的重要性。

複製**

在**中呼叫 setstate 函式之後,

react 會將傳入的引數物件與元件當前的狀態合併,

然後觸發所謂的調和過程(reconciliation)。

經過調和過程,

react 會以相對高效的方式根據新的狀態構建 react 元素樹並且著手重新渲染整個 ui 介面。

在 react 得到元素樹之後,

react 會自動計算出新的樹與老樹的節點差異,

然後根據差異對介面進行最小化重渲染。

在差異計算演算法中,

react 能夠相對精確地知道哪些位置發生了改變以及應該如何改變,

這就保證了按需更新,而不是全部重新渲染。

複製**

初始化階段:

getdefaultprops:獲取例項的預設屬性

getinitialstate:獲取每個例項的初始化狀態

componentwillmount:元件即將被裝載、渲染到頁面上

render:元件在這裡生成虛擬的 dom 節點

componentdidmount:元件真正在被裝載之後

執行中狀態:

componentwillreceiveprops:元件將要接收到屬性的時候呼叫

shouldcomponentupdate:

元件接受到新屬性或者新狀態的時候

(可以返回 false,接收資料後不更新,阻止 render 呼叫,後面的函式不會被繼續執行了)

componentwillupdate:元件即將更新不能修改屬性和狀態

render:元件重新描繪

componentdidupdate:元件已經更新

銷毀階段:

componentwillunmount:元件即將銷毀

複製**

shouldcomponentupdate 這個方法用來判斷是否需要呼叫 render 方法重新描繪 dom。

因為 dom 的描繪非常消耗效能,

如果我們能在 shouldcomponentupdate 方法中能夠寫出更優化的 dom diff 演算法,可以極大的提高效能。

複製**

把樹形結構按照層級分解,只比較同級元素。

給列表結構的每個單元新增唯一的 key 屬性,方便比較。

react 只會匹配相同 class 的 component(這裡面的 class 指的是元件的名字)

合併操作,呼叫 component 的 setstate 方法的時候,

react 將其標記為 dirty.到每乙個事件迴圈結束, react 檢查所有標記 dirty 的 component 重新繪製.

選擇性子樹渲染。開發人員可以重寫 shouldcomponentupdate 提高 diff 的效能。

複製**

撩課 Web大前端每天5道面試題 Day27

瀏覽器快取分為強快取和協商快取。當客戶端請求某個資源時,獲取快取的流程如下 先根據這個資源的一些 http header 判斷它是否命中強快取,如果命中,則直接從本地獲取快取資源,不會發請求到伺服器 當強快取沒有命中時,客戶端會傳送請求到伺服器,伺服器通過另一些request header驗證這個資...

撩課 Web大前端每天5道面試題 Day34

keys 是 react 用於追蹤哪些列表中元素被修改 被新增或者被移除的輔助標識。render 在開發過程中,我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 react diff 演算法中 react 會借助元素的 key 值來判斷該元素是新近建立的還是被移動而來的元素,從而減少不必...

撩課 Web大前端每天5道面試題 Day29

使用https協議可認證使用者和伺服器,確保資料傳送到正確的客戶機和伺服器 https協議是由ssl http協議構建的可進行加密傳輸 身份認證的網路協議,要比http協議安全,可防止資料在傳輸過程中不被竊取 改變,確保資料的完整性。https是現行架構下最安全的解決方案,雖然不是絕對安全,但它大幅...