浅谈react中的immutable

最新推荐文章于 2023-07-10 17:13:40 发布
最新推荐文章于 2023-07-10 17:13:40 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： react redux 原生js 文章标签： reactjs javascript npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41548835/article/details/106766946
版权
原生js 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
redux
4 篇文章 0 订阅
订阅专栏
react
2 篇文章 0 订阅
订阅专栏

immutable不可变对象

介绍一下基本概念：
facebook工程师历时三年时间打造，与react同期出现，但是没有被默认放到React工具集中，它内部实现了一套完整的数据持久化，里面有很多常见的数据类型 Collection List Map Set等。

里面有三种重要的数据解构:

  1. Map:键值对集合，对应Object ES6中也有专门的Map对象
  2. List:有序可以重复的列表,对应于Array
  3. Set:无序并且不可重复key的数组

immutable原理

immutable实现的原理是(持久化数据结构),也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免深拷贝把所有的节点都复制一遍带来的性能损耗，immutable使用了结构共享，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享，如下图所示：
在这里插入图片描述
在这里插入图片描述

immutable在react中使用

在这里插入图片描述
编写自组件来展示数据
在这里插入图片描述
使用immutable改造
在这里插入图片描述
在这里插入图片描述

Shmily_zc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React中Immutable的使用
月光晒了很凉快的博客
09-28 2197
假设当前 redux 的大小为 1G，现在要修改 redux 树中的某个节点（节点的大小很小），我们就需要深复制整棵 redux 树，只为了修改很少的数据，这样对于性能的损耗是非常大的。于是我们使用 Immutable 来对这一现象进行优化，Immutable 只会深复制发生改变的节点及其祖先节点，然后修改后返回新数据。Immutable.js 出自 Facebook，是非常流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。
React的immutable(工作很少用)
tby_pr的博客
11-23 734
二、immutable.js 也是个框架,结构化数据共享 2.1、概述 官网：Immutable.js List (List) - Immutable 3.8.1 中文开发手册 - 开发者手册 - 云+社区 - 腾讯云 Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。 所有的更新操作都会返回新的值， 但是在内部结构是共享的，来减少内存占用(和垃圾回收的失效)。 持久化数据结构：这里说的持久化是用来描述一种数据结构
React的Immutable特性及使用Immer优化开发体验
最新发布
weixin_53068161的博客
07-10 973
React的Immutable特性及使用Immer优化开发体验
对immutable的理解？如何应用在react项目中？
zz130428的博客
12-11 602
其出现场景在于弥补 Javascript 没有不可变数据结构的问题，通过 structural sharing来解决的性能问题。内部提供了一套完整的 Persistent Data Structure，还有很多易用的数据类型，如。如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。Immutable，不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据。也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免。性能优化的时候，为了避免重复渲染，会在。
React入门（十一）之immutable
qq_38256266的博客
09-14 565
immutable一、immutabl1.1、Immutable.js介绍1.2、Immutable优缺点1.3、Immutable 中常用类型(Map，List)1.3.1、Map1.3.2、List1.4、Immutable 中常用方法1.5、Immutable + Redux 的开发方式二、mobx2.1、介绍2.2、装饰器Decorator2.3、mobx成员2.4、mobx-react成员2.5、Mobx 的使用 一、immutabl 1.1、Immutable.js介绍 更多详情请参考 immu
浅谈React中组件间抽象
08-28
主要介绍了浅谈React中组件间抽象,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈React碰到v-if
10-17
主要介绍了浅谈React碰到v-if,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈React高阶组件
12-12
前段时间在工作中写Hybrid页面时遇到了这样的一个场景，公司需要一系列的活动组件，在每个组件注册的时候都需要调用App端提供的一个接口。一开始也考虑了几种方式，包括mixin、组件继承以及react高阶组件。但经过了...
浅谈React Event实现原理
01-19
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同: React事件绑定属性的命名采用驼峰式写法，而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的...
详解Immutable及 React 中实践
10-18
Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这篇文章主要介绍了Immutable及 React 中的实践,需要的朋友可以...
react性能优化达到最大化的方法 immutable.js使用的必要性
10-20
主要为大家详细介绍了react性能优化达到最大化的方法，一步一步优化react性能的过程，告诉大家使用immutable.js的必要性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React中immutable的使用（优化级深拷贝）
Mr-yang的随笔
08-02 986
一、作用 immutable 对象是不可直接赋值的对象，它可以有效的避免错误赋值的问题 二、安装 $ npm install immutable 三、使用 在react中，immutable主要是防止state对象被错误赋值。 将js对象转成immutable对象 import { fromJS } from 'immutable'; const defaultState = fromJS({ todoList: [] }); 获取属性 state.get('todoList'); // 获取sto
immutable在react中的使用
weixin_43182021的博客
02-15 528
在使用redux时，组件派发出action，在reducer中处理时，我需要返回一个处理后的新的对象，也就是说不能对state进行直接的修改。immutable的作用就是，将state设置为不可变对象。以下是实现步骤。 按照依赖 npm install immutable store文件夹下reducer.js import { fromJS } from 'immutable'; ...
react immutable
wandoumm的博客
12-05 196
map list fromjs setin updatainimmutable实现的原理是(持久化数据结构),也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免深拷贝把所有的节点都复制一遍带来的性能损耗，immutable使用了结构共享，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享， 是一种持久化数据。它有一旦被创建就不会被修改的特性。 当你修改 immutable 对象的时候返回新的 immutable。但是原数据不会改变。Map() 原生ob
浅谈React项目中 Immutable Data
前端探险家的博客
08-25 378
Immutable是什么? Immutable，不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据；对 Immutable对象的任何修改或添加删除操作都会返回一个新的 Immutable对象； Immutable 实现的原理是 Persistent Data Structure（持久化数据结构）： 用一种数据结构来保存数据 当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费 也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免 deep
Immutable 详解及 React 中实践
leverage2009的博客
04-14 218
转自：https://segmentfault.com/a/1190000003910357初识Immutable，Mark Mark
Immutable详解以及搭配react进行性能优化
mapbar_front的博客
04-01 2263
当前的JavaScript语言存在的两个重要问题 JavaScript语言对于对象和数组，采用了引用赋值的方式，这样做的好处，就是节省了内存，我们称这样的方式是Mutable。但是这也是一切问题的万恶之源。当一个项目越来越复杂的时候，Mutable带来的内存优势，几乎就是个鸡肋般的存在了。 var a = { name: 'mapbar_front', age: 27 }; var b = a...
ReactJS修炼之路（五）：Immutable.js的使用及setState的一个误区
沉淀
10-14 6338
问题这篇博客仅作为学习笔记，没有多少自己的东西，只有一个小误区，记录下来当做备忘。学习资料： Immutable.js Immutable 详解及 React 中实践 关于Immutable.js如何整合进React中，推荐阅读官方的文档和上面第二篇博客，下面不会说具体的使用方法，所以阅读到这里这篇博客算是结束了。下面说说我以前在setState中踩的坑，同时也回答了一个问题，为什么需要Immuta
Immutable 常用API简介
weixin_34174422的博客
08-15 254
本文主要整理了Immutable.js常用API的使用。 Immutable 是什么？ 关于Immutable的定义，官方文档是这样说的： Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler appl...
React 使用 Immutable
05-31
在 React 中，我们通常使用 Immutable 数据结构来管理应用的状态。Immutable 是一个不可变的数据结构库，它的主要思想是将数据作为不可变的值来处理，而不是作为可变的对象。 使用 Immutable 的好处是可以避免因为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值