因为在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. 维特比算法Python实现

    前言 维特比算法是隐马尔科夫问题的一个基本问题算法.维特比算法解决的问题是已知观察序列,求最可能的标注序列. 什么是维特比算法? 维特比算法尽管是基于严格的数学模型的算法,但是维特比算法毕竟是算法,因 ...

  2. P1600 天天爱跑步

    lca真心不太会,这里只介绍60分做法,100的太难辣简单了就不介绍了 n<=1000 zz回溯爆搜 S[i]全部相等 这dfs序都不用lca的,2333,差分,然后输出判断一下是否是0(1到i ...

  3. C#入门经典 第六章 委托

    C#入门经典 第六章 6.6 委托的声明非常类似于函数,但不带函数体,且要使用delegate关键字. 委托的声明指定了一个返回类型和一个参数列表. 在定义了委托后,就可以声明该委托类型的变量. 接着 ...

  4. Educational Codeforces Round 57 (Rated for Div. 2)

    我好菜啊. A - Find Divisible 好像没什么可说的. #include<cstdio> #include<cstring> #include<algori ...

  5. LA 3027 合作网络

    https://vjudge.net/problem/UVALive-3027 题意: 有n个结点,初始时每个结点的父节点都不存在.你的任务是执行一次I操作和E操作,格式如下: I u v:把结点u的 ...

  6. hdu 5493 Queue 树状数组第K大或者二分

    Queue Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  7. Cocos2d-x学习笔记(十一)动作

    动作类Action是一切动作的祖先类.它有三个直接继承子类: FiniteTimeAction受时间限制的动作: Follow精灵跟随精灵的动作: Speed运动速度控制: 而FiniteTimeAc ...

  8. 使用uWSGI和nginx来设置Django和你的web服务器

    本教程针对那些想要设置一个生产web服务器的Django用户.它介绍了设置Django以使得其与uWSGI和nginx工作良好的必要步骤.它涵盖了所有三个组成部分,提供了一个web应用和服务器软件的完 ...

  9. 《Blue_Flke》 团队项目用户验收评审

    一.beta冲刺 beta冲刺第一.二天:https://www.cnblogs.com/ruanjgc/p/9226434.html beta冲刺第三天:https://www.cnblogs.co ...

  10. docker运行python3.6+flask小记

    docker新手. 目的:开发运行多个web api项目的时候,方便开发,兼顾部署. 方案大概这样: 1 隔离:系统运行在容器里,1容器只起1进程,代替在host起多个venv或虚拟机: 2调试和备份 ...