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

短命女 2022-08-31 09:40 172阅读 0赞

![8a386f40927e9cad78ce75ec972403c9.png][]

## 一、是什么 ##

Immutable，不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据

对 `Immutable`对象的任何修改或添加删除操作都会返回一个新的 `Immutable`对象

`Immutable` 实现的原理是 `Persistent Data Structure`（持久化数据结构）:

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

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

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

如下图所示：

![a3fe7ed11e1b1de5d2624b6358a194bd.gif][]

## 二、如何使用 ##

使用`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 后：

getInitialState() {
      return {
        data: Map({ times: 0 })
      }
    },
      handleAdd() {
        this.setState({ data: this.state.data.update('times', v => v + 1) });
        // 这时的 times 并不会改变
        console.log(this.state.data.get('times'));
      }

同理，在`redux`中也可以将数据进行`fromJS`处理

import * as constants from './constants'
    import {fromJS} from 'immutable'
    const defaultState = fromJS({ //将数据转化成immutable数据
        home:true,
        focused:false,
        mouseIn:false,
        list:[],
        page:1,
        totalPage:1
    })
    export default(state=defaultState,action)=>{
        switch(action.type){
            case constants.SEARCH_FOCUS:
                return state.set('focused',true) //更改immutable数据
            case constants.CHANGE_HOME_ACTIVE:
                return state.set('home',action.value)
            case constants.SEARCH_BLUR:
                return state.set('focused',false)
            case constants.CHANGE_LIST:
                // return state.set('list',action.data).set('totalPage',action.totalPage)
                //merge效率更高，执行一次改变多个数据
                return state.merge({
                    list:action.data,
                    totalPage:action.totalPage
                })
            case constants.MOUSE_ENTER:
                return state.set('mouseIn',true)
            case constants.MOUSE_LEAVE:
                return state.set('mouseIn',false)
            case constants.CHANGE_PAGE:
                return state.set('page',action.page)
            default:
                return state
        }
    }

## 参考文献 ##

*  https://zhuanlan.zhihu.com/p/20295971?spm=a2c4e.11153940.blogcont69516.18.4f275a00EzBHjr&columnSlug=purerender
 *  https://www.jianshu.com/p/7bf04638e82a

\--The End--

系列正在更新：24/33

点击下方卡片解锁更多

![2abe362912f571ee3eea445309d47915.png][]

创作不易，星标、点赞、在看 三连支持

[8a386f40927e9cad78ce75ec972403c9.png]: /images/20220829/7a4c66f91ee04a139858d4c3b8f2c2e1.png
[a3fe7ed11e1b1de5d2624b6358a194bd.gif]: /images/20220829/c91c82af55224277a6a2fa2cb0abc7bd.png
[2abe362912f571ee3eea445309d47915.png]: /images/20220829/8426d9b5639c4602981923345945934f.png