在谈到React优化的时候，shouldComponentUpdate方法是最简单直接的优化方式。如果你在render方法中随便打印一点东西（console.log(...)），你会发现console.log许多次，说明你的组件渲染了很多次。而在很多情况下你会发现有很多莫名其妙的打印，尤其是在层级比较深的组件中。
如下图：
tree.png
如果想只渲染红色这一分支，如果不做优化，黄色部分是额外浪费渲染的部分。
你调用了setState或者传入了不同的 Props 的时候，shouldComponentUpdate会默认全部返回true，React 就会重渲染组件。return false就是为了减少额外渲染的这部分。但是这个方法有个缺陷。就是如果你只想让第一个红色组件不重新渲染，而在这个组件上使用了return false，会导致其所有的子组件都不重新渲染。但这个显然不是我们想要的效果。
比较适合使用componentShouldUpdate组件是：使用只负责渲染的组件或者是组件树中较深位置的组件。
shouldPureComponentUpdate方法是基于shouldComponentUpdate的一种比较当前 State 以及 Props 未来差异的方法。这个方法对对象进行了浅比较。什么是浅比较？举个例子，如果一个数字从1变成了2，这个是可以比较出来的，如果是数组中一个项改变了，这个 是无法比较出来的。而深比较又会带来一定的消耗。
如何减少比较来降低消耗？这就又要引入不可变数据结构（不可变数据是指一旦创建就不能被修改的数据）了。Immutable.js可以实现js的不可变数据。（太晚了，待续。。。。）
网友评论