react中为什么要使用immutable
因为在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的更多相关文章
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- Immutable学习及 React 中的实践
为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原 ...
- React渲染问题研究以及Immutable的应用
写在前面 这里主要介绍自己在React开发中的一些总结,关于react的渲染问题的一点研究. 另外本人一直希望在React项目中尝试使用,因此在之前已经介绍过immutable的API,可以参看这里I ...
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
- 从 React 的组件更新谈 Immutable 的应用
在介绍 Immutable 如何在 React 中应用之前,先来谈谈 React 组件是如何更新的. React 是基于状态驱动的开发,可以将一个组件看成是一个有限状态机,组件要更新,必须更新状态. ...
- react中 如何异步展示后台接口的提示消息
调用接口后,后台会返回这样的一段信息提示:{"errCode":400002,"errMsg":"字段校验异常","data&qu ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
随机推荐
- 【第二十三章】 springboot + 全局异常处理
一.单个controller范围的异常处理 package com.xxx.secondboot.web; import org.springframework.web.bind.annotation ...
- ACM-ICPC 2018 南京赛区网络预赛 E AC Challenge 状压DP
题目链接: https://nanti.jisuanke.com/t/30994 Dlsj is competing in a contest with n (0 < n \le 20)n(0& ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- Unity3D学习笔记(七):叉乘和四元素
向量的叉乘: 数学运算:a(ax,ay,az) x b(bx,by,bz) = c(aybz-azby,azbx-axby,axby-aybx) 几何意义:得到一个新的向量,同时垂直于a向量和b向量, ...
- NYOJ 116 士兵杀敌(二)(二叉索引树)
http://acm.nyist.net/JudgeOnline/problem.php?pid=116 题意: 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的 ...
- IL and 堆于栈
CIL的基本构成+CIL操作码速记表+CIL操作码大全速查 引用类型:引用类型存储在堆中.类型实例化的时候,会在堆中开辟一部分空间存储类的实例.类对象的引用还是存储在栈中. 值类型:值类型总是分配在它 ...
- 关于Mybatis 的 Mapped Statements collection does not contain value for 异常 解决方案
查看堆栈信息: at org.apache.ibatis.session.Configuration$StrictMap.get(Configuration.java:595) at org.apac ...
- 升级php7一些需要注意的地方
1.升级过程涉及代码的主要处理的就是几个扩展(mysql.mssql .mcrypt.ereg)使用到的一些废弃函数(call_user_method.call_user_method_array等) ...
- jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
- ORA-01940:无法删除当前已连接的用户
当时时间比较着急,直接采取了釜底抽薪的办法——拔网线,这招很管用,再次执行drop user就成功了.考虑到以后不一定所有场合都允许你采取这种简单粗暴的办法,就在虚拟机上重现了这个报错,寻求一种较为温 ...