immutable.js

ReactJs 性能

React.js是一个UI框架，为了解决更新的问题，React.js使用了virtual dom，virtual dom通过diff修改dom，来实现高效的dom更新。

对于react的来说，如果父组建有多个子组建。当父组建render。下面的子组建都得跟着render。可是很多子组建里面是冤枉的啊！！很多子组建的props 和 state 然而并没有改变啊！！虽然virtual dom 的diff 算法很快。。但是这也造成了很大的性能浪费。

ReactJS shallowEqual的问题

• 很多时候，父组件向子组件传props的时候，可能会传一个复杂类型，比如。

 render() {
    const {name,age,persons} = this.state
    return (
      <div>
...省略.....
        {persons.map((person,index)=>(
          <Person key={index} detail={person}></Person>
        ))}
      </div>
    )
  }

当person是一个复杂类型。。这就埋下了隐患，，在演示隐患前，我们先说说shallowEqual，是个什么东西，shallowEqual其实只比较props的第一层子属性是不是相同，就像上述代码，props 是如下
{
detail:{
name:”123”,
age:”123”}
}

他只会比较props.detail ===nextProps.detail
那么问题来了
如果我想修改detail的时候考虑两种情况

• 情况一，我修改detail的内容，而不改detail的引用

这样就会引起一个bug，比如我修改detail.name,因为detail的引用没有改，所以
props.detail ===nextProps.detail 还是为true。。
所以我们为了安全起见必须修改detail的引用，（redux的reducer就是这么做的） 或者对其进行深拷贝object.assign

• 情况二，我修改detail的引用

这种虽然没有bug，但是容易误杀，比如如果我新旧两个detail的内容是一样的，岂不是还要，render。。所以还是不完美，，你可能会说用 深比较就好了，，但是 深比较及其消耗性能，要用递归保证每个子元素一样。

主角immutable.js登场

immutable.js是由facebook开源的一个项目，主要是为了解决javascript Immutable Data的问题，通过参考hash maps tries 和 vector tries提供了一种更有效的方式。

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

Immutable的所有数据都是不可改变型，而且提供了一系列接口供我们创建数据、更新数据、合并数据的api

API https://facebook.github.io/immutable-js/docs/#/

三种非常重要的数据结构

• Map：键值对集合，对应于 Object，ES6 也有专门的 Map 对象（JAVA Map）
• List：有序可重复的列表，对应于 Array
• Set：无序且不可重复的列表 （JAVA set）

重要方法：

使用 Immutable.fromJS 而不是 Immutable.Map 或 Immutable.List 来创建对象，这样可以避免 Immutable 和原生对象间的混用。

Immutable.fromJS可以将普通的js对象深层次的转化为Immutable对象
Immutable.Map 只能浅层次的转化为immutable对象

immutable 内部使用了 Trie 数据结构来存储

Immutable.is equal等方法比较的是两个对象的 hashCode 或 valueOf（对于 JavaScript 对象）。只要两个对象的 hashCode 相等，值就是一样的。这样的算法避免了深度遍历比较，性能非常好。

http://www.w3ctech.com/topic/
1595
https://facebook.github.io/immutable-js/
https://segmentfault.com/a/1190000003910357