RN知识ReactNative 自定义组件

RN - immutable 简单学习、用法(转)

2018-02-26  本文已影响24人  精神病患者link常

转自 - https://segmentfault.com/a/1190000002909224
转自 - https://zhuanlan.zhihu.com/purerender/20295971
转自 - https://www.w3cplus.com/javascript/immutable-js.html

(转)什么是 Immutable Data

Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。请看下面动画:

网络配图.gif

Immutable有什么用

Immutable Data是指一旦被创造后,就不可以被改变的数据。
通过使用Immutable Data,可以让我们更容易的去处理缓存、回退、数据变化检测等问题,简化我们的开发

Immutable的优点

  1. 使得数据可以被回溯,由于每次更改都不改变原数据,类似撤回等功能很容就可以实现
  1. 节省内存,Immutable.js 使用了 Structure Sharing 会尽量复用内存,甚至以前使用的对象也可以再次被复用。没有被引用的对象会被垃圾回收。
  1. Immutable 本身就是函数式编程中的概念,纯函数式编程比面向对象更适用于前端开发。因为只要输入一致,输出必然一致,这样开发的组件更易于调试和组装。

使用 Immutable 的缺点

  1. 需要学习新的 API
  1. 增加了资源文件大小
  1. 容易与原生对象混淆

这点是我们使用 Immutable.js 过程中遇到最大的问题。写代码要做思维上的转变。

虽然 Immutable.js 尽量尝试把 API 设计的原生对象类似,有的时候还是很难区别到底是 Immutable 对象还是原生对象,容易混淆操作。

Immutable.js 的 API 主要包含以下几部分:

例:Record 用法

Record 在表现上类似于 ES6 中的 Class,但在某些细节上还有所不同。通过 Record() 可以创建一个新的 Record 类,使用该类可以创建具体的 Record 实例,该实例包含在 Record() 构造函数中声明的所有属性和默认值。如果 Record 实例中的某个属性被删除了或者没有声明,则只会将实例中的属性值设置为默认值

创建 Record 实例 const A = Record({ a: 1, b: 2 });
 const r = new A({ a: 3 }); 
// => Record { "a": 3, "b": 2 } 

删除实例属性 const rr = r.remove('a');
 // => Record { "a": 1, "b": 2 }

此外,Record 实例还具有扩展性:

class ABRecord extends Record({a:1,b:2}) {
  getAB() {
    return this.a + this.b;
  }
}

var myRecord = new ABRecord({b: 3})
myRecord.getAB()
// => 4
import Immutable from 'immutable';

const ARecord = Immutable.Record({
    
    myID: null,
    myName: null,
    myPhone: null,
    myAddress: null,
    myAge: null,
    mySex:null,
    
});

export default class MyRecord extends ARecord {
    getMyAge(){
        return 18;
    }
}

let myrecord = new MyRecord({
    myID: 737427428,
    myName: '张三',
    myPhone: '1234567890',
    myAddress: '北京',
    myAge: 18,
    mySex:'男', 
    // 如果其中一个属性没声明,就是默认的 null
});

myrecord.abc();
上一篇下一篇

猜你喜欢

热点阅读