在开发过程中经常会遇到state里有数组和对象的情况,比如当用splice去改变数组再调用setState更新的时候,会发现并没有生效,这是因为react里的state是Immutability(不可变的),所以要保证state是Immutability,但是数组和对象并不是Immutability,这时需要用一些手段去保证Immutability。

1、状态类型是不可变类型(数值、字符串、布尔值、null、undefined)

  因为状态是不可变类型,所以直接赋一个新值即可

2、状态的类型是数组时(concat、slice、filter、ES6 spread syntax)

  数组的push、pop、splice等方法都会修改原数组,不能保证Immutability

3、状态的类型是对象时(Object.assign()、object spread syntax)

4、还可以使用一些Immutable的库

react中的state是Immutability有什么好处呢?

这里涉及到react的性能优化,react内部会维护一份UI(虚拟DOM),当组件属性或状态发生改变,react对应的虚拟DOM数据也会更新,不用更新真正的DOM,更加方便快捷,然后react会对现在和更新前的虚拟DOM进行比较,找出变化的元素,只有变化的元素会在真实DOM中更新,但是有时候一些DOM元素自身没有变化,但会被其他元素影响造成重新渲染,这个时候可以用shouldComponentUpdate方法来判断props或state是不是真的改变了(改变了返回true,否则返回false)。如果组件的属性和状态是Immutability的对象或值,就可以通过相等来比较了

react Immutability 理解的更多相关文章

  1. 对React的理解

    转自:http://www.cocoachina.com/webapp/20150721/12692.html 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了R ...

  2. React Context 理解和使用

    写在前面 ​ 鉴于笔者学习此内容章节 React官方文档 时感到阅读理解抽象困难,所以决定根据文档理解写一篇自己对Context的理解,文章附带示例,以为更易于理解学习.更多内容请参考 React官方 ...

  3. React入门理解demo

    1.React文档结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. 深入理解React、Redux

    深入理解React.ReduReact+Redux非常精炼,良好运用将发挥出极强劲的生产力.但最大的挑战来自于函数式编程(FP)范式.在工程化过程中,架构(顶层)设计将是一个巨大的挑战.要不然做出来的 ...

  5. 深入理解 React 的 Virtual DOM

    React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你 ...

  6. 你要的 React 面试知识点,都在这了

    摘要: 问题很详细,插图很好看. 原文:你要的 React 面试知识点,都在这了 作者:前端小智 Fundebug经授权转载,版权归原作者所有. React是流行的javascript框架之一,在20 ...

  7. React 初探

    React 简单介绍 先说 React 与 React Native 他们是真的亲戚,可不像 Java 和 Javascript 一样. 其实第一次看到 React 的语法我是拒绝的,因为这么丑的写法 ...

  8. React+Redux开发实战项目【美团App】,没你想的那么难

    README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...

  9. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

随机推荐

  1. listener failed: zbx_tcp_listen() fatal error: unable to serve on any address [[-]:20050]

    故障现象: 客户端报错:service zabbix-agent 启动后,端口没有被正常监听,服务端也无法正常连接 将客户端改为二进制文件安装也不能正常启动/usr/local/zabbix/sbin ...

  2. discuz3.4:在Centos6.5中安装过程

    参考文章:https://www.cnblogs.com/hehongbin/articles/5741270.html https://www.cnblogs.com/mitang/p/552454 ...

  3. Android studio下将项目代码上传至github包括更新,同步,创建依赖

    AS中设置GIT 一.开篇 本文讲如何使用Android Studio将项目上传到github,虽然讲上传github的文章很多,但是大部分都是使用Git Bash命令行,虽然效率高些,但是有点麻烦, ...

  4. 有关Math数学运算的js函数

    随机函数;  Moth.random()   //3.以下通过循环给数组每个元素赋值,随机数. // Math.random(); 可以随机0~1之间的任意数 [0,1) // alert(Math. ...

  5. 《剑指offer》-二叉搜索树与双向链表

    输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 题目的描述不是很习惯.题目的意思是把二叉树从左到右遍历,相当于双向链表的遍历. 其实 ...

  6. python使用ssdb的队列,用于替换canal+rabbitmq

    # pip install -i https://mirrors.aliyun.com/pypi/simple/ pyssdb import pyssdb c = pyssdb.Client('172 ...

  7. [HEOI2016/TJOI2016]序列

    题解: 很水的题目 首先容易发现每个位置实际上只有最大值是有用的 然后把条件变成dp[i]=max(dp[j]+1)(j<i,F[i]>G[j],G[i]>H[j]) 然后我研究了一 ...

  8. Codeforces 901C Bipartite Segments

    Bipartite Segments 因为图中只存在奇数长度的环, 所以它是个只有奇数环的仙人掌, 每条边只属于一个环. 那么我们能把所有环给扣出来, 所以我们询问的区间不能包含每个环里的最大值和最小 ...

  9. Codeforces Round #220 (Div. 2) D - Inna and Sequence

    D - Inna and Sequence 线段数维护区间有几个没有被删除的数,利用线段树的二分找第几个数在哪里,然后模拟更新就好啦. #include<bits/stdc++.h> #d ...

  10. k8s 使用详解

    转自:https://www.cnblogs.com/gaoyuechen/p/8685771.html