React 的性能优化之当 PureComponent 遇上 ImmutableJS
一、痛点
在我们的印象中,React好像就意味着组件化、高性能,我们永远只需要关心数据整体,两次数据之间的 UI 如何变化,则完全交给 React Virtual Dom 的 Diff 算法 去做。以至于我们很随意的去操纵数据,基本优化shouldComponentUpdate 也懒得去写,毕竟不写也能正确渲染。但随着应用体积越来越大,会发现页面好像有点变慢了,特别是组件嵌套比较多,数据结构比较复杂的情况下,随便改变一个表单项,或者对列表做一个筛选都要耗时 100ms 以上,这个时候我们就需要优化了!当然如果没有遇到性能瓶颈,完全不用担心,过早优化是邪恶的。这里我们总结一个很简单的方案来让 React 应用性能发挥到极致。在下面一部分,我们先回顾一下一些背景知识,包括:JavaScript 变量类型和 React 渲染机制,如果你是老鸟可以直接跳过。