npm包interbit-seamless-immutable使用教程

阅读时长 8 分钟读完

简介

interbit-seamless-immutable是一个npm包,可以用于处理数据不可变的问题。

在开发前端应用的时候,数据的状态非常重要,尤其是在考虑到一个用户或是多个用户并行访问同一个应用的情况下。使用不可变数据就可以避免同时并发访问同一数据状态引发的问题。

对于不可变数据的处理,interbit-seamless-immutable 提供了一种相对简单高效的解决方案,它可以方便的生成新的数据状态,同时能够减少内存的占用。

使用介绍

先来看一下interbit-seamless-immutable的安装指南

使用前,需要导入它

接着就可以使用 Immutable 进行数据的不可变处理。

Immutable首先会生成一个新的immutable对象,并且会复用现有的数据块,实现内存优化。其次,Immutable 支持使用函数式编程的方式进行数据更新。

-- -------------------- ---- -------
------ --------- ---- -----------------------------

--- ---- - ----------------
    -- - -- ---- --- ---- -- -- -
--

--- ---- - ---------------- ---- --- ---

---------------------------------
-- - -- ---- --- ---- -- -- -
---------------------------------
-- - -- ---- --- ---- -- -- -

从上面的示例可以看到,使用 from 方法生成的 map1 和使用 setIn 方法生成的 map2 不是相同的对象,Immutable 生成了一个新的immutable对象,并且通过 setIn 方法更新了其中的数据。

接下来简单介绍几个 Immutable 的API。

fromJS

使用方法和 JSON.parse 类似,可以将js对象转换为Immutable对象。需要注意的是,如果是js对象内嵌Immutable对象,那么仍然需要使用 fromJS 方法将其转换。

get

获取指定path的value。

获取指定path的value,如果path不存在,返回 defaultValue

set

返回一个新的immutable对象,并且在其中的key位置插入value。

setIn

返回一个新的immutable对象,并且在指定 path 的位置插入 value

merge

合并immutable对象,并且返回一个新的immutable对象。

-- -------------------- ---- -------
----- --------- - - -- -- -- - -- --- -- -- --
----- --------- - - -- -------- -- - -- --- --
----- ---------------- - ---------------------------
----- ---------------- - ---------------------------

----- ------------------ - ----------------------------------------

-------------------------------------- -- - -- -- -- - -- - -- -- - - -- -- -------- -- - -- --- - -

结尾

上面是interbit-seamless-immutable的一个简单介绍,虽然只是一个小小的 npm 包,但它的设计思路值得借鉴,对需要处理不可变数据的项目(比如人员管理系统等)可能会有很大的帮助。如果大家需要在前端项目中使用不可变数据的话,建议可以考虑使用 interbit-seamless-immutable。

以上就是学习 interbit-seamless-immutable 的全部内容,如果觉得这篇文章还可以的话,请点个赞支持我一下吧。

附上一个快速了解的代码示例

-- -------------------- ---- -------
------ --------- ---- -----------------------------

----- ------------ - ------------------
    ------ -
        - ----- -------- ------------ ----- --
        - ----- -------- ------------ ---- --
        - ----- -------- ------------ ----- --
    -
--

---------------------------------------------
-- - - ----- -------- ------------ ----- --
-- - ----- -------- ------------ ---- --
-- - ----- -------- ------------ ----- - -

----- ------- - ------- ------- -- -
    ----- ------- - - ----- ------------ ----- -
    ------ ---------------- ------- -- ----- -- --------------------
-

----- ------------ - ------- - ----- -- -- -
    ------ ------------------------ ------ --------------- ----------- -- ------------ -
-

----- -------- - --------------------- - ----- ---- ----- --
-----------------------------------------
-- - - ----- -------- ------------ ----- --
-- - ----- -------- ------------ ---- --
-- - ----- -------- ------------ ----- --
-- - ----- ---- ------ ------------ ----- - -

----- --------- - ---------------------- - ------ - --
------------------------------------------
-- - - ----- -------- ------------ ----- --
-- - ----- -------- ------------ ---- --
-- - ----- -------- ------------ ---- --
-- - ----- ---- ------ ------------ ----- - -

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60056cc681e8991b448e6478

纠错
反馈