React组件开发小记(三)——你为什么需要shouldComponentUpdate

   在谈到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的不可变数据。(太晚了,待续。。。。)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 12,462评论 2 35
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 8,879评论 1 10
  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 5,800评论 0 1
  • 小时侯总是好奇,自己是那儿来的呢,也总是追着大人问了又问,呵呵,好像在捕捉自己前世的影子。 再大点又总是怀疑,妈妈...
    云可彦阅读 1,586评论 0 0