React學習之擴展不變的數據（immutability-helper）優化（三十二）

注意

此插件是一個被遺留的插件，如今好像更新爲這個地址：https://github.com/kolodny/immutability-helper

引入

import update from 'react-addons-update'; // ES6
var update = require('react-addons-update'); // ES5 with npm
var update = React.addons.update; // ES5 with react-with-addons.js

1.概要

React讓我們可以做任何我們想要的數據管理方式，然而，如果你在你的應用中使用了不變的數據，然後實現一個shouldComponentUpdate方法就會大大的提升你的應用的反應速度。

javascript比其他語言更難處理不可變的數據，但是React提供了一個不錯的工具update()，可以非常方便的處理這種不可變數據。

2.主要方式

如果你改變數據方式如下：

myData.x.y.z = 7;
// or...
myData.a.b.push(9);

當更改了對象的屬性，我們根本沒有方法去判斷髮生了改變了，因爲本身已經發生了改變，所以，你可能需要創建一個新副本然後改變應該改變的地方，這樣shouldComponentUpdate()就能檢測出發生了變化。

const newData = deepCopy(myData);
newData.x.y.z = 7;
newData.a.b.push(9);

但是，深複製的代價是昂貴的，有時候深複製都是不可能的，當然你可以降低這種代價，只是複製已經改變了的，如果沒有改變的，就重複使用它們，然後我們的代碼就可能變爲如下：

const newData = extend(myData, {
  x: extend(myData.x, {
    y: extend(myData.x.y, {z: 7}),
  }),
  a: extend(myData.a, {b: myData.a.b.concat(9)})
});

然而上述的代碼性能依舊是非常差的，主要是這樣寫代碼會非常尷尬，而且BUG極多。

update()

update()提供簡單的語法糖去更好的編寫代碼。

import update from 'react-addons-update';

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

這個語法可能需要適應一下（儘管它是來自於MongoDB中的），沒有什麼冗餘，又不是什麼多變的版本，穩定性好。

$-前綴是命令的使用前提，需要變化的數據稱之爲target.

合法命令

{$push: array} 數組中的push()語法 
{$unshift: array} 數組中的unshift()語法 
{$splice: array of arrays} 類似於splice()的語法
{$set: any} 直接賦值覆蓋
{$merge: object} 合併對象屬性
{$apply: function} 函數的結果覆蓋

例子

簡單的push

const initialArray = [1, 2, 3];
const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]

initialArray 仍然是[1, 2, 3]

嵌套的集合

const collection = [1, 2, {a: [12, 17, 15]}];
const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
// => [1, 2, {a: [12, 13, 14, 15]}]

從索引爲2 的地方開始刪除2 個，然後插入13,14 .

更新當前值

const obj = {a: 5, b: 3};
const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
// => {a: 5, b: 6}
// 兩個是等價的
const newObj2 = update(obj, {b: {$set: obj.b * 2}});

合併（淺）

const obj = {a: 5, b: 3};
const newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}

下一篇將講React的純渲染Mixins