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 在其中做了一定的性能优化
这里就介绍一下这个是什么东西,具体细节,可以查阅上面那篇推荐的文章

上一篇 下一篇

猜你喜欢

热点阅读