immutable 一个超级好用的 state 管理工具
2020-11-05 本文已影响0人
弱冠而不立
推荐文章:Immutable.js了解一下?
什么是 immutable?
Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。
在 react 中有什么用?
例如我们在 reducer 中,接收一个 action 对象 ,然后更新 state。通常我们都要选择性更新 state 中的某一个对象属性,而其他的不需要改变,例如
return {
...state,
tokenObj: {
tokenHead: action.tokenHead
token: action.token
}
}
其他的属性也要复制过来,然后替换相应的属性,最后返回一个新的对象
如果是使用 immutable 我们就可以很方便的用它的api,例如:
import {Map} from "immutable"
const defaultState = Map({
tokenObj: {},
})
const login = (state=defaultState, action) => {
switch(action.type) {
case actionTypes.SET_TOKEN:
return state.set("tokenObj", {
tokenHead: action.tokenHead,
token: action.token
})
default:
return state
}
}
这里本质上用的就是 JS 中的 map 数据类型,但是 immutable 在其中做了一定的性能优化
这里就介绍一下这个是什么东西,具体细节,可以查阅上面那篇推荐的文章