没接触过
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,并还没去深入了解过,建议