【react】---Immutable的基本使用

1、Immutable簡介

　　Immutable Data 就是一旦建立，就不能再被更改的數據。對 Immutable 對象的任何修改或添加刪除操做都會返回一個新的 Immutable 對象。Immutable 實現的原理是 Persistent Data Structure（持久化數據結構），也就是使用舊數據建立新數據時，要保證舊數據同時可用且不變。同時爲了不 deepCopy 把全部節點都複製一遍帶來的性能損耗。

　　

　　在js中，引用類型的數據，優勢在於頻繁的操做數據都是在原對象的基礎上修改，不會建立新對象，從而能夠有效的利用內存，不會浪費內存，這種特性稱爲mutable（可變），但偏偏它的優勢也是它的缺點，太過於靈活多變在複雜數據的場景下也形成了它的不可控性，假設一個對象在多處用到，在某一處不當心修改了數據，其餘地方很難預見到數據是如何改變的，針對這種問題的解決方法，通常就像剛纔的例子，會想複製一個新對象，再在新對象上作修改，這無疑會形成更多的性能問題以及內存浪費。

  爲了解決這種問題，出現了immutable對象，每次修改immutable對象都會建立一個新的不可變對象，而老的對象不會改變。

 

2、Immutable注意的地方

　　一、約定變量命名規則：如全部 Immutable 類型對象以 $$ 開頭。

 

　　二、fromJS和toJS會深度轉換數據，隨之帶來的開銷較大，儘量避免使用，單層數據轉換使用Map()和List()

 

　　三、js是弱類型，但Map類型的key必須是string

 

　　四、全部針對immutable變量的增刪改必須左邊有賦值，由於全部操做都不會改變原來的值，只是生成一個新的變量

 

　　五、immutable對象直接能夠轉JSON.stringify(),不須要顯式手動調用toJS()轉原生

 

　　六、判斷對象是不是空能夠直接用size

 

3、Immutable經常使用API　

//Map()  原生object轉Map對象 (只會轉換第一層，注意和fromJS區別)
immutable.Map({name:'danny', age:18})
 
//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({name:'danny', age:18})   //將原生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({a:1,b:2});
var imA = immutable.fromJS({c:3});
var imC = imA.merge(imB);
console.log(imC.toJS())  //{a:1,b:2,c:3}
 
//增刪改查（全部操做都會返回新的值，不會修改原來值）
var immutableData = immutable.fromJS({
    a:1,
    b:2,
    c:{
        d:3
    }
});
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){return x+4})   //data5中的 a = 5
var data6 = immutableData.updateIn(['c', 'd'],function(x){return x+4})   //data6中的 d = 7
var data7 = immutableData.delete('a')   //data7中的 a 不存在
var data8 = immutableData.deleteIn(['c', 'd'])   //data8中的 d 不存在

 

3-一、set 設置

3-二、equals、is：比較值是否相等

 

3-三、push、unshift、concat

3-四、map遍歷

3-五、merge

3-六、fromJs:把js對象轉換成map，把數組轉換成List

 

3-七、toObject | toArray | toJS

　　　toObject:只轉一層

　　　toArray:轉成數組類型，一樣只轉一層

　　   toJs:都轉

 

3-八、getIn | get