immutableJS的使用

最新推荐文章于 2023-10-26 21:30:00 发布
最新推荐文章于 2023-10-26 21:30:00 发布
阅读量435 收藏
点赞数 1
分类专栏： React 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43933771/article/details/119149400
版权

immutableJS的使用

数据可变性的问题

在React开发中，我们总是会强调数据的不可变性： 无论是对于类组件中的state，还是redux中管理的state都是不建议直接去修改state本身的； 事实上在整个JavaScript编码过程中，数据的不可变性都是非常重要的；

数据的可变性引发的问题（案例）：我们明明没有修改obj，只是修改了obj2，但是最终obj也被我们修改掉了；原因非常简单，对象是引用类型，它们指向同一块内存空间，两个引用都可以任意修改；

有没有办法解决上面的问题呢？进行对象的拷贝即可：Object.assign或扩展运算符 ，除此之外，想必大家知道更多的关于浅拷贝的方法。

这种对象的浅拷贝有没有问题呢？

（1）从代码的角度来说，没有问题，也解决了我们实际开发中一些潜在风险；

（2）从性能的角度来说，有问题，如果对象过于庞大，这种拷贝的方式会带来性能问题以及内存浪费；

有人会说，开发中不都是这样做的吗？ 但是虽然从来如此，便是对的吗？

认识immutableJS

为了解决上面的问题，出现了Immutable对象的概念： Immutable对象的特点是只要修改了对象，就会返回一个

新的对象，旧的对象并不会发生改变；但是这样的方式就不会浪费内存了吗？为了节约内存

