什么是 immutable-trees
immutable-trees 是一个基于 Immutable.js 打造的可持久化数结构工具包。它提供了对包括 Map、List、Set、Record 和 Seq 在内的数结构的创建、读取、更新等操作。它的使用方法简单、易于理解，可以大幅度提高 JavaScript 代码的可读性、可维护性。本文将详细介绍 immutable-trees 的使用方法和使用场景。
安装
我们首先需要使用 npm 安装 immutable-trees：
--- ------- ---------------
使用场景
Redux
在 Redux 中，state 是单一对象存储的，每一次的修改都需要深拷贝一份，然后再返回给 store。这样做的原因是如果直接去修改原有的 state，那么所有的订阅都会被激发，导致不必要的渲染。而 immutable-trees 提供了一种更简洁且效率更高的解决方案。
------ - --- - ---- ----------------- ----- ----- - ----- ------ -- ----- --------- --------- --------- -- -- -- ----- -- ---- ---------------------------------- -- --------- --------- --------- -- -- ----- -- ----- ----- -------- - ---------------------- ------- -- ----- - -- -------------------------------------- -- - -- -- ----- -- ---- ----- ----------- - -------------------- --- ------------- ---------------------------------------- -- -------------- --------- ---------
React
在 React 中，由于 this.setState() 方法只能用于 class 组件，并且没有提供深比较的功能，因此我们需要手动对 state 进行深比较操作。而 immutable-trees 提供了与 React 集成的解决方案，并大大提高了效率。在组件中，我们通常可以将组件的 state 和 props 转换成 immutable 对象，然后配合 shouldComponentUpdate 进行深度比较。
------ ------ - --------- - ---- -------
------ - --- - ---- -----------------
----- ----------- ------- --------- -
----- - -
----- -----
----- --------- --------- ----------
------ -
--
-
-------------------------------- ---------- -
------ -------------- --- ---------------
-
----------- - -- -- -
----- ------- - -------------------------------- ------- -- ----- - --
---------------
----- -------
--
-
-------- -
------ -
-----
-
------------------------------------------ ------ -- -
-- ----------------------
--
-
------- -------------------------------- -----------
------
-
-
-immutable-trees API
Map
Map 是 immutable-trees 中最常用的一种数结构。它类似于 JavaScript 中的 Object，但是它的 key 可以是任何类型而不只是字符串。Map 中的值可以通过 setIn() 方法进行设置，并且该方法会返回一个新的 Map。我们可以通过 getIn() 方法获取存储在 Map 中的值。另外，Map 的大小可以通过 size 属性来获取。
------ - --- - ---- ----------------- ----- --- - ----- ----- ------- ---- --- -------- ----------- ---------- ---------- -- -- -- ---- -------------------------------- -- ------ -- -- --- ----- ------ - ------------------ --- ---------------------------------- -- -- -- -- ------- ----- --------- - --------------------- --- ---------- ----------------------------------------- -- ----------- ---------- ----------
List
List 是 immutable-trees 这个库提供的另一中数结构，它类似于 JavaScript 中的 Array。List 中的值可以通过 setIn() 方法进行设置，并且该方法也会返回一个新的 List。我们可以通过 getIn() 方法获取存储在 List 中的值，List 的大小可以通过 size 属性来获取。与普通的数组不同的是，List 会提供一些自带的方法，例如 push()、pop() 和 shift() 等。
------ - ---- - ---- ----------------- ----- ---- - -------------- --------- ---------- -- --- - --- ---------------------------- -- -------- -- ------- ----- ------- - --------------- ------------- ------------------------------- -- ------------ -- --- - --- ----- ---------- - ------------------ ---------------------------------- -- --------
Set
Set 也是 immutable-trees 提供的一种数结构，顾名思义，Set 存储的值必须是唯一的。Set 中的值可以通过 add() 方法进行添加，并且该方法也会返回一个新的 Set。我们可以通过 has() 方法来判断一个值是否在 Set 中，Set 的大小可以通过 size 属性来获取。
------ - --- - ---- ----------------- ----- --- - ------------- --------- ---------- -- -- ---- --- --- - ---------------------------- -- ----- -- ------- ----- ------ - --------------- ------------------------------- -- ---- -- ------ ----- --------- - -------------------- ------------------------------------ -- -----
Record
Record 可以让我们快速创建一种新的自定义数结构。我们可以使用 Record() 方法来创建一个自己的数结构，并定义默认值。
------ - ------ - ---- ----------------- ----- ---- - -------- --------- ------- ------ ------- -- ----- ------ - ------ --------- ------- ------ ------------------- -- ------------------------------------ -- -------------------
Seq
Seq 是一种有趣的应用，它可以针对某个 Collection 对象创造一个惰性操作序列，避免执行多余的数组遍历。
------ - ---- --- - ---- ----------------- ----- --- - - -- -- -- -- -- - - ----- --- - -------- ----- --- - -------- ----- ------ - ---------------- -- ----- - - --- ------------ -- ----- -- -- -------------------------- -- - -- -- -- - -
总结
immutable-trees 是值得推广和使用的一种数结构工具包，它可以大大提高代码的可读性和可维护性，避免了意外的修改，从而减轻了代码测试的负担。本文对 immutable-trees 的使用方法进行了详细的介绍，并提供了使用场景和 API 支持。对于需要使用该库的开发者，希望本文提供了一些参考和指导。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005609581e8991b448deca4