Reselect 为什么可以优化 React 项目性能？

没接触过

Reselect 是一个用于创建记忆的“selector”函数的库。

通常与 Redux 一起使用，但也适用于任何普通的 JS 不可变数据场景。

• selector 可以计算衍生数据，它允许让 Redux 存储尽可能少的 state
• selector 很高效，它只有在某个参数发生变化时才会进行重新计算
• selector 是可组合的，它可以作为其他 selector 的入参

以上是来自官方的介绍，个人简单理解：

我们可以用它包装数据（如 Redux 的 state），并利用其缓存入参的能力减少不必要的更新，从而达到性能优化，一举多得。

来看个简单的用例感受一下魅力。

import { createSelector } from 'reselect'

const shopItemsSelector = state => state.shop.items
const taxPercentSelector = state => state.shop.taxPercent

const subtotalSelector = createSelector(shopItemsSelector,items => items.reduce((acc, item) => acc + item.value, 0)
)

const taxSelector = createSelector(subtotalSelector,taxPercentSelector,(subtotal, taxPercent) => subtotal * (taxPercent / 100)
)

export const totalSelector = createSelector(subtotalSelector,taxSelector,(subtotal, tax) => ({ total: subtotal + tax })
)

let exampleState = {shop: {taxPercent: 8,items: [{ name: 'apple', value: 1.20 },{ name: 'orange', value: 0.95 },]}
}

console.log(subtotalSelector(exampleState)) // 2.15
console.log(taxSelector(exampleState))// 0.172
console.log(totalSelector(exampleState))// { total: 2.322 } 

用过而已

如果你正在使用 reselect，并还没去深入了解过，建议