react 使用immutable.js 使state不能改变

最新推荐文章于 2025-07-10 15:11:51 发布
最新推荐文章于 2025-07-10 15:11:51 发布
阅读量273 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_37054603/article/details/93473973
博客介绍了immutable.js项目相关内容，给出其git地址https://github.com/immutable-js/immutable-js ，说明了项目安装命令yran add immutable，还提及在reducer.js中引入，返回set方法以及用get方法接收。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. https://github.com/immutable-js/immutable-js ---git地址
  2. 项目安装immutable.js
    1. yran add immutable
  3. 在reducer.js中引入 
    1. ​
import { fromJS } from 'immutable';

      1

  4. return state.set('focused',true)

    返回set方法

  5. focused:state.header.get('focused')

    使用get方法接收

react使用Immutable实战
hahahhahahahha123456的博客
11-11 751
1. 与 React 搭配使用，Pure Render 熟悉 React 的都知道，React 做性能优化时有一个避免重复渲染的大招，就是使用 `shouldComponentUpdate()`，但它默认返回 `true`，即始终会执行 `render()` 方法，然后做 Virtual DOM 比较，并得出是否需要做真实 DOM 更新，这里往往会带来很多无必要的渲染并成为性能瓶颈。 当然我们...
搞定immutable.js详细说明
11-23
总之，`immutable.js` 是一种强大的工具，它使得JavaScript中处理不可变数据变得高效且易于管理，尤其是在React等需要频繁比较和更新状态的环境中。通过使用 `immutable.js`，开发者可以降低复杂数据结构带来的性能...
[转] Immutable 详解及 React 中实践
weixin_34388207的博客
05-24 203
https://zhuanlan.zhihu.com/p/20295971 作者：camsong链接：https://zhuanlan.zhihu.com/p/20295971来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 Shared mutable state is the root of all evil（共享的可变状态是万恶之源） -- Pete ...
记录在React 中使用 Immutable.js
最新发布
weixin_50332439的博客
07-10 244
Immutable.js是Facebook开发的JavaScript不可变数据管理库，提供List、Map等核心数据结构。文章介绍了其安装方法(yarn add immutable)和常用API：fromJS()深度转换JS对象、updateIn()更新嵌套数据、is()深度比较、toJS()转回原生对象。适用于表单状态管理、配置数据等场景。优点包括结构共享减少内存开销，缺点有学习成本高、16KB包体积。与Immer(3KB)相比更强大但更复杂，建议根据项目需求选择方案，可结合Immer或原生扩展运算符使用
[React] immutable.js
weixin_30332241的博客
01-06 137
//Map() 原生object转Map对象 (只会转换第一层，注意和fromJS区别) immutable.Map({name:'danny', age:18}) //List() 原生array转List对象 (只会转换第一层，注意和fromJS区别) immutable.List([1,2,3,4,5]) //fromJS() 原生js转immutable对象 (深度转换，会将内部嵌套的对象...
在React中使用Immutable.js
BradenHan的专栏
09-19 482
Lodash是一个流行的JavaScript实用工具库，提供了许多用于处理数组、对象和其他数据结构的函数。：对集合中的每个元素应用iteratee函数，并返回一个新的数组。：创建一个新数组，包含通过所提供函数实现的测试的所有元素。：通过对集合中的每个元素执行一个reducer函数，将其减少为单个值。：创建一个debounced函数，该函数只会在指定的wait时间后执行func。：创建一个throttled函数，该函数只会在指定的wait时间内执行func。
Immutable 常用API简介
weixin_34174422的博客
08-15 314
本文主要整理了Immutable.js常用API的使用。 Immutable 是什么？ 关于Immutable的定义，官方文档是这样说的： Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler appl...
react性能优化达到最大化的方法 immutable.js使用的必要性
10-20
Immutable.js提供了一种不可变数据结构，这种数据结构一旦创建就不能修改。当需要更新数据时，immutable.js不是直接修改原有数据，而是生成一个新的数据副本，旧的数据保持不变。这种不可变性的特点在React中非常...
reactlink-immutable: React与Immutable.js的双向绑定解决方案
在ReactLink-immutable中，通过使用Immutable.js的数据结构替代普通的JavaScript对象，可以保持在使用`setState`时的浅层更新特性，同时享受Immutable数据结构带来的性能优势。当组件的状态通过`setState`更新时，只...
reactlink-immutable:双向绑定Mixin for React并支持Immutable.js数据结构
05-03
不可变的ReactLink 一个 mixin，使用数据结构作为this.state属性为组件提供双向数据绑定。 ?？ ReactLink？ 好吧，让我们备份一点。 每当<input>字段的值更改时，React提供一种称为的方法来更新this.state上...
React与Immutable.js实现高效组件更新示例
React是一个用于构建用户界面的JavaScript库，而Immutable.js是一个持久化数据结构库，用于创建不可变数据，通常用于改善React应用的性能。 2. **带React的shouldComponentUpdate和Immutable.js演示**: 此部分说明...
react immutable
wandoumm的博客
12-05 254
map list fromjs setin updatainimmutable实现的原理是(持久化数据结构),也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免深拷贝把所有的节点都复制一遍带来的性能损耗，immutable使用了结构共享，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其他节点则进行共享， 是一种持久化数据。它有一旦被创建就不会被修改的特性。 当你修改 immutable 对象的时候返回新的 immutable。但是原数据不会改变。Map() 原生ob
React中Immutable的使用
月光晒了很凉快的博客
09-28 2763
假设当前 redux 的大小为 1G，现在要修改 redux 树中的某个节点（节点的大小很小），我们就需要深复制整棵 redux 树，只为了修改很少的数据，这样对于性能的损耗是非常大的。于是我们使用 Immutable 来对这一现象进行优化，Immutable 只会深复制发生改变的节点及其祖先节点，然后修改后返回新数据。Immutable.js 出自 Facebook，是非常流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。
react- immutable
weixin_46087056的博客
06-15 194
- 不可变数据 数据一旦被创建就不修改 - 对 immutable 数据做操作的时候都会返回一个新的 immutable 对象， 修改对象的值和原值一样 相当于是没修改 - https://immutable- js.com/docs/v4.1.0 - js 中原生的数据结构 obj arr 实现队列 堆 栈 - 数据修改的时候 只有修改的节点的父级会产生影响，其他的都是复用 效率高 - 优点 - 节省内存 优化代码 深拷贝 - 函数式编程 - 可以溯源，所有改变数据的操作都会记录 - 缺点 - 需要学习新
React引用数据类型与immutable.js的使用实例
高山上的鱼
08-06 4086
代码最新内容请在github阅读，也欢迎您star和issue 一,React中浅层次拷贝的问题例子1我们给出下面的事实：const detail = {name:'qinlaing',school:{loc:'dalian'}} const copy = Object.assign({},detail); copy.school.loc ="北京"; //此时你会发现我们的detail.schoo
React中immutable的使用（优化级深拷贝）
Mr-yang的随笔
08-02 1061
一、作用 immutable 对象是不可直接赋值的对象，它可以有效的避免错误赋值的问题 二、安装 $ npm install immutable 三、使用 在react中，immutable主要是防止state对象被错误赋值。 将js对象转成immutable对象 import { fromJS } from 'immutable'; const defaultState = fromJS({ todoList: [] }); 获取属性 state.get('todoList'); // 获取sto
浅谈React项目中 Immutable Data
2401_84092322的博客
04-11 787
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽" />
【React】immutable.js 基础教程
qq_45677671的博客
05-28 567
文章目录JS中数据修改问题介绍常用APIobject转Map对象array转List对象JS转immutableimmutable转JSRedux中集成 用它的原因是为了解决问题：解决项目当中状态大规模管理的深拷贝的问题（防止对象/数组因为引用传递而在使用过程中出现的各种问题）。 JS中数据修改问题 我们先来看一段熟悉的代码： import React, { Component } from "react"; class App extends Component { state = {
React的immutable(工作很少用)
tby_pr的博客
11-23 847
二、immutable.js 也是个框架,结构化数据共享 2.1、概述 官网：Immutable.js List (List) - Immutable 3.8.1 中文开发手册 - 开发者手册 - 云+社区 - 腾讯云 Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。 所有的更新操作都会返回新的值， 但是在内部结构是共享的，来减少内存占用(和垃圾回收的失效)。 持久化数据结构：这里说的持久化是用来描述一种数据结构
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值