immutability-helper 學習筆記 -1

摘要： 本來想將有關於 immutability-helper 的博文放在一起學React系列博文中，但是考慮到該外掛不僅僅在React中實用到，所以就單獨拿出來分兩期寫。 發現問題 immutability 意為 不變，不變性，永恆性 。至於該外掛能做什麼，我想它的作者對它的標註已經很...

本來想將有關於 immutability-helper 的博文放在一起學React系列博文中，但是考慮到該外掛不僅僅在React中實用到，所以就單獨拿出來分兩期寫。

發現問題

immutability 意為 不變，不變性，永恆性 。至於該外掛能做什麼，我想它的作者對它的標註已經很明確了 mutate a copy of data without changing the original source ，意為： 在不改變原始來源的情況下改變資料副本 。

同時在這裡筆者再推薦另一個與之相似的外掛，那就是Facebook出品的 immutable-js (我們可以認為immutability-helper是immutable-js的終極簡化版)。臉書對immutable-js的標註也很明確： Immutable persistent data collections for Javascript which increase efficiency and simplicity ，意為： 使得Javascript中的持久資料集合保持不可變，從而提高效率和簡單性 。

仔細閱讀他們對兩個外掛格子的描述，我們能得到一個關鍵字，那就是 不可變 。為什麼要不可變？在這裡筆者覺得從React角度來解釋可能會更加清晰。我們都知道React元件本身會包含N個狀態，而且這些狀態會通過setState方法去更新，也就是說React元件的狀態是可變的，實際上本就是這麼一回事。但是作為React的初學者可能會誤解 狀態是可變的 這句話。怎麼說？因為對於React元件而言，狀態的變化是 State的變化而不是State值的變化 ，什麼？看不懂？那我們繼續往下說。假如我們初始化了這樣一個狀態：

this.state={
name:'xiaoming',
hobbies:['qq','wx']
}

現在才是解釋什麼叫 State的變化而不是State值的變化 。假如我們先這樣做：

this.setState({
name:'hanmeimei'
})

經過這個操作以後， name 對應的DOM節點會得到更新，而如果我們這樣做：

function changeHobby() {
let hobbies = this.state.hobbies;
hobbies.push('Coding');
this.setState({
hobbies: hobbies
})
}

引出問題

運行了這個方法以後會發生什麼？Nothing Happened, But why?

這個問題也是經常發生在React初學者身上，因為React在檢測狀態變化時候是一個淺檢測，換句話說就是隻關注name或者hobbies這兩個key對應的value有沒有變化，有變化就重新Render否則不做任何動作。那如何去檢測value有沒有變化，其實就是根據變數的地址。我們都知道變數在記憶體中都有唯一的地址。拿剛剛的兩個例子來說，為什麼更新了name和更新了hobbies這兩個狀態會有兩個不同的結果？那是因為在JavaScritp中，string就是被設計成不可變，而陣列則可變。換句話說我們無法在保證字串記憶體地址不變的情況下改變字串但卻可以保證陣列在記憶體地址不變的情況下增加或者刪除其中的某一個元素。所以這就是為什麼我們更新hobbies這個狀態的情況元件並沒有重新整理的原因，我們用例子來證明下陣列這一特性：

let hobbies = ['qq', 'wx'];
let hobbies_2 = hobbies;
hobbies_2.push('Coding');

console.log(hobbies === hobbies_2);

可以看出這兩個變數實際上是同一個。

再舉個例子並且是在日常開發中肯定會遇到過的。假如現在要將後臺的傳來的資料渲染成一個列表，資料如下：

[
{'id':0,name:'xiaoming'},
{'id':1,name:'lilei'},
{'id':2,name:'hanmeimei'},
]

這是一個很簡單的操作。然後我們做了一個更新的功能，當我們將id為1的那條的姓名改成'Miss Li'，那該怎麼辦才能保證在setState後讓該列表元件重新渲染？估計大家心裡立刻有兩個方案，一個是重新獲取後臺資料然後重新渲染，另一個是重新拷貝一份資料然後更改相應的地方後重新set給某個State完成重新渲染。但是我們可以看出，這兩個操作最終的效果仍然是 建立另一個與初始陣列在內容上完全相同的陣列 ，雖然相對繁瑣但是著實有效。不過這兩個方案各有缺點，比如第一個方案需要額外增加一次網路請求，第二個是萬一資料量過於龐大就會造成記憶體的浪費。

既然這樣有什麼更好的解決方案呢？到這裡我相信大家就明白了該篇部落格的用意了，因為這個immutability-helper在筆者近期專案中使用最頻繁，所以覺得有必要拿出來說一說。

immutability-helper使用方法

使用方法很簡單，首先是安裝依賴

npm install immutability-helper --save

然後是在有需要的地方引入即可

