您的位置:首页 > Web前端 > React

react nativ react ImmutableJS

2017-08-15 21:44 246 查看
react nativ react ImmutableJS
用react native 撸了一个APP,后来APP里面有分享页面然后又用react撸了一个WebApp。
由于JS语言的灵活多变,为了不篡改原数据,在程序里面用了浅克隆甚至是深克隆(循环递归),克隆会造成性能瓶颈,资源浪费。

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

优点:

每次对Immutable对象的操作返回的都是一个新对象,不会出现“篡改原数据”
API多。
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/

   


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: