简介
interbit-seamless-immutable是一个npm包,可以用于处理数据不可变的问题。
在开发前端应用的时候,数据的状态非常重要,尤其是在考虑到一个用户或是多个用户并行访问同一个应用的情况下。使用不可变数据就可以避免同时并发访问同一数据状态引发的问题。
对于不可变数据的处理,interbit-seamless-immutable 提供了一种相对简单高效的解决方案,它可以方便的生成新的数据状态,同时能够减少内存的占用。
使用介绍
先来看一下interbit-seamless-immutable的安装指南
npm install --save interbit-seamless-immutable
使用前,需要导入它
import Immutable from 'interbit-seamless-immutable'
接着就可以使用 Immutable 进行数据的不可变处理。
Immutable首先会生成一个新的immutable对象,并且会复用现有的数据块,实现内存优化。其次,Immutable 支持使用函数式编程的方式进行数据更新。
-- -------------------- ---- ------- ------ --------- ---- ----------------------------- --- ---- - ---------------- -- - -- ---- --- ---- -- -- - -- --- ---- - ---------------- ---- --- --- --------------------------------- -- - -- ---- --- ---- -- -- - --------------------------------- -- - -- ---- --- ---- -- -- -
从上面的示例可以看到,使用 from
方法生成的 map1
和使用 setIn
方法生成的 map2
不是相同的对象,Immutable 生成了一个新的immutable对象,并且通过 setIn
方法更新了其中的数据。
接下来简单介绍几个 Immutable 的API。
fromJS
fromJS(jsValue: any, reviver?: (k: any, v: any) => any = (k, v) => v): any
使用方法和 JSON.parse
类似,可以将js对象转换为Immutable对象。需要注意的是,如果是js对象内嵌Immutable对象,那么仍然需要使用 fromJS
方法将其转换。
const jsObject = { a: 1, b: { c: [2, 3, 4] }} const immutableObject = Immutable.fromJS(jsObject) console.log(immutableObject.toJS()) // { a: 1, b: { c: [ 2, 3, 4 ] } }
get
获取指定path的value。
getIn(path: Array<any>, defaultValue?: any): any
获取指定path的value,如果path不存在,返回 defaultValue
。
const jsObject = { a: 1, b: { c: [2, 3, 4] }} const immutableObject = Immutable.fromJS(jsObject) console.log(immutableObject.getIn(['b', 'c', 1])) // 3
set
set(key: any, value: any): this
返回一个新的immutable对象,并且在其中的key位置插入value。
const jsObject = { a: 1, b: { c: [2, 3, 4] }} const immutableObject = Immutable.fromJS(jsObject) const newImmutableObject = immutableObject.set('a', 2) console.log(newImmutableObject.toJS()) // { a: 2, b: { c: [ 2, 3, 4 ] } }
setIn
setIn(path: Array<any>, value: any): this
返回一个新的immutable对象,并且在指定 path
的位置插入 value
。
const jsObject = { a: 1, b: { c: [2, 3, 4] }} const immutableObject = Immutable.fromJS(jsObject) const newImmutableObject = immutableObject.setIn(['b', 'c', 1], 30) console.log(newImmutableObject.toJS()) // { a: 1, b: { c: [ 2, 30, 4 ] } }
merge
merge(...iterables: Array<any>): this
合并immutable对象,并且返回一个新的immutable对象。
-- -------------------- ---- ------- ----- --------- - - -- -- -- - -- --- -- -- -- ----- --------- - - -- -------- -- - -- --- -- ----- ---------------- - --------------------------- ----- ---------------- - --------------------------- ----- ------------------ - ---------------------------------------- -------------------------------------- -- - -- -- -- - -- - -- -- - - -- -- -------- -- - -- --- - -
结尾
上面是interbit-seamless-immutable的一个简单介绍,虽然只是一个小小的 npm 包,但它的设计思路值得借鉴,对需要处理不可变数据的项目(比如人员管理系统等)可能会有很大的帮助。如果大家需要在前端项目中使用不可变数据的话,建议可以考虑使用 interbit-seamless-immutable。
以上就是学习 interbit-seamless-immutable
的全部内容,如果觉得这篇文章还可以的话,请点个赞支持我一下吧。
附上一个快速了解的代码示例
-- -------------------- ---- ------- ------ --------- ---- ----------------------------- ----- ------------ - ------------------ ------ - - ----- -------- ------------ ----- -- - ----- -------- ------------ ---- -- - ----- -------- ------------ ----- -- - -- --------------------------------------------- -- - - ----- -------- ------------ ----- -- -- - ----- -------- ------------ ---- -- -- - ----- -------- ------------ ----- - - ----- ------- - ------- ------- -- - ----- ------- - - ----- ------------ ----- - ------ ---------------- ------- -- ----- -- -------------------- - ----- ------------ - ------- - ----- -- -- - ------ ------------------------ ------ --------------- ----------- -- ------------ - - ----- -------- - --------------------- - ----- ---- ----- -- ----------------------------------------- -- - - ----- -------- ------------ ----- -- -- - ----- -------- ------------ ---- -- -- - ----- -------- ------------ ----- -- -- - ----- ---- ------ ------------ ----- - - ----- --------- - ---------------------- - ------ - -- ------------------------------------------ -- - - ----- -------- ------------ ----- -- -- - ----- -------- ------------ ---- -- -- - ----- -------- ------------ ---- -- -- - ----- ---- ------ ------------ ----- - -
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056cc681e8991b448e6478