因为在react中,react的生命周期中的setState()之后的shouldComponentUpdate()阶段默认返回true,所以会造成本组件和子组件的多余的render,重新生成virtual dom,并进行virtual dom diff,所以解决办法是我们在本组件或者子组件中的shouldComponentUpdate()函数中比较,当不需要render时,不render。

当state中的值是对象时,我们必须使用深拷贝和深比较!

如果不进行深拷贝后再setState,会造成this.state和nextState指向同一个引用,所以shouldComponentUpdate()返回值一定是false,造成state值改了,而组件未渲染(这里不管shouldComponentUpdate中使用的是深比较还是浅比较)。所以必须深拷贝。

如果不在shouldComponentUpdate中进行深比较,会造成即使state中的对象值没有改变,因为是不同的对象,而在shouldComponentUpdate返回true,造成不必要的渲染。

所以只能是深拷贝和深比较。

而深拷贝和深比较都浪费浏览器的性能,所以immutable登场了。

react中为什么要使用immutable的更多相关文章

  1. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  2. Immutable学习及 React 中的实践

    为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原 ...

  3. React渲染问题研究以及Immutable的应用

    写在前面 这里主要介绍自己在React开发中的一些总结,关于react的渲染问题的一点研究. 另外本人一直希望在React项目中尝试使用,因此在之前已经介绍过immutable的API,可以参看这里I ...

  4. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  5. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  6. 从 React 的组件更新谈 Immutable 的应用

    在介绍 Immutable 如何在 React 中应用之前,先来谈谈 React 组件是如何更新的. React 是基于状态驱动的开发,可以将一个组件看成是一个有限状态机,组件要更新,必须更新状态. ...

  7. react中 如何异步展示后台接口的提示消息

    调用接口后,后台会返回这样的一段信息提示:{"errCode":400002,"errMsg":"字段校验异常","data&qu ...

  8. React中组件间通信的方式

    React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

  9. React中diff算法的理解

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

随机推荐

  1. 【传输对象】kafka传递实体类消息

    工具类 负责对象字节数组的相互转换,传输数据用 package com.yq.utils; import java.io.ByteArrayInputStream; import java.io.By ...

  2. Select2下拉框总结

    用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下 ...

  3. js函数事件对象

    每个函数都有4个默认对象 arguments 保存着实际传入的参数,集合列表 return 有两个功能,打断函数和返回函数值 this 谁调用的函数,this就是谁 event 事件对象 事件 box ...

  4. 02_Python简单爬虫(熊猫直播LOL的up主,谁最强!)

    声明: 本文仅用于Python练手,并无任何恶意攻击行为! # 导入request模块 from urllib import request # 导入re模块 import re class Spid ...

  5. WPF基础学习笔记整理 (二) XAML

    基础知识: XAML:Extensible Application Markup Language, zammel: 用于实例化.NET对象的标记语言: XMAL使用树形逻辑结构描述UI: BAML: ...

  6. net网站发布-允许更新此预编译站点 及修改发布后内容

    我们可以通过如下的方法发布VS2010的网站: “生成”→“发布网站”:弹出对话框! 在打开的对话框中,有一个选项是至关重要的,那就是“允许更新此预编译站点”: “允许更新此预编译站点”这一项,默认情 ...

  7. [原][osg][粒子特效]spark粒子特效生成流程

  8. 爱阅app --- 答复功能改进建议

    共有四组评论,接下来一一答复. 第一组: 希望增加的功能: 1.希望能够继续完善书签功能,增加逐条删除书签功能. 2.能够在爱阅内部打开APP中提供的网址,用户选择一款阅读APP,当然不想每看一本新的 ...

  9. 音视频学习系列第(七)篇---MediaCodec的使用

    音视频系列 什么是MediaCodec MediaCodec是安卓官方提供的一套用于音视频编码和解码的API,该API是在安卓4.1(API 16)引入的,因此只能用于4.1以上的手机 MediaCo ...

  10. robot 批处理文件

    robot自带的ride工具不好用,就像填表格似的写脚本,太拘束.所以一直在用sublime text写robot脚本,但是也有问题:用sublime text写的脚本,只能运行一个文件的case,并 ...