React 不可变数据Immutable

 

1, 为何要用到不可变数据 ?

从React渲染组件性能考虑，使用旧数据建立新数据时，要保证旧数据同时可用，

而且没有变化的部分还可用，目的是尽可能减小没必要要的渲染和重绘。

 

若是是简单的赋值给一个新的变量，新旧对象只是名称不一样，对比不出具体的值变化。其次，也会带来引入对象浅拷贝的问题，形成不可预测的展现值。

这对react响应从新渲染形成了性能影响，或不能及时更新dom。

2, 可是深拷贝，会占用大量的内存和cpu特别是在复杂结构中，如何处理 ？

引入 Immutable.js 不可变数据插件，使用告终构共享，若是对象中只有一个节点发生变化，只修改这一个节点和受它影响的节点，

其余节点共享。

是Facebook工程师 Lee Byron3年时间打造，实现来一套持久化数据结构，

如：Collection  List  Map  Set  Record等，获取数据和普通对象不一样

如：map.get('key') 获取对象值

如：array.get(0) 至关于 array[0]

3, 示例

import { Map }  from 'immutable';

let a = Map({

  select: 'users',

  filter: Map({ name: 'Kim' })

})

let b = a.set('select', 'people');

 

a === b // false

a.get('filter') === b.get('filter');  // true .

 

或者使用es6 结构赋值

obj1 = { ...obj1 , a:2 } // 旧对象必须写在前面。

obj1 = { ...obj1 } // 表示 浅复制，不是拷贝的副本是值的引用。

 

4， 疑问

为啥不用JSON.stringify()  JSON.parse()  构建新的对象呢，何须耗费精力够一个 Immutable.js  感受对react性能提高有点劳动大于回报，不理解。。