简单的来讲,immutable.js 通过 structural sharing 来解决的性能问题。
看看 immutable.js 是如何做的当我们发生一个 set 操作的时候,immutable.js 会只 clone 它的父级别以上的部分,其他保持不变,这样大家可以共享同样的部分,可以大大提高性能。
为什么你要在 React.js 中使用 Immutable Data 熟悉 React.js 的都应该知道,React.js 是一个 UI = f(states) 的框架,为了解决更新的问题,React.js 使用了 virtual dom,virtual dom 通过 diff 修改 dom,来实现高效的 dom 更新。听起来很完美吧,但是有一个问题。当 state 更新时,如果数据没 ## 标题文字 ## 变,你也会去做 virtual dom 的 diff,这就产生了浪费。
这种情况其实很常见,可以参考 flummox 这篇文章当然你可能会说,你可以使用 PureRenderMixin 来解决呀,PureRenderMixin 是个好东西,我们可以用它来解决一部分的上述问题,但是如果你留心的话,你可以在文档中看到下面这段提示:
PureRenderMixin 只是简单的浅比较,不使用于多层比较。那怎么办??
自己去做复杂比较的话,性能又会非常差。
方案就是使用 immutable.js 可以解决这个问题。因为每一次 state 更新只要有数据改变,那么 PureRenderMixin 可以立刻判断出数据改变,可以大大提升性能。
总结就是:使用 PureRenderMixin + immutable.js
通过使用 Immutable Data,可以让我们更容易的去处理缓存、回退、数据变化检测等问题,简化我们的开发。
mutable data structure 做 diff 需要遍历
immutable 只要对比一下 reference 是不是一个就行了
react 做 virtual dom 的 diff 会快
首先,我们有必要来划分一下边界,哪些数据需要使用不可变数据,哪些数据要使用原生 js 数据结构,哪些地方需要做互相转换?