用正确的方式打开 JavaScript immutable 的大门

Devrsi0n ▴ 
更新于 

什么是 immutable?

immutable 是函数式编程中持久化数据结构的概念,immutable 的数据一旦创建就不能再被更改。对 immutable 数据的任何修改、添加或删除都会返回一个新的 immutable 数据。

为什么 JavaScript 需要 immutable?

React 社区 Redux 是最热门的状态管理库之一,Redux 的 reducer 要求之一就是 immutable,redux-ecosystem-links/immutable-data页面包含多达 83 个 immutable 库来帮助开发者减少 immutable 模版代码。

JavaScript immutable lib 推荐

自从 ES2018 支持 Spread operator 之后,直接写对象的浅拷贝简单了很多,比如:

js
1const obj = {
2 foo: 'bar',
3};
4
5const clonedObj = { ...obj };
6// obj !== clonedObj

这类原生语法只能解决 immutable 很小一部分问题,复杂操作还是需要 lib 的支持。目前社区 2 款相关的 lib 热度最高,其一是 Facebook 出品的 immutable-js,immutable-js 的 API 极其丰富,物极必反这也成为了人们诟病的一点,API 繁多(上百个接口),学习成本高,63 KB 的包体积也不能称之小巧。其二就是去年大热的 immer,使用简单,学习成本极小,包体积也非常小 - 12kB

immer

immer 的 slogan :用直接修改当前状态的方式创新新的状态(Create the next immutable state by mutating the current one )。

API

最简单的 immer demo。

js
1import produce from 'immer';
2
3const nextState = produce(currentState, draft => {
4 // empty function
5});
6
7console.log(nextState === currentState); // true

produce 函数接收 2 个参数,第一个参数是当前的状态(currentState)也就是你想要改变的对象,第二个参数是一个 producer 函数,在 producer 函数里面用 mutable 的方式操作旧状态以达成你想要的状态。producer 函数第一个参数是 draft,对 draft 的任何修改都会反映到最后生成的状态,而 currentState 不会有任何改动。

参考资料

在 GitHub 上编辑此文

其他文章

给 Gataby 文章添加修改日期

自动生成指定文件的最近更新时间戳,添加到 Gatsby Node

2020-03-21

⚛️ Re: 从零开始的 React 再造之旅

不依赖任何第三方包,从零开始动手造 React

2020-02-04
© 2019 – 2020 devrsi0n
Link to $https://bit.ly/2NcAZQZLink to $https://github.com/devrsi0nLink to $https://weibo.com/qianmofeiyu