react nativ react ImmutableJS

  • Z时代
  • 2024-01-10
  • 分类：综合

react

react nativ react ImmutableJS

用react native 撸了一个APP，后来APP里面有分享页面然后又用react撸了一个WebApp。

由于JS语言的灵活多变，为了不篡改原数据，在程序里面用了浅克隆甚至是深克隆（循环递归），克隆会造成性能瓶颈，资源浪费。

后来为了优化性能就查资料找到了Immutable.js。

优点：

  1. 每次对Immutable对象的操作返回的都是一个新对象，不会出现“篡改原数据”

  2. API多。

  3. clone行为自下而上，共同部分会被保留，自己以上的节点才会被操作，性能更好。

Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。请看下面动画

4，Map：键值对集合，对应于 Object，ES6 也有专门的 Map 对象，List：有序可重复的列表，对应于 Array，

      Set：无序且不可重复的列表。

5，性能优化省内存。

6，数据天生不可变，不用加锁，并发安全。

缺点：

   1，新的API，

   2，引入了新的JS资源文件变大。

   3，容易与原生对象混淆。

ImmutableJS的安装：

      

npm install immutable

如果项目用了redux哒话建议安装 redux-immutable

现在说一些immutable哒基本用法：

    1，两个 immutable 对象可以使用 === 来比较

（判断两个对象是否相等）

       2，immutable.is(map1，map2)

 ； （比较两个对象的值是否相等）

       3，原生js转换为immutableData

 ： Immutable.fromJS([1,2]) // immutable的 list

                                                            Immutable.fromJS({a: 1}) // immutable的 map

                 从immutableData 回到 JavaScript 对象 ：  immutableData.toJS()

至于具体使用见官网：http://facebook.github.io/immutable-js/docs/

   





以上是 react nativ react ImmutableJS 的全部内容， 来源链接： utcz.com/z/382638.html

回到顶部