import update from 'immutability-helper';

這樣我們可以使用update這個方法做我們想做的事情了。

那就有人問了，為什麼它就能完美的解決問題呢？其實很簡單，就那剛剛的列表資料來說，immutability-helper會輸出一個全新的陣列物件並且只會更新跟id=1有關的那條資料，剩下的通過 地址引用 的方式引入到新陣列中，這樣會最大限度的使用資料和記憶體。

immutability-helper工作方式

immutability-helper的工作方式也很簡單，通過 在update方法在使用指令 就可以實現對資料的修改。

immutability-helper的指令組成也很簡單： $+關鍵字 。而且這個關鍵字我們仍然很熟悉，接著往下看。它支援的指令一共有：

• {$push: array} push() all the items in array on the target.
• {$unshift: array} unshift() all the items in array on the target.
• {$splice: array of arrays} for each item in arrays call splice() on the target with the parameters provided by the item. Note: The items in the array are applied sequentially, so the order matters. The indices of the target may change during the operation.
• {$set: any} replace the target entirely.
• {$toggle: array of strings} toggles a list of boolean fields from the target object.
• {$unset: array of strings} remove the list of keys in array from the target object.
• {$merge: object} merge the keys of object with the target.
• {$apply: function} passes in the current value to the function and updates it with the new returned value.
• {$add: array of objects} add a value to a Map or Set. When adding to a Set you pass in an array of objects to add, when adding to a Map, you pass in [key, value] arrays like so: update(myMap, {$add: [['foo', 'bar'], ['baz', 'boo']]})
• {$remove: array of strings} remove the list of keys in array from a Map or Set.

這些指令關鍵字是不是很熟悉？因為我們在日常開發中經常使用到這些。下面就開始一個一個介紹。

指令使用

$push

push，顧名思義和陣列有關，其實就是向源陣列中增加一個元素並且輸出一個內容想通了的新陣列。看例子：

var update = require("immutability-helper");
const state1 = ["x"];
const state2 = update(state1, { $push: ["y"] }); // ['x', 'y']

console.log(state1, state2);
console.log(`state1===state2: ${state1===state2}`);

輸出結果：

同時也來熟悉下update方法的使用：update方法接受兩個引數，第一個是源資料，這個很好理解；第二個是 操作線 (筆者YY出來的)，用來描述我們如何去操作源資料， key是指令，value是指令所需要的資料 。

$unshift

unshift的作用就是向源陣列的開頭批量新增元素

var update = require("immutability-helper");
const state1 = ["x"];
const state2 = update(state1, { $unshift: ["y","Z"] });

console.log(state1, state2);

輸出結果：

$splice

splice的作用就是向源陣列中新增/刪除元素。引數接受多個數組，每個陣列為一組操作。每一組與實際splice方法的引數相同。

var update = require("immutability-helper");
const state1 = [0, 1, 2, 4];
const state2 = update(state1, {
$splice: [
[3, 1, 3, 4, 5, 6, 7]
]
});

console.log(state1, state2);

輸出結果：

$set

set指令被用來改成字面量物件中的某個key的值。

var update = require("immutability-helper");
const data = { 'id': 0, name: 'xiaoming' };
const data2 = update(data, { name: { $set: 'Miss Li' } });
console.log(data, data2);

輸出結果：

$toggle

toggle意為切換，該方法是用來對Boolean物件進行切換，比如True切換為False

var update = require("immutability-helper");
const data = [true, false];
const data2 = update(data, { $toggle: [0] });
console.log(data, data2);

輸出結果：

使用方法如上，針對陣列中的第1個Boolean值做切換處理。

本篇先介紹這5個指令方法。剩下的5個我們下一篇繼續。

接下來我們嘗試從上面這5個指令中找出相應指令去解決我們前面提到的表格資料的問題：

首先是表格的資料：

[
{'id':0,name:'xiaoming'},
{'id':1,name:'lilei'},
{'id':2,name:'hanmeimei'},
]

可以分析出我們需要對兩中物件進行處理，一個是陣列，一個是字面量物件。

然後假如我們修改了id=1的那條記錄的‘name’屬性，‘name=張偉’，該怎麼做？

首先第一步我們要找到id=1的那條記錄的index，這裡是1；然後是確定需要更改的欄位和更改後的值。

var update = require("immutability-helper");
const data = [
{ 'id': 0, name: 'xiaoming' },
{ 'id': 1, name: 'lilei' },
{ 'id': 2, name: 'hanmeimei' },
]
const data2 = update(data, { 1: { name: { $set: '張偉' } } });
console.log(data[1]['name'], data2[1]['name']);
console.log(`data===data2: ${data===data2}`);

輸出結果：

這樣就實現了在源資料的基礎上更改了值並且輸出一個與之地址完全不同陣列。