react Immutable的基本使用

2022-07-04 06:21:11 字數 3294 閱讀 9633

一、immutable簡介

immutable data 就是一旦建立,就不能再被更改的資料。對 immutable 物件的任何修改或新增刪除操作都會返回乙個新的 immutable 物件。immutable 實現的原理是 persistent data structure(持久化資料結構),也就是使用舊資料建立新資料時,要保證舊資料同時可用且不變。同時為了避免 deepcopy 把所有節點都複製一遍帶來的效能損耗。

在js中,引用型別的資料,優點在於頻繁的運算元據都是在原物件的基礎上修改,不會建立新物件,從而可以有效的利用記憶體,不會浪費記憶體,這種特性稱為mutable(可變),但恰恰它的優點也是它的缺點,太過於靈活多變在複雜資料的場景下也造成了它的不可控性,假設乙個物件在多處用到,在某一處不小心修改了資料,其他地方很難預見到資料是如何改變的,針對這種問題的解決方法,一般就像剛才的例子,會想複製乙個新物件,再在新物件上做修改,這無疑會造成更多的效能問題以及記憶體浪費。

為了解決這種問題,出現了immutable物件,每次修改immutable物件都會建立乙個新的不可變物件,而老的物件不會改變。

二、immutable注意的地方

1、約定變數命名規則:如所有 immutable 型別物件以 $$ 開頭。

2、fromjs和tojs會深度轉換資料,隨之帶來的開銷較大,盡可能避免使用,單層資料轉換使用map()和list()

3、js是弱型別,但map型別的key必須是string

4、所有針對immutable變數的增刪改必須左邊有賦值,因為所有操作都不會改變原來的值,只是生成乙個新的變數

5、immutable物件直接可以轉json.stringify(),不需要顯式手動呼叫tojs()轉原生

6、判斷物件是否是空可以直接用size

三、immutable常用api

//

map() 原生object轉map物件 (只會轉換第一層,注意和fromjs區別)

immutable.map() //

list() 原生array轉list物件 (只會轉換第一層,注意和fromjs區別)

immutable.list([1,2,3,4,5]) //

fromjs() 原生js轉immutable物件 (深度轉換,會將內部巢狀的物件和陣列全部轉成immutable)

immutable.fromjs([1,2,3,4,5]) //

將原生array --> list

immutable.fromjs() //

將原生object --> map

//tojs() immutable物件轉原生js (深度轉換,會將內部巢狀的map和list全部轉換成原生js)

immutabledata.tojs(); //

檢視list或者map大小

immutabledata.size 或者 immutabledata.count() //

is() 判斷兩個immutable物件是否相等

immutable.is(ima, imb); //

merge() 物件合併

var ima = immutable.fromjs();

var ima = immutable.fromjs();

var imc =ima.merge(imb);

console.log(imc.tojs())

////

增刪改查(所有操作都會返回新的值,不會修改原來值)

var immutabledata =immutable.fromjs(

});var data1 = immutabledata.get('a') //

data1 = 1

var data2 = immutabledata.getin(['c', 'd']) //

data2 = 3 getin用於深層結構訪問

var data3 = immutabledata.set('a' , 2); //

data3中的 a = 2

var data4 = immutabledata.setin(['c', 'd'], 4); //

data4中的 d = 4

var data5 = immutabledata.update('a',function(x)) //

data5中的 a = 5

var data6 = immutabledata.updatein(['c', 'd'],function(x)) //

data6中的 d = 7

var data7 = immutabledata.delete('a') //

data7中的 a 不存在

var data8 = immutabledata.deletein(['c', 'd']) //

data8中的 d 不存在

3-1、set 設定

3-2、equals、is:比較值是否相等

3-4、map遍歷

3-6、fromjs:把js物件轉換成map,把陣列轉換成list

toobject:只轉一層

toarray:轉成陣列型別,同樣只轉一層

tojs:都轉

container of 的的的原理

另外一篇,同樣精彩,揭開linux核心中container of的神秘面紗 華清遠見嵌入式學院講師。在linux 核心中有乙個大名鼎鼎的巨集container of 這個巨集是用來幹嘛的呢?我們先來看看它在核心中是怎樣定義的。呵呵,乍一看不知道是什麼東東。我們先來分析一下container of p...

存在的就是合理的,發生的即是必然的。

筆者有時候會想,什麼是對,什麼是錯?對於追求某一件事情之前首先會考慮,為什麼我要做這件事情。所以經過自我分析和生活周邊環境的總結。我認為,對於乙個人來,這是在站在個體的角度上說。什麼是對的?就是你自己覺得是對的,它就是對的。不過這個只是你自己的想法。主觀上的正確,不代表客觀上也受到了別人的認可。就拿...

Apache的rewrite的重寫相關的引數

apache mod rewrite規則重寫的標誌一覽 使用mod rewrite時常用的伺服器變數 rewriterule規則表示式的說明 匹配任何單字元 chars 匹配字串 chars chars 不匹配字串 chars text1 text2 可選擇的字串 text1或text2 匹配0到1...