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 ...
随机推荐
- Android 开发环境配置图文教程(jdk+eclipse+android sdk)
一 相关下载(1) java JDK下载:进入该网页: http://java.sun.com/javase/downloads/index.jsp (或者直接点击下载)如下图: 选择 Downloa ...
- 如何修改bootstrap模态框的backdrop蒙版区域的颜色?
参考地址: http://www.cnblogs.com/9miao/p/4988196.html 蒙板样式实现: 大家或许注意到了,在做模态弹出窗时,底部常常会有一个透明的黑色蒙层效果:在Boots ...
- [BZOJ4391][Usaco2015 dec]High Card Low Card dp+set+贪心
Description Bessie the cow is a huge fan of card games, which is quite surprising, given her lack of ...
- Gym - 100345H Settling the Universe Up(bitset)
https://vjudge.net/problem/Gym-100345H 题意: 给出一个图,求图中u能到达v的对数,并且u<v.并且会有更新和查询操作. 思路: bitset直接暴力,对于 ...
- 测试报告 之 testNG + Velocity 编写自定义html测试报告
之前用testNG自带的test-outputemailable-report.html,做出的UI自动化测试报告,页面不太好看. 在网上找到一个新的报告编写,自己尝试了一下,埋了一些坑,修改了输出时 ...
- Python day9函数部分
函数的学习:函数对于一门编程语言来说挺重要的,尤其是c语言,是完全使用函数来编写的 1.函数的定义:逻辑结构化和过程化的一种编程方法 def squre(x): "求一个数的平方 retur ...
- 关于new和delete
#include<stdlib.h> #include<iostream> using namespace std; int main(){ int *p=new int; / ...
- mapStateToProps,mapDispatchToProps的使用姿势
本文作者:IMWeb 黄qiong 原文出处:IMWeb社区 未经同意,禁止转载 前言 刚接触redux的时候,发现大家对mapDispatchToProps使用有几种方法,而且都跑通了,本文来介绍下 ...
- Java checked 异常 和 RuntimeException(运行时异常)
目录 一.运行时异常 1.什么是RuntimeExceptioin 2.运行时异常的特点 3.如何运用运行时异常 二.运行时异常和ckecked异常的区别 1.机制上 2.逻辑上 一.运行时异常 1. ...
- Python获取脚本所在目录的正确方法(转)
1.以前的方法如果是要获得程序运行的当前目录所在位置,那么可以使用os模块的os.getcwd()函数.如果是要获得当前执行的脚本的所在目录位置,那么需要使用sys模块的sys.path[0]变量或者 ...