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