Persistent Data Structure(持久化数据结构)
也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。
Immutable 详解及 React 中实践
Immutable 优点
与深拷贝相比,Immutable最大程度上共用了内存,这与深拷贝是有很大程度上的不同。
共用内存:
使用setIn去修改Immutable对象时,未被修改的节点依旧共享。适用于纯函数式编程。纯函数编程就是输入一样,输出必定一样。
- 可以通过Immutable对象去判断是否要更新组件,这样可以提高性能,避免不必要的渲染。
Immutable.is(immutable1, immutable2);
若immutable1
与immutable2
内容相同,则返回true
。否则返回false
。
由此我们可以通过is
去判断状态内容是否改变,决定是否重新渲染。
- React 建议把
this.state
当作 Immutable 的,因此修改前需要做一个 deepCopy,显得麻烦。
let newState = Object.assign({}, state);
使用Immutable,使用update进行更新
this.state = Map({name: 'hi'});
this.setState({name: this,state.name.update('name', v=>'my')});
Immutable.fromJS
是将Object和Array转化为Immutable Map和List。
Immutable对象的操作
- 获取immutable对象中的数组元素的某一下标元素。
data = fromJS({
condition: ['one', 'two', 'three', 'four'];
});
// 获取'two'
data.getIn(['condition', 1]);
- 获取immutable数组中的数组大小
data = fromJS({
condition: ['one', 'two', 'three', 'four'];
});
// 获取'two'
data.getIn(['condition']).size;