React 做性能优化时有一个避免重复渲染的大招,就是使用 shouldComponentUpdate()
,但它默认返回 true
,即始终会执行 render()
方法,然后做 Virtual DOM 比较,并得出是否需要做真实 DOM 更新,这里往往会带来很多无必要的渲染并成为性能瓶颈。
当然我们也可以在 shouldComponentUpdate()
中使用使用 deepCopy 和 deepCompare 来避免无必要的 render()
,但 deepCopy 和 deepCompare 一般都是非常耗性能的。
Immutable 则提供了简洁高效的判断数据是否变化的方法,只需 ===
和 is
比较就能知道是否需要执行 render()
,
而这个操作几乎 0 成本,所以可以极大提高性能。修改后的 shouldComponentUpdate
是这样的:
import { is } from 'immutable';
shouldComponentUpdate: (nextProps, nextState) => {
return !(this.props === nextProps || is(this.props, nextProps)) ||
!(this.state === nextState || is(this.state, nextState));
}
最近才开始学习immutable,还没有详细的学习笔记 ,现在这里先记下几个网址,方便后面仔细的看
深拷贝和immutable的区别是:深拷贝是将原数据完全复制一份,各是各的,而immutable是新的数据是保留了变化的,共用没有变化的数据
搞定immutable.js:http://boke.io/immutable-js/
Immutable 详解及 React 中实践:https://www.w3ctech.com/topic/1595
React + Redux + Immutablejs开发总结
详细学习:http://www.tuicool.com/articles/YBbEJzJ
还可以学习;http://www.cnblogs.com/samwu/p/5457031.html