关于React的组件优化笔记

 

React组件的重新渲染需要通过shouldComponentUpdate()这个函数，然后再进行diff比较，最后判断哪些DOM需要重新构造。

 

这样就造成了有些没有改变的基本变量也会被重新渲染，这样消耗了性能。

 

我们可以使用react-addons-pure-render-mixin这个插件来进行性能的优化。

 

pureRenderMixin进行重新优化shouldComponentUpdate

 

this.pureRenderMixin.shouldComponentUpdate = this.shouldComponentUpdate;

 

这里面的shouldComponentUpdate会对prevState和nextState以及prevProps和nextProps进行比较，如何他们保持一致就会返回false，这样就不会进入diff算法，也就不会消耗不必要的性能。

 

但是pureRenderMixin只能进行浅比较，遇到对象和数组就无法进行比较了。对象在进行修改了之后，还是原来的地址，这样就会导致无法进行重新渲染。

 

所以在这里需要使用到Immutable来进行对象的比较。Immutable的好处是可以提高复制效率和更好的进行比较。它使得对象不可被改变，如果被改变，那么就会重新创建一个新的对象，并且copy原来的数据。

 

这样一来，对象也可以进行比较，如果被修改，也会被重新渲染。