原文 - 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
是一个品牌设计软件。