Immutable學習及 React 中的實踐

爲何用immutable.js呢。有了immutable.js能夠大大提高react的性能。

JavaScript 中的對象通常是可變的（Mutable），由於使用了引用賦值，新的對象簡單的引用了原始對象，改變新的對象將影響到原始對象。如 foo={a: 1}; bar=foo; bar.a=2 你會發現此時 foo.a 也被改爲了 2。雖然這樣作能夠節約內存，但當應用複雜後，這就形成了很是大的隱患，Mutable 帶來的優勢變得得不償失。爲了解決這個問題，通常的作法是使用 shallowCopy（淺拷貝）或 deepCopy（深拷貝）來避免被修改，但這樣作形成了 CPU 和內存的浪費。

而Immutable Data 就是一旦建立，就不能再被更改的數據。對 Immutable 對象的任何修改或添加刪除操做都會返回一個新的 Immutable 對象。Immutable 實現的原理是 Persistent Data Structure（持久化數據結構），也就是使用舊數據建立新數據時，要保證舊數據同時可用且不變。同時爲了不 deepCopy 把全部節點都複製一遍帶來的性能損耗，Immutable 使用了 Structural Sharing（結構共享），即若是對象樹中一個節點發生變化，只修改這個節點和受它影響的父節點，其它節點則進行共享

當state更新時，若是數據沒變，也會去作virtual dom的diff，這就產生了浪費。而immutable能優化diff算法的性能。

• Immmutable collection被當作值對待，而不是對象
• 任何修改會返回新的immutable collection
• 幾乎全部的Array方法都可用在Immutable.List;幾乎全部的Map方法都可用在Immutable.Map；幾乎全部的Set方法都可用在Immutable.Set

// 使用Immutable
foo = Immutable.fromJS({a: {b: 1}}); //js對象轉成Immutable對象 相反toJs()
bar = foo.setIn(['a', 'b'], 2);   // 深層使用 setIn 賦值
console.log(foo.getIn(['a', 'b']));  // 使用 getIn 取值，打印 1
console.log(foo === bar);  //  打印 false

 

• 若是js對象想map遍歷，能夠利用Immutable的Seq高效實現。 
  Seq只執行須要的工做，不會建立Immuntable緩存數組。任何數據能夠經過toSeq()轉換爲lasy Seq格式

var myObject = {a:1,b:2,c:3};
Immutable.Seq(myObject).map(x => x * x).toObject();
// { a: 1, b: 4, c: 9 }

 

• Immutable的Map對象和原生js對象能夠無痛合併

// 合併merge 
var map1 = Immutable.Map({a:1, b:2, c:3, d:4});
var map2 = Immutable.Map({c:10, a:20, t:30});
var obj = {d:100, o:200, g:300};
console.log(map1.merge(map2, obj).toJS()); // Map{}

  // Map
  var obj1 = Immutable.Map({a:1, b:2, c:3});
  var obj2 = obj1.set('b', 50); // set
  console.log(obj1.get('b'),obj2.get('b')); // get 2 50
  var alpha = Immutable.Map({a:1, b:2, c:3, d:4});
  console.log(alpha.map((v, k) => k.toUpperCase()).join());// 'A,B,C,D'

  // List
  const list = Immutable.List([ 'a', 'b', 'c' ])
  const result = list.update(2, val => val.toUpperCase())
  console.log("===>",result.toJS())

• js對象轉換爲Immutable時，屬性都是String類型的。而Immutable.Map接受任何類型，因此get方法不建議使用

var map = Immutable.fromJS(obj);
map.get("1"); // "one"
map.get(1);   // undefined

 

• 針對嵌套數據的處理方法，mergeDeep/getIn/setIn/updateIn是最經常使用的方法。

var nested2 = nested.mergeDeep({a:{b:{d:6}}});
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 6 } } }
nested2.getIn(['a', 'b', 'd']); // 6

var nested3 = nested2.updateIn(['a', 'b', 'd'], value => value + 1);
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }

var nested4 = nested3.updateIn(['a', 'b', 'c'], list => list.push(6));
// Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }

 react中使用immutable

  getInitialState() {
    return {
      data: Map({ times: 0 })
    }
  },
  handleAdd() {
    this.setState({ data: this.state.data.update('times', v => v + 1) });
    // 這時的 times 並不會改變
    console.log(this.state.data.get('times'));
  }

immutable+flux

this.state={
searcnfinanceTypeListAll:  Immutable.fromJS([])
}

changeState=()=>{
this.setState({searcnfinanceTypeListAll:Immutable.fromJS(typeList)});
}

 建議把 this.state 寫成 Immutable 對象