面试官：说说你对 Immutable Data的理解？如何应用在React项目中？

• 当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费

也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免 deepCopy把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享）

如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享

如下图所示：

二、如何使用

---

使用Immutable对象最主要的库是immutable.js

immutable.js 是一个完全独立的库，无论基于什么框架都可以用它

其出现场景在于弥补 Javascript 没有不可变数据结构的问题，通过 structural sharing来解决的性能问题

内部提供了一套完整的 Persistent Data Structure，还有很多易用的数据类型，如Collection、List、Map、Set、Record、Seq，其中：

• List: 有序索引集，类似 JavaScript 中的 Array

• Map: 无序索引集，类似 JavaScript 中的 Object

• Set: 没有重复值的集合

主要的方法如下：

• fromJS()：将一个js数据转换为Immutable类型的数据

const obj = Immutable.fromJS({a:‘123’,b:‘234’})

• toJS()：将一个Immutable数据转换为JS类型的数据

• is()：对两个对象进行比较

import { Map, is } from ‘immutable’

const map1 = Map({ a: 1, b: 1, c: 1 })

const map2 = Map({ a: 1, b: 1, c: 1 })

map1 === map2   //false

Object.is(map1, map2) // false

is(map1, map2) // true

• get(key)：对数据或对象取值

• getIn([]) ：对嵌套对象或数组取值，传参为数组，表示位置

let abs = Immutable.fromJS({a: {b:2}});

abs.getIn([‘a’, ‘b’]) // 2

abs.getIn([‘a’, ‘c’]) // 子级没有值

let arr = Immutable.fromJS([1 ,2, 3, {a: 5}]);

arr.getIn([3, ‘a’]); // 5

arr.getIn([3, ‘c’]); // 子级没有值

如下例子：使用方法如下：

import Immutable from ‘immutable’;

foo = Immutable.fromJS({a: {b: 1}});

bar = foo.setIn([‘a’, ‘b’], 2);   // 使用 setIn 赋值

console.log(foo.getIn([‘a’, ‘b’]));  // 使用 getIn 取值，打印 1

console.log(foo === bar);  //  打印 false

如果换到原生的js，则对应如下：

let foo = {a: {b: 1}};

let bar = foo;

bar.a.b = 2;

console.log(foo.a.b);  // 打印 2

console.log(foo === bar);  //  打印 true

三、在React中应用

---

使用 Immutable可以给 React 应用带来性能的优化，主要体现在减少渲染的次数

在做react性能优化的时候，为了避免重复渲染，我们会在shouldComponentUpdate()中做对比，当返回true执行render方法

Immutable通过is方法则可以完成对比，而无需像一样通过深度比较的方式比较

在使用redux过程中也可以结合Immutable，不使用Immutable前修改一个数据需要做一个深拷贝

import ‘_’ from ‘lodash’;

const Component = React.createClass({

getInitialState() {

return {

data: { times: 0 }

}

},

handleAdd() {

let data = _.cloneDeep(this.state.data);

data.times = data.times + 1;

this.setState({ data: data });

}

}

使用 Immutable 后：

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

024c （备注前端）**
[外链图片转存中…(img-jtsNwgIw-1712968060791)]

最后

[外链图片转存中…(img-33DPeEwr-1712968060792)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-pNlB65GQ-1712968060792)]