react icon indicating copy to clipboard operation
react copied to clipboard

你对immutable有了解吗?它有什么作用?

Open careteenL opened this issue 6 years ago • 2 comments

careteenL avatar Apr 17 '20 03:04 careteenL

  • 1、Immutable实现的原理 Immutable实现的原理是利用结构共享形成持久化数据结构,也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable使用了结构共享,即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。
  • 2、Immutable的优点
  • (1)节约内存 JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象。为了解决这个问题,一般的做法是使用shallowCopy(浅拷贝)或 deepCopy(深拷贝)来避免被修改,但这样做造成了CPU和内存的浪费。Immutable 可以很好地解决这些问题。
  • (2)Undo/Redo,Copy/Paste,时间轴等功能容易实现 因为每次数据都是不一样的,只要把这些数据放到一个数组里储存起来,想回退到哪里就拿出对应数据即可,很容易开发出撤销重做这种功能。
  • (3)并发安全 Immutable Data一旦创建,就不能再被更改,也就不需要并发锁。
  • 3、Immutable使用
  • (1)与React搭配使用,Immutable简洁高效的判断数据是否变化,提高渲染速度及性能
  • (2)与Redux/flux搭配使用

careteenL avatar Apr 19 '20 10:04 careteenL

  • immutable是实现Immutable data的库,这个库有大量的api可以产生不可被修改的数据,对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutable对象。其实现原理是持久化数据结构,相对于深拷贝而言,通过旧数据来创建新数据的时候,只修改发生变化的节点及其父节点,他们节点保持共享,性能更好,处理速度更快。
  • 跟React配合使用能提高性能:一方面如果在state中保存了一份有深层结构的引用类型的数据,如果没有Immutable.js,则需要深拷贝一份再做修改(Object.assign及react中的setState都是属于浅拷贝)。而用Immutable.js将state中的数据包装一下,不需深拷贝就可以直接修改。另一方面由于修改后返回的是新对象,React.js只需要在oldState.obj === newState.obj这一层就能判断出obj产生了变化,不需要深入obj的深层结构。

careteenL avatar Apr 19 '20 10:04 careteenL