我用过的react性能优化轮子

在一个大型的项目中，总是不折手段地希望能优化前端性能，很多具体的优化手段被反复使用，最终被整理成了一个轮子。

这里记录我在项目中亲自使用过的一些轮子，我会实时更新这篇文章，如果有旧的轮子被团队淘汰了我会标注，有新的轮子加进来了我也会添加记录。

immutability-helper

项目地址： kolodny/immutability-helper

轮子作用：以最低的成本对抗浅比较。

适用场景：state的修改。

如果使用redux管理数据流，就必然会遇到state的修改。state修改有个特性，redux会进行一次新旧state的浅比较，如果有变动才会触发重新渲染。一个大的项目state的数据结构必然会很复杂，如果有一个很里层的数据被修改，这时就很头疼。

如果把state深拷贝一次会十分浪费资源，所以我们不会这么干。浅拷贝同样行不通，因为浅拷贝之后的操作会改变旧的state值，这既不规范，也不会触发渲染。

一个比较合理的操作，是使用 ... 操作符来完成所需部分的修改，和无修改部分的浅拷贝，并且不会改动原数据。但是在数据层级比较深的时候就会写得很复杂。

面对着这种困境，immutability-helper就是一个与使用 ... 操作逻辑相同，但是书写要简便很多的轮子。这个轮子有一定的学习成本。以一个例子介绍一下具体的操作。

假如我们有如下一个state：

state = {
    info: {
        name: "tom",
        age: 12
    },
    score: {
        exam1: [99, 98, 89],
        exam2: [78, 85]
    }
}
复制代码

现在我想在 exam2 中添加一个number，一个二逼的操作就是：

state.score.exam2.push(90);
复制代码

这样不满足不修改原state的要求，也不会触发重新渲染，一个正确的操作是：

newState = {
    ...state,
    score: {
        ...state.score,
        exam2: [...state.score.exam2, 90]
    }
}
复制代码

在数据还不是很复杂的时候，上面的操作看起来还比较清爽。而使用immutability-helper的操作如下：

import update from 'immutability-helper';

newState = update(
    state, 
    {score: {exam2: {$push: [90]}}}
)
复制代码

这一通操作看起来并不很直观，因为这个轮子确实需要一定的学习成本，但是最终的效果是你不再需要写与被操作数据无关的任何字段了。

reselect

项目地址： reduxjs/reselect

轮子作用：减少不必要的数据计算。

适用场景：将store中的数据转换成组件所需的结构。

在一个大型的项目中，我们会在store中保存很多数据，同时也会有很多的大小组件。不同的组件需要不同的数据，所以我们保存在store中的数据往往是很完整和庞大的，在存进store之前都不会对从服务器请求回来的数据进行过多处理。

而我们每一个组件所需要的数据都是具体的，所以我们需要把store中的数据处理成组件所需要的数据。在这个过程中，我们可能需要遍历很多对象与数组，而这些计算在每次刷新的时候都需要进行一遍，哪怕触发刷新的是别的完全无关的操作。

reselect就是为了避免过多不必要的运算而诞生的轮子，它是会缓存上次输入与输出的函数，当它再次执行的时候会先检查一下函数的输入，如果与上次相同则避免计算，直接用上次的结果输出。

reselect函数还有别的特性，比如可以嵌套地写，把一个数据变化的过程拆分成很多子过程，这些子过程可以被别的reselect函数复用。而且任何一级的输入不变则后续的过程都会使用缓存输出。

使用reselect函数可以很方便地完成从store数据到组件输入的转换，而且可以在各种重新渲染的时候避免不必要的计算从而提升性能。

to be continued...

掘金社区为本文唯一发布平台，转载请注明出处。