01基础

2017-10-30  本文已影响0人  我_巨可爱

immutable意义

它是提供了一种不可改变的数据结构

使用场景

js中对象都是参考类型,当a,b都指向某个对象,通过a改变对象,发现b对应的对象也改变了。解决这一问题的方式,过去的方式是deep-clone

// jQuery 中提供深拷贝
var config = $.extend(true,{},defaultConfig,initConfig)

但是深拷贝效率较低,可以使用 immutable

  1. 比如,频繁操作state或者store,配合immutableJS更快,更安全,更方便
  2. Immutable 使用了结构共享,如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其他节点进行共享

常用数据结构

  1. Map,键值对集合
  2. List,有序可重复列表
  3. Set,无序不可重复的列表

优点

  1. 降低 Mutable 带来的复杂度
  2. 节省内存
  3. 易于开发撤销功能
  4. 并发安全,暂时然并卵
  5. 拥抱函数式编程,应该就是面向过程式编程

缺点

  1. 16k大小的文件
  2. 容易和原生对象混淆,使用严格的命名规范进行区别,比如所有 Immutable 类型对象以 $$ 开头,并且使用Immutable.formJS

更多认识

两个 Immutable 对象比较

  1. 两个 Immutable 可以使用 '===' 进行比较,比较内存。但即使两个对象的值是一样的,也会返回 false。因此可以使用Immutable.is(map1,map2)进行比较
  2. Immutable.is比较的是两个对象的hashCode或者valueOf

区别

  1. Object.freeze和const,都可以达到对象被篡改的功能,但他们是浅拷贝。
  2. 使用freeze后,冻结对象的属性对应一个对象,该对象依旧可以改变。
  3. 使用const则是不允许直接改变对象,但是改变对象的属性是可以的

Cursor概念

当数据嵌套非常深,为了便于访问深层数据,Cursor提供了可以直接访问深层数据的引用

// 需要引入 immutable 和 cursor
let data = Immutable.fromJS({a:{b:{c:1}}});
let cursor = Cursor.from(data,['a','b'],newData => {
    // 当 cursor 或者其他 cursor 执行update时调用
    console.log(newData);
})
cursor.get('c');  // 1
cursor = cursor.update('c',x => x + 1);
cursor.get('c');  // 2
上一篇 下一篇

猜你喜欢

热点阅读