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/
用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/
相关文章推荐
- immutable.js 在React、Redux中的实践以及常用API简介
- 如何用React+Redux+ImmutableJS进行SPA开发
- The React.js Way系列之 通过使用 Immutable.js 的 Flux 建筑结构
- react+redux+router+webpack+immutable.js框架
- react性能优化达到最大化的方法 immutable.js使用的必要性
- JS -- Immutable.js & React & Redux
- React引用数据类型与immutable.js的使用实例
- 快讯:Facebook 将重新修改 React, Jest, Flow 和 Immutable.js 授权协议
- 基于React-Native及Redux的Immutable.js引入
- Immutable.js 以及在 react+redux 项目中的实践
- 基于React-Native及Redux的Immutable.js引入
- Immutable.js与React和Redux实践
- Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点?
- react.js 从零开始(七)React (虚拟)DOM
- Vue.js 很好,但会比 Angular 或 React 更好吗?
- React.js 官方文档翻译
- Reactjs入门官方文档(十一)【Thinking in React】
- React Js img 图片显示默认 占位符
- 【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
- 10 个打造 React.js App 的最佳 UI 框架