React性能优化之使用 ImmutableJS 不可变数据
date
Jun 26, 2023
slug
React性能优化之使用 ImmutableJS 不可变数据
status
Published
tags
IT
React
summary
React性能优化之使用 ImmutableJS 不可变数据
type
Post
众所周知，组件化是
React 的最大特性，所以我们需要关注组件的优化。一、问题：不该重新渲染的子组件跟着别人又 render 了
我们先来看一段包含子组件的代码：
子组件
ColorShow 的代码如下我们在子组件
ColorShow 中的 componentDidUpdate 勾子里打印一些东西，表明在组件重新 render 了。我们需要优化的性能问题，要它在该改变的时候，才去重新 render 的时候。二、使用 PureComponent 优化
React15.3 增加
Component 的升级版 PureComponent，PureComponent 不需要我们去实现 shouldComponentUpdate 函数，它会浅比较的对比 prop 和 state 来决定组件是否需要 render。而浅比较的弊端是当 props 的结构比较复杂时，如多重对象嵌套，深层次对象的改变，这个浅比较就无法比较出来，从而阻止了组件的重新渲染。所以，PureComponent 并不能完全帮助我们在复杂数据时作出正确决策。三、使用 Component 中的 shouldComponentUpdate 函数优化。
在组件中的
shouldComponentUpdate 函数返回 true 或 false，决定着组件是否重新 render，这就要对前后数据进行深度遍历比较，在数据的结构复杂时，这样很消耗性能。所以我们使用不可变数据 Immutable，引入 Facebook 打造了三年的 immutable.js。现在，我们来看下对比下深度遍历和不可变数据之间的性能比较。
我们会随机生成数据，使用 lodash 中 isEqual 函数进行深度遍历，看代码执行，比较程序的运行时间在 30ms 多。
接着我们看看使用 immutable.js 库来比较的情况，先看代码
我们先使用 fromJS 构建不可变数据，通过 is 函数比较。执行，函数执行时间在 3ms 左右。
组件能够快速准确的做出是否重新渲染的决定，有利于提升我们整个页面的性能。
四、总结
不可变数据
Immutable 对 React 性能的优化，这完全得益于 Immutable 的结构共享。我们目前仅从组件的角度来体现，Immutable 还有更多更好的东西值得我们研究和使用，比如和与 Redux 的搭配使用，具体大家可以参照阿里大佬camsong写的这篇详解。