在JavaScript中處理不可變數(shù)據(jù)比在語言層面上就設計好要難，像 Clojure。但是，我們提供了一個簡單的不可變輔助工具，update()，這就讓處理這種類型的數(shù)據(jù)更加簡單了，根本不會改變你數(shù)據(jù)的表示的形式。（Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like Clojure. However, we've provided a simple immutability helper, update(), that makes dealing with this type of data much easier, without fundamentally changing how your data is represented.）

主要思想（The main idea）

如果你像這樣改變數(shù)據(jù)：

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

你無法確定哪個數(shù)據(jù)改變了，因為之前的副本被覆蓋了。相反，你需要創(chuàng)建一個新的myDate副本，僅僅改變需要改變的部分。然后你就能夠在shouldComponentUpdate()中使用第三方的相等判斷來比較myData的舊副本和新對象：

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

不幸的是，深拷貝是很昂貴的，而且某些時候還不可能完成。你可以通過僅拷貝需要改變的對象，重用未改變的對象來緩解這個問題。不幸的是，在當今的JavaScript里面，這會變得很笨拙：

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

雖然這能夠非常好地提升性能（因為僅僅淺復制log n個對象，重用余下的），但是寫起來很痛苦?？纯此械闹貜蜁鴮?！這不僅僅是惱人，也提供了一個巨大的出bug的區(qū)域。

update()在這種情形下提供了簡單的語法糖，使得寫這種代碼變得更加簡單。代碼變?yōu)椋?/p>

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

雖然這種語法糖需要花點精力適應（盡管這是受的啟發(fā)），但是它沒有冗余，是靜態(tài)可分析的，并且比可變的版本少打了很多字。（While the syntax takes a little getting used to (though it's inspired by ) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.）

以$為前綴的鍵被稱作命令。他們“改變”的數(shù)據(jù)結(jié)構(gòu)被稱為目標。（ The $-prefixed keys are called commands. The data structure they are "mutating" is called the target.）

可用的命令（Available commands）

{$push: array} 利用push()把目標上所有的元素放進數(shù)組（push() all the items in array on the target.）。
{$unshift: array} 利用unshift()把目標上所有的元素放進數(shù)組（unshift() all the items in array on the target.）。
{$splice: array of arrays} 對于array中的每一個元素，用元素提供的參數(shù)在目標上調(diào)用splice()（for each item in arrays call splice() on the target with the parameters provided by the item.）。
{$set: any} 整體替換目標（replace the target entirely.）。
{$merge: object} 合并目標和object的鍵。
{$apply: function} 傳入當前的值到函數(shù)，然后用新返回的值更新它（passes in the current value to the function and updates it with the new returned value.）。

示例

簡單的入棧

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

initialArray仍然是[1, 2, 3]。

嵌入的集合

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

獲取collection中索引是2的對象，然后取得該對象鍵為a的值，刪掉索引從1開始的一個元素（即移除17），插入13和14。（This accesses collection's index 2, key a, and does a splice of one item starting from index 1 (to remove 17) while inserting 13 and 14.）

根據(jù)現(xiàn)有的值更新

var obj = {a: 5, b: 3};
var newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
// => {a: 5, b: 6}
// This is equivalent, but gets verbose for deeply nested collections:
var newObj2 = update(obj, {b: {$set: obj.b * 2}});

（淺）合并

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

上一篇：組件 API下一篇：事件系統(tǒng)

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久