react Immutability 理解
在开发过程中经常会遇到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 理解的更多相关文章
- 对React的理解
转自:http://www.cocoachina.com/webapp/20150721/12692.html 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了R ...
- React Context 理解和使用
写在前面 鉴于笔者学习此内容章节 React官方文档 时感到阅读理解抽象困难,所以决定根据文档理解写一篇自己对Context的理解,文章附带示例,以为更易于理解学习.更多内容请参考 React官方 ...
- React入门理解demo
1.React文档结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 深入理解React、Redux
深入理解React.ReduReact+Redux非常精炼,良好运用将发挥出极强劲的生产力.但最大的挑战来自于函数式编程(FP)范式.在工程化过程中,架构(顶层)设计将是一个巨大的挑战.要不然做出来的 ...
- 深入理解 React 的 Virtual DOM
React在前端界一直很流行,而且学起来也不是很难,只需要学会JSX.理解State和Props,然后就可以愉快的玩耍了,但想要成为React的专家你还需要对React有一些更深入的理解,希望本文对你 ...
- 你要的 React 面试知识点,都在这了
摘要: 问题很详细,插图很好看. 原文:你要的 React 面试知识点,都在这了 作者:前端小智 Fundebug经授权转载,版权归原作者所有. React是流行的javascript框架之一,在20 ...
- React 初探
React 简单介绍 先说 React 与 React Native 他们是真的亲戚,可不像 Java 和 Javascript 一样. 其实第一次看到 React 的语法我是拒绝的,因为这么丑的写法 ...
- React+Redux开发实战项目【美团App】,没你想的那么难
README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...
- React 深入系列1:React 中的元素、组件、实例和节点
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...
随机推荐
- 通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题
1.前言 最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看.然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文 ...
- 【ES】学习2-搜索
1.空搜索 返回所有索引下的所有文档 GET /_search 设置超时.timeout 不是停止执行查询,它仅仅是告知正在协调的节点返回到目前为止收集的结果并且关闭连接.在后台,其他的分片可能仍在执 ...
- tomcat 输入学习
Tomcat学习—Tomcat7 修改/webapps/ROOT发布路径(Linux和windows环境) https://blog.csdn.net/u010648555/article/detai ...
- php三种无限分类
无限分类,是指从一个最高分类开始,每个子分类都可以分出自己的若干个子分类,可以一直分下去,称为无限级分类: 下面是对省市县的无限极分类的列子.数据库如图: 代码示例如下: /** * @Descrip ...
- cf1061D 贪心+multiset 好题!
cf上的思维题真好! 本题是在模拟的基础上贪心即可:将n段时间按照左端点(右端点为第二关键字)从小到大排序,然后遍历每一个时间段. 对于每一个时间段[li,ri],先找到multiset中最靠近li但 ...
- hdu1890 splay维护区间翻转
这题的建模有点不太一样,是按结点横坐标赋予键值的 同时每次rotate和splay时都要注意下往上往下更新 /* 先建立好splay tree,将结点按num/输入顺序排序,遍历时每次将当前结点提到根 ...
- hdu3255扫描线:带权面积交转体积交
手贱把i打成j,调了半天 /* 面积并转体积并,长方体高度为作物价格 算体积并:在笛卡尔坐标系的y轴上建立线段树cnt记录区间被完全覆盖的次数,sum记录区间被覆盖的总长度 以平行于xoy的平面从下往 ...
- SPLAY,LCT学习笔记(二)
能够看到,上一篇的代码中有一段叫做find我没有提到,感觉起来也没有什么用,那么他的存在意义是什么呢? 接下来我们来填一下这个坑 回到我们的主题:NOI 2005维修数列 我们刚刚讨论了区间翻转的操作 ...
- python3 + selenium 使用 JS操作页面滚动条
js2 = "window.scrollTo(0,0);" #括号中为坐标 当不知道需要的滚动的坐标大小时: weizhi2 = driver.find_element_by_id ...
- ERP退货系统管理(四十五)
添加的存储过程:(添加退货申请信息的存储过程) CREATE PROCEDURE [dbo].[BioBackSendGoods_ADD] @SendBackID INT OUTPUT, ), @Ap ...