Simple Note

不可变数据

2016.03.18

没接触过的新东西,小总结一下~

什么是不可变数据?

一旦创建,不能被修改的数据。对它的任何修改都会返回一个新的不可变数据。(有点类似js中的字符串,本身不能被修改,字符串的方法如slice、split都会返回新字符串而不是直接修改原字符串。不能跟const定义的常量或者Object.freeze生成的冻结对象混淆,这两者的修改都会直接报错。)js中可以通过深度复制模拟不可变数据:每次要操作数据时,先通过深度复制创建一个新数据。(很慢)

什么是持久化数据结构?

函数式编程语言中的一个概念,指修改后可以保存当前状态的数据结构。不可变数据依靠持久化数据结构来实现。
这意味着它可以复现所有的历史操作?但是看immutable-js的文档里并没有提到历史回溯。可以手动把每次修改后的数据保存到一个数组中,来记录数据变动的历史。之前做简易版PS的历史记录部分时,每次修改后,都先新建canvas,用drawImage把当前canvas画上去,再存到一个数组中,挺麻烦,以后试试用immutable-js改进下。

为什么react中使用不可变数据可以提高性能?

react在默认情况下,state更新时就算数据没变也会使用VirtualDOM比较来判断是否需要DOM更新,有时候会带来很多不必要的性能开销。
我们可以在shouldComponentUpdate手动判断props和states是否发生了变化来控制组件更新。js的默认比较对引用类型只比较引用地址是否相同,而对props和states来说,两个对象如果所有键值都相同就相当于组件不需要更新,所以针对引用类型,我们要逐个判断所有的键值是否相等,这一操作非常耗资源。而不可变数据比较是否相同要简单很多,如果引入了immutable-js,可以直接使用is()判断两个Immutable Data是否相同,大大提高性能。
一个shouldComponentUpdate示例:

import { is } from 'immutable';
shouldComponentUpdate: (nextProps, nextState) => {
  return !(this.props === nextProps || is(this.props, nextProps)) ||
         !(this.state === nextState || is(this.state, nextState));
}
Comments
Write a Comment