zero-immutable
immutable的作用
- 为了更舒服的写 compare,例如 react 中 shouldComponentUpdate(如果使用 react-redux,这一步其实在 connect 时默认会处理)
- 更方便操作深层次级别的state结构,例如 redux reducer 中繁琐的 spread 操作
- 提高性能
- 不要去拍扁数据,基本和服务端一致
imuutable 带来的问题
- 侵入式,访问 immutable 数据结构,需要 getIn 等新语法,例如 view 层数据访问,如果以后不需要或者换方案,重构代价大
- 体积大,其实你大部分只需要 fromJS,toJS,Map,List 等简单接口(当然也有seamless-immutable比较小,但不兼容 IE8,github上的图是不兼容 IE11,未深究)
- 新语法,需要学习一套新的 API 来操作 immutable 数据结构
- 思维负担,需要认清哪个对象是 immutable object,哪个对象是 native object
zero-immutable 功能和优势
- 对深层级的 state 提供方便的操作
- 使用 native object,最大程度降低侵入式带来的问题,也不需要去分辨对象是否是 immutable
- 体积微乎其微
- 主API(setIn)一个,附加数组操作 push/pop/shift/unshift/splice,一共6个
- 兼容IE8
安装:npm install zero-immutable --save
// 例如有个 state 结构如下:const state = loading: false offset: 0 limit: 20 data: id: 1 name: 'tom' address: city: id: 350100 name: '福州' // 现在要将 state.data[0].address.city 改成 {id: 350200, name: '厦门'} // 原先做法:const newState = ...state data: ...data;const item = ...newStatedata0;itemaddress = ...itemaddress;itemaddresscity = id: 350200 name: '厦门';newStatedata0 = item; // 现在做法:const newState =
API
- setIn(object, data)
- push(object, path, data)
- pop(object, path)
- unshift(object, path, data)
- shift(object, path)
- splice(object, path, deleteCount, ...add)
使用参见 test 目录下的代码,so easy!