【譯】Immutable.js很嚇人？我來告訴你如何開始

原文 - Immutable.js is intimidating. Here’s how to get started.

你從許多渠道中瞭解到，你應該使用Immutable。你也想去使用，可是不肯定爲何去使用。而當你去看官方 文檔 時，映入你眼簾的第一個代碼片斷是：

identity<T>(value: T): T
複製代碼

你會想：呃...仍是算了吧。

這是一篇簡單、快速幫你入門Immutable的文章，絕對不會讓你失望。

一年前，在Pilcro，我向開發團隊推薦了Immutable。迄今爲止，這被證實是最明智的決定。咱們的應用如今具備更強的可讀性、更好的健壯性、更少的錯誤以及可預測性。

基礎

標準js數據格式轉換成Immutable

在js中，咱們知道兩種常見的數據類型：Object{}和Array[]。Immutable的思路:

• Object{} 變爲 MapMap({})
• Array[] 變爲 ListList([])

更具體點，是使用Immutable提供的Map 、List和fromJS函數：

import { Map, List, fromJS } from 'immutable';
// 原生 js 數據類型
const person = {
  name: 'Will',
  pets: ['cat', 'dog']
};
// 等同於 Immutable 中的:
const immutablePerson = Map({
  name: 'Will',
  pets: List(['cat', 'dog'])
});
// 或者 ...
const immutablePerson = fromJS(person);
複製代碼

formJS是個很是有用的函數，它會把嵌套的數據結構轉換成Immutable對象。它在轉換的過程當中會根據數據自行建立Maps和Lists。

Immutable轉換爲標準js數據格式

要想從Immutable對象中取回你的標準js數據格式，你只須要調用Immutable對象的toJS函數便可：

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });
const person = immutablePerson.toJS();
console.log(person); // 打印 { name: 'Will' };
複製代碼

數據結構應該被認爲是原生js數據結構，或者Immutable對象

開始使用Immutable

在解釋爲何Immutable頗有用以前，先給出三個代碼片斷告訴你Immutable如何去幫助你。

從嵌套的數據結構中獲取不存在的數據值

首先，原生js：

const data = { my: { nested: { name: 'Will' } } };
const goodName = data.my.nested.name;
console.log(goodName); // 打印 Will
const badName = data.my.lovely.name;
// throws error: 'Cannot read name of undefined'
// 'lovely' 屬性不存在，因此報錯
複製代碼

再來看看Immutable:

const data = fromJS({ my: { nested: { name: 'Will' } } });
const goodName = data.getIn(['my', 'nested', 'name']);
console.log(goodName); // 打印 Will
const badName = data.getIn(['my', 'lovely', 'name']);
console.log(badName); // 打印 undefined - 不會拋出異常
複製代碼

上面的例子中，原生js代碼會拋出異常，可是Immutable並不會。

這是由於咱們使用getIn()函數去獲取嵌套的數據值。數據值的key路徑不存在（換句話說，對象並不是是你指望的嵌套結構），它僅僅返回undefined並不會拋出異常。

你沒必要像下面這樣嵌套的去判斷數據值是否存在：

if (data && data.my && data.my.nested && data.my.nested.name) { ...
複製代碼

這個簡單的特性，讓你的代碼可讀性更好，代碼簡潔而且健壯性更好。

鏈式操做

首先，原生js：

const pets = ['cat', 'dog'];
pets.push('goldfish');
pets.push('tortoise');
console.log(pets); // 打印 ['cat', 'dog', 'goldfish', 'tortoise'];
複製代碼

再來看看Immutable:

const pets = List(['cat', 'dog']);
const finalPets = pets.push('goldfish').push('tortoise');
console.log(pets.toJS()); // 打印 ['cat', 'dog'];
console.log(finalPets.toJS()); // 打印 ['cat', 'dog', 'goldfish', 'tortoise'];
複製代碼

由於List.push返回操做以後的結果，咱們能夠在後面繼續鏈式操做，而原生數組的push函數返回操做以後新數組的長度。

這是一個很是簡單的鏈式操做例子，可是它說明了Immutable的強大功能。

這可讓你以函數式和簡潔的方式去處理各類數據操做。

Immutable對象的操做老是返回操做以後的結果

不可變數據

它被稱爲不可變，因此咱們須要討論一下爲何這很重要。

好比你使用Immutable建立一個對象並更新了它，可是它初始數據結構仍然保持不變。這就是不可變。

const data = fromJS({ name: 'Will' });
const newNameData = data.set('name', 'Susie');
console.log(data.get('name')); // 打印 'Will'
console.log(newNameData.get('name')); // 打印 'Susie'
複製代碼

在這個例子中，咱們能夠看到初始的data對象並無改變。這就意味着當你更新它的name屬性值爲Susie時，並不會伴隨着不可預知的行爲。

這個簡單的特性是很是強大的，特別是當你去搭建一些複雜的應用。這是Immutable的核心。

在Immutable對象上的操做並不會改變原對象，而是建立一個新對象

爲何Immutable頗有用

臉書的一些工程師在文檔首頁整理了一些使用Immutable的益處，可是有點繞。如下是我整理的一些爲何你應該開始使用Immutable：

你的數據結構是可預測的

由於你的數據結構是Immutable，你對本身的數據結構如何操做一清二楚。在複雜web應用中，這意味當你針對UI 的數據結構進行很微小的改動時，不會發生額外的、使人哭笑不得的從新渲染問題。

數據操做的健壯性

經過使用Immutable去操做數據，你的這些操做很難會出現錯誤。Immutable爲你作了許多髒活、累活：捕獲異常，提供默認值和開箱即用的建立嵌套數據結構。

簡潔而且可讀性的代碼

一開始你可能對Immutable的函數式設計很困惑，但一旦你掌握了，鏈式函數調用會讓你的代碼更少、可讀性更好。這對團隊保持代碼的一致性頗有幫助。

後續學習

不能否認，Immutable的學習曲線不是很平滑，可是很是值得。Get started的學習只是個開胃菜。

如下是以前提到的一些注意事項。若是你銘記於心，使用Immutable就如在水中的鴨子般輕鬆。

• 數據結構應該被認爲是原生js數據結構，或者Immutable對象
• Immutable對象的操做老是返回操做以後的結果
• 在Immutable對象上的操做並不會改變原對象，而是建立一個新對象

祝你好運！

若是你喜歡這篇文章，請去原文點個贊並分享給其餘人，也歡迎訪問咱們公司網站Pilcro.com。Pilcro是一個品牌設計軟件。