Immutable的基本使用

2021-09-19 17:21:41 字數 2901 閱讀 3476

一、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 

immutable裡面的兩種方法的使用:不屬於原生js裡面的方法

map ---》類似物件

list ---》類似陣列

immutable 安裝和使用命令:

初始化:npm init -y

安裝:cnpm install immutable -s

建立immutable物件方式:

const immutable = require("immutable");

建立map物件

const map = immutable.map()

1.map的增刪改查 物件在操作的時候使用json.stringify(newmap)才能輸出

新增基本資料:const newmap = map.set("d",20);

物件:const newmap = map.setin(["obj","***"],);

物件使用:console.log(map,json.stringify(newmap));

刪基本資料://const newmap = map.delete("a");

物件://const newmap = map.deletein(["obj","age"]);

console.log(map,json.stringify(newmap));

改基本資料://const newmap = map.update("a",x=>x+6);

物件://const newmap = map.updatein(["obj","age"],x=>x+6);

console.log(map,json.stringify(newmap));

查基本資料://const newmap = map.get("a");

物件://const newmap = map.getin(["obj","name"]);

console.log(map,json.stringify(newmap));

map物件合併

const map = immutable.map()

const map1 = immutable.map();

console.log(map.merge(map1));

map深層次物件合併 mergedeep

將immutable轉換js物件

console.log(map.tojs())

將js物件轉換為immutable物件

console.log(immutable.fromjs(}));

tojs和fromjs特別耗費效能 所以慎用

const map = immutable.fromjs(})

toobject

console.log(map.toobject());

2.建立list

const list = immutable.list([1,2,3,4,[20,30,40]]);

const list1 = immutable.list([10,20,30]);

增const newlist = list.push(10);

刪 pop shift slice splice

const newlist = list.pop()

改const newlist = list.splice(1,1,20);

查list.map(item=>)

console.log(list);

const imm = immutable.fromjs(

})console.log(imm);

將immutable轉換js物件

console.log(list.toarray());

console.log(list.tojs())

將js物件轉換為immutable物件

console.log(immutable.fromjs([1,2,3,4]));

合併const newlist = list.concat(list1);

console.log(newlist)

react使用Immutable實戰

熟悉 react 的都知道,react 做效能優化時有乙個避免重複渲染的大招,就是使用 shouldcomponentupdate 但它預設返回 true 即始終會執行 render 方法,然後做 virtual dom 比較,並得出是否需要做真實 dom 更新,這裡往往會帶來很多無必要的渲染並成為...

06react中 Immutable的使用

immutable 可持久化的資料結構 不會突變的資料結構 immutable 就是一旦建立,就不能再被更改的資料。對 immutable 物件的任何修改或新增刪除操作都會返回乙個新的 immutable 物件。yarn add immutable or npminstall inmutable s...

gulp的使用基本使用

1.全域性安裝gulp 目的是在命令列裡使用gulp的命令 2.命令列中cd到專案目錄,區域性安裝gulp 如果不在專案中再次安裝會報錯,據說這樣是為了避免發生版本衝突 3.在專案目錄下新建乙個gulpfile.js檔案 必須這個名字,這個檔案算是乙個配置檔案 編寫我們的需求,以便gulp能按著我們...