react需要了解的一些概念

2021-10-07 22:14:31 字數 1142 閱讀 6818

高階元件本質上是乙個函式,是可以傳遞乙個元件作為引數,並且會返回乙個新的元件,可以通過props的形式傳遞給目標元件,這樣目標元件可以直接在props裡面獲取使用就可以,在工作中,我們使用的connect(),withrouter(),還有一些自己封裝復用的元件(basicfram公共標題) ,
class hellohoc extends react.component

}class wrapcomp extends react.component

}return wrapcomp;

}相同點: 都支援元件化開發, 都是資料驅動檢視

不用點:

vue是mvvm(雙向資料流)模式(資料改變,檢視改變,檢視改變,資料改變),react是mvc(單向資料流)模式(資料改變,檢視改變)

狀態有改變時,vue會跟蹤每乙個元件的依賴關係,不需要重新渲染整個元件數,react是只要狀態有改變,全部元件都會重新渲染,通過shouldcomponentupdate這個生命週期來控制要不要重新渲染

react是通過setstate()來更新狀態, 在vue中,資料由data屬性在vue物件中管理;

vue使用模板,react是jsx模式

把真實dom樹變成js物件樹,將之前的和新的作比較,通過diff演算法,按照不同的地方進行渲染

傳統的diff演算法是通過迴圈遞迴的方式進行依次對比,效率低,這對於前端來說太耗費效能,而react diff 策略主要是:

1、對dom樹進行分層比較,兩棵樹只會對同一層的節點進行比較,如果同級相同位置節點不一樣,直接刪除,對於節點位置有移動,也是刪除重新建立

2 元件。對於相同的元件,操作的方法相同於dom,對於不同的元件的做法是,刪掉當前整個dom樹,重新渲染新的dom樹,選擇性子樹渲染。開發人員可以重寫shouldcomponentupdate提高diff的效能。

3、對於節點,diff提供了3中操作,分別是插入、移動和刪除:

1)新的元件型別不在舊集合中,即全新的節點,需要對新節點進行插入操作。

2)舊集合中有新元件型別,且element是可更新的型別,這時候就需要做移動操作,可以復用以前的dom節點。

3)舊元件型別,在新集合裡也有,但對應的element不同則不能直接復用和更新,需要執行刪除操作,或者舊元件不在新集合裡的,也需要執行刪除操作。

OpenGL程式設計需要了解的一些概念

本部落格的內容出自於 僅根據自己的理解記錄下對自己很有幫助的地方 opengl是什麼?opengl可以認為是乙個api,但具體來說opengl值規定了函式如何執行和輸出值,但沒有定義如何實現,具體實現細節是由顯示卡的生產商完成的。所以有時候opengl的bug可以通過公升級驅動來解決。opengl早...

Android學習需要了解的一些基本概念

android系統主要由五個部分組成 自下而上 1.linux核心 2.資料庫 3.android執行時 4.應用程式框架 5.應用程式 android四大元件 activity service broadcastreceiver contentprovider android所有ui元件都繼承vi...

Linux下需要了解的一些東西

今天分享一些關於linux有必要知道的東西 1 proc目錄 linux系統上的 proc目錄是一種檔案系統,即proc檔案系統。與其它常見的檔案系統不同的是,proc是一種偽檔案系統 也即虛擬檔案系統 儲存的是當前核心執行狀態的一系列特殊檔案,使用者可以通過這些檔案檢視有關系統硬體及當前正在執行程...