最低0.47元/天 解锁文章
秃头的科比
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Immutable.js 原理与源码解析
purpose的博客
04-15 2662
Immutable.js 原理与源码解析前言参考资料 本文主要对于 Immtable.js 的一些基本原理并以其中的 Map 数据结构为例，结合代码对具体的实现进行分析。 实际上，各色博客、专栏中关于 Immutable.js 的各种相关资料已经介绍的相当详尽了，本文不过是拾人牙慧而已。 前言 “不可变（Immutable）数据”是什么？ 不可变数据是指一旦创建就不可再被修改的数据。看到这一定义，...
浅谈Immutable.js
JiaPeng366的博客
05-31 1288
最近在学习Immutable.js，正好遇见公司的每周技术分享会，把自己的一些总结和学到的记录下来，分享给大家。 Immutable.js 简介 Immutable.js是由 Facebook 工程师（ Lee Byron） 花费 3 年时间打造，与 React 同期出现，虽然没有被默认放到 React工具集里，但是它的价值还是非常大的。它内部实现了一套完整的持久化数据结构（ Persistent Data Structure ），还有很多易用的数据类型（像 List、Map）。有非常全面的函数式操作方法（
JS中的Immutable
QD的博客
05-23 1035
Persistent Data Structure（持久化数据结构） 也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。 Immutable 详解及 Reac
Immutable.js API 简介
BradenHan的专栏
09-13 348
Map():原生object转Map对象 (只会转换第一层，注意和fromJS区别)作用：用来创建一个新的Map对象代码实现//Map// 空Map代码实现// 增删改查（所有操作都会返回新的值，不会修改原来值）a: 1,b: 2，c: {d: 3});getIn用于深层结构访问// data3中的 a = 2// data4中的 d = 4。
Immutable.js介绍、Immutable的优缺点？Immutable 中常用类型Map，List？Immutable 中常用方法fromJS,toJS，is()
CIA的博客
12-28 1149
Immutable（ 不可改变的 ） Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象
immutablejs-for-beginners：本文档旨在帮助开始使用FB immutable.js的人，但同时又对原始文档感到困惑
02-05
immutablejs-for-beginners：本文档旨在帮助开始使用FB immutable.js的人，但同时又对原始文档感到困惑
Neox：ImmutableJS的替代方案，可与Redux钩子一起顺利使用
02-03
Neox安装npm install --save @neocoast/neox oryarn add @neocoast/neox用法import fromJS from '@neocoast/neox' ;const state = fromJS ( { loading : false , username : null ,} ) ;console ....
redux-immutablejs：Redux不可变设施
02-25
设置初始状态使用combineReducers可以使用Immutable 类型为createStore提供初始状态，即： import { createStore } from 'redux' ;import { combineReducers } from 'redux-immutablejs' ;import Immutable from '...
immutable-todomvc:使用 React、Flux 和 ImmutableJS 的 Todo MVC 示例
06-03
immutable-todomvc 使用 React、Flux 和 ImmutableJS 的 Todo MVC 示例在 2015 年 1 月的上， 基于他在工作发表了演讲， 。 接近尾声时，他展示了一个示例，如何将 、 和历史的概念合并到最初由创建的。 该示例提供...
reflux-immutable-todomvc:TodoApp 使用 React、Reflux 和 ImmutableJS 实现
06-10
使用 Reflux 和 ImmutableJS 的 TodoMVC 实现 使用，如在 React Conf 2015 和中 基线 - 建造 注意：需要gulp ( npm install -g gulp ) $ npm install $ gulp reactify $ gulp bundle 要运行该应用程序，请在浏览器...
谈谈你对immutable.js的理解？
tang18533952786的博客
02-14 117
Immutable.js是由 Facebook 工程师（ Lee Byron） 花费 3 年时间打造，与 React 同期出现，虽然没有被默认放到 React工具集里，但是它的价值还是非常大的。它内部实现了一套完整的持久化数据结构（ Persistent Data Structure ），还有很多易用的数据类型（像 List、Map）。有非常全面的函数式操作方法（ 像map、get、getIn、set、setIn、merge）。同时 API 也尽量与原生Js的 Object 和 Array 类似。
JS immutable组件
ma33xiao的博客
03-14 3281
介绍 更多信息 immutable中文：不变的，不可改变的 每次修改一个Immutable对象时都会创建一个新的不可变的对象，在新对象上操作并不会影响到原对象的数据。 安装 npm i immutable 一、Immutable优化性能的方式 Immutable实现的原理是持久化数据结构，也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免deepCopy把所有节点都复制一遍带来的性能损耗，Immutable使用了结构共享，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的
Immutable.js 以及在 react+redux 项目中的实践
weixin_33728268的博客
06-22 653
作者介绍：邹弓一，美团点评前端工程师，5年 Web 前端开发经验，现在是美团点评点餐团队的一员。 前言   本文主要介绍facebook推出的一个类库immutable.js，以及如何将immutable.js集成到我们团队现有的react+redux架构的移动端项目中。 本文较长（5000字左右），建议阅读时间： 20 min 通过阅读本文，你可以学习到： 什么是immutable.js,...
JavaScript中的可变（Mutable）、不可变（Immutable）和变量的赋值介绍
最新发布
cnds123的专栏
10-26 521
JavaScript中的不可变（Immutable）与可变（Mutable）和变量的赋值介绍
immutableJS持久化数据结构
05-11
Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。
Immutable.js
落枫秋歌
05-07 269
ImmutableJs出现背景 JavaScript中的Plain Object，一般是以引用形式存在的可变数据（Mutable Data），这样设计的目的可能是为了节省CPU与内存的开销；每次进行对象修改时直接改变对象本身（changed in-place rather than return a new object） 一般mutable data进行数据操作时比较简单，但是当在一些大型复杂应用中使用mutable data时可能会导致数据无法溯源，因为很多地方都可以修改这个数据，导致难以调试与维护；
使用Immutable js的一点体会
weixin_33700350的博客
05-17 316
项目中一直在使用Immutable js，最开始使用Immutable js，我的内心是抗拒的，简单的对象操作整得那么复杂，有必要吗。随着后面开发对数据操作非常频繁的项目后，渐渐发现了Immutable的闪光点； 现在就总结下使用Immutable时的一些体会； 一：什么是 Immutable Data Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对...
Immutable-js简介
小枫哥的博客
01-29 308
本篇只是对Immutable.js的简单介绍 什么是Immutable Data？ Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from function...
immutable的使用
XiaoHuangDiLHD的博客
12-07 527
immutable是用来避免开发者直接修改state的库。 我们首先要将state对象变为immutable对象。使用fromJS方法。 import { fromJS } from 'immutable' //使用immutable对象，是state数据不可变，是防止我们直接修改state数据的一个库 const defaultState = fromJS({ fouced:fal...
react使用Immutable实战
hahahhahahahha123456的博客
11-11 687
1. 与 React 搭配使用，Pure Render 熟悉 React 的都知道，React 做性能优化时有一个避免重复渲染的大招，就是使用 `shouldComponentUpdate()`，但它默认返回 `true`，即始终会执行 `render()` 方法，然后做 Virtual DOM 比较，并得出是否需要做真实 DOM 更新，这里往往会带来很多无必要的渲染并成为性能瓶颈。 当然我们...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值