React+Immutable.js的心路历程

　　这段时间作的项目开发中用的是React+Redux+ImmutableJs+Es6开发，总结了immutable.js的相关使用姿式：

　　Immutable Data 顾名思义是指一旦被创造后，就不能够被改变的数据。能够经过使用Immutable Data，能够让咱们更容易的去处理缓存、回退、数据变化检测等问题，简化咱们的开发。

　　咱们知道 react.js很著名的就是它处理dom的作法，它是经过Virtual Dom来查看diff，而后再改动须要改动的Dom。可是有个问题当state更新时，若是数据没变，react也会去作Virtual Dom的diff，这就产生了浪费，其实这种状况其实很常见。

　　固然React 作性能优化时还有一个避免重复渲染的大招，就是使用生命周期 shouldComponentUpdate()，但它默认返回 true，即始终会执行 render() 方法，而后作 Virtual Dom 比较，并得出是否须要作真实 Dom 更新。

　　这个时候其实还有方案来解决这个问题，用PureRenderMixin，貌似也能够解决这个问题，在某些状况下进行性能加速。

import PureRenderMixin from 'react-addons-pure-render-mixin';

class FooComponent extends React.Component {

    constructor(props) {

        super(props);

        this.shouldComponentUpdate =PureRenderMixin.shouldComponentUpdate.bind(this);

}

render() {
    return <div className={this.props.className}>foo</div>;
    }
}

　　

　　其实就是, 实现了 shouldComponentUpdate, 它对当前及下一步的 props 和 state 进行比较，并当相等时返回 false，不进行渲染

　　看了下PureRenderMixin官方文档，This only shallowly compares the objects,Only mix into components which have simple props and state。

PureRenderMixin，它只是简单的浅比较，不适用于复杂的比较。

　　顺着刚刚的这条思路走，咱们能够在shouldComponentUpdate()内作判断，若是有props/state有变化，那么再进行render()，这个时候的问题就来了，你如何作比较，shallowly compare，达不到效果，deep compare则性能不好

　　这个时候immutable.js来了，使用immutable.js能够解决这个问题。

　　首先Immutable.js的拷贝,是当对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

import Immutable from 'immutable';

const initialState = Immutable.fromJS({ data: null });

　　

　　固然能够用deep-copy作到这一点，可是差异在于性能。每次deep-copy都要把整个对象递归的复制一份。而Immutable的实现像链表，添加一个新结点把旧结点的父子关系转移到新结点上。

生成immutable对象后，而后再在生命周期shouldComponentUpdate作作判断

shouldComponentUpdate(nextProps) {

    return !this.props.situation.equals(nextProps.situation);

}

　　对当前及下一步的 props 的immutable对象 进行比较，并当相等时返回 false，不进行渲染，只有为true的时候，才进行render()处理。

　　react+immutable这样就能够大大提高react的性能。