React的immutable(工作很少用)

二、immutable.js

也是个框架,结构化数据共享

2.1、概述

官网：Immutable.js

List (List) - Immutable 3.8.1 中文开发手册 - 开发者手册 - 云+社区 - 腾讯云

Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。

所有的更新操作都会返回新的值，

但是在内部结构是共享的，来减少内存占用(和垃圾回收的失效)。

持久化数据结构：这里说的持久化是用来描述一种数据结构，指一个数据，在被修改时，仍然能够保持修改前的状态，即不可变类型。

(这里的持久化:不是刷新不丢失,而是任然能得到旧数据)

结构共享：Immutable使用先进的tries(字典树)技术实现结构共享来解决性能问题，当我们对一个Immutable对象进行操作的时候，ImmutableJS会只clone该节点以及它的祖先节点，其他保持不变，这样可以共享相同的部分，大大提高性能。

惰性操作：创建的对象时其实代码块没有被执行，只是被声明了，代码在获取或修改的时候才会实际被执行

2.2、使用immutable优缺点

• 优点

降低mutable带来的复杂度

节省内存

历史追溯性

拥抱函数式编程

• 缺点

需要重新学习api

资源包大小增加（源码5000行左右）

容易与原生对象混淆：由于api与原生不同，混用的话容易出错

第3方组件库( 必用的 )不支持，使用时，还需要转换

2.3、安装

npm i -S immutable

yarn add immutable

2.4、常用Api

重要的数据类型

 

 Map类型

 // immutable结构数据共享

// Map   把js中的json对象转为Map  它只能转换json对象的第1层

// List  把js中的数组转为List     它只能转换数组的第1层

// fromJS 递归自动把数组或对象转为 Map或List

// is 专门用来比对数据

// eslint-disable-next-line

import { Map, List, fromJS, is } from 'immutable'

// let obj = { id: 1, name: '张三', user: { age: 20 } }

// 把对象转为Map Map它是immutable中的对象，不是原生js中的对象

// let istate = Map(obj)

// let istate = fromJS(obj)

// console.log(obj,istate)

 

 // 获取数据 get/getIn

/* console.log('get', istate.get('name'));

console.log('getIn', istate.getIn(['name'])); */

/* console.log('get', istate.get('user').get('age'))

console.log('getIn', istate.getIn(['user', 'age'])); */

 

 // 修改 -- 任何的修改都会返回一个新的对象

// let obj = { id: 1, name: '张三', user: { age: 20 } }

// let istate = fromJS(obj)

// 修改 set/setIn/update/updateIn

// set设置值，不需要原值，update可以保留原值的基础来进行修改

// let newState = istate.set('name','李四')

// let newState = istate.update('name', v => '李四@' + v)

// 深层数据修改

// let newState = istate.setIn(['user', 'age'], 30)

// let newState = istate.updateIn(['user', 'age'], v => v + 1)

// toJS方法，就是把immutable对象转为原生js对象

// console.log(newState.toJS());

// 删除

// let obj = { id: 1, name: '张三', user: { age: 20 } }

// 普通对象删除属性

// delete obj['name']

// let istate = fromJS(obj)

// let newState = istate.removeIn(['name'])

// console.log(newState.toJS());

// 对象比对

// let obj1 = { id: 1, name: '张三', user: { age: 20 } }

// let obj2 = { id: 1, name: '张三', user: { age: 20 } }

// console.log(obj1 === obj2) // false  但是它们值是一样的

/* let obj = { id: 1, name: '张三', user: { age: 20 } }

let istate1 = fromJS(obj)

let istate2 = fromJS(obj)

console.log(is(istate1, istate2))  // true */

 

// 合并对象

// let obj1 = { id: 1, name: '张三' }

// let obj2 = { name: '李四', age: 20 }

// // for in  ...   Object.assign

// let istate1 = fromJS(obj1)

// let istate2 = fromJS(obj2)

// // 如果两者有相同字段，则后合并中的方法字段为准

// let newState = istate1.merge(istate2)

// console.log(newState.toJS());

 List类型  对应数组

let arr = [1, 2, { id: 1, name: '张三' }]

// let istate = List(arr)

let istate = fromJS(arr)

 // 获取 get/getIn

// console.log(istate.get(1));

// console.log(istate.getIn([2, 'name']));

// 追加 push/unshift/pop/shift/concat

// let newState = istate.push(3)

// console.log(newState.toJS());

 

// 修改  set/update

// let newState = istate.set(1, 10)

// let newState = istate.update(1, v => v + 10)

// let newState = istate.updateIn([2,'id'], v => v + 10)

// console.log(newState.toJS());

// immutable中的List长度

// console.log(istate.size);

// 删除

// let newState = istate.remove(1)

// console.log(newState.toJS());

 

 判断父的数据是否与子有关,无关子就不渲染,优化

少个截图

---

2.5、redux中集成immutable

• 安装redux-immutable

redux中利用combineReducers来合并reducer并初始化state，redux自带的combineReducers只支持state是原生js形式的，所以需要使用redux-immutable提供的combineReducers来替换原来的方法。

npm i -S redux-immutable

yarn add redux-immutable

 

 

 

 

 

---