React.PureComponent 配合 ImmutableJS 才更有意义

纯组件应该配合 Immutable.js，效果更好

React V15.3.0 刚发布的时候，我写了一篇文章，如今仍具有借鉴意义。当时 PureComponent 刚添加，不少同学以为有了这个就不必考虑性能问题了。但事实上，由于 React 检查 state 变化的原理，在许多情况下，即便数据没变，仍然会重新渲染。

React 对组件是否需要更新的判断是基于 prop 和 state 的浅层对比。这意味着，如果 state 中存储的是引用类型（如对象或数组），当其中某一个属性改变时，即便其他属性没变，React 也会重新渲染组件。这种情况下， PureComponent 和 shouldComponentUpdate 都无法发挥作用。

以 To-do List 为例，当完成某一项任务时，只需把该任务的状态由 “未完成” 更改为 “已完成”，就可以让任务从列表中划去。然而，React 会认为 state 中的任务列表发生了变化，于是重新渲染整个列表。

解决这一问题的一个办法就是使用 Immutable.js。Immutable.js 是一个 JavaScript 库，提供了许多不可变的数据结构，如 List、Map 和 Set。通过使用 Immutable.js，可以确保在更改对象或数组中的一个属性时，不会影响整个对象或数组。

将上面的例子改写为使用 Immutable.js，当完成某一项任务时，只需把该任务的状态由 “未完成” 更改为 “已完成”，React 就不会重新渲染整个列表。

使用 Immutable.js 的另一个好处是，它可以提高 React 应用程序的性能。Immutable.js 的数据结构是不可变的，这意味着它们在内存中不会被修改。这使得 React 可以更快地比较 prop 和 state 的变化，从而决定是否需要重新渲染组件。

如果你想提高 React 应用程序的性能，建议使用 PureComponent 和 Immutable.js。这两者结合使用，可以有效地减少不必要的重新渲染，从而提高应用程序的性能。

总结

• PureComponent 可以帮助减少不必要的重新渲染，但它只能处理 state 中存储的原始类型。
• Immutable.js 可以提供不可变的数据结构，确保在更改对象或数组中的一个属性时，不会影响整个对象或数组。
• PureComponent 和 Immutable.js 结合使用，可以有效地减少不必要的重新渲染，从而提高 React 应用程序的性能。