React 什么是 Reselect 以及它是如何工作的 ?
Reselect是一个用于Redux的选择器库,它可以创建可记忆的(memoized)和可组合的(composable)state选择器。
在React和Redux的应用中,当我们需要从Redux的state中获取数据时,我们通常会创建一些函数,这些函数称为”selectors”。这些选择器负责访问和处理state,以便我们的组件可以使用。
Reselect的主要优势是它的记忆能力。这意味着如果一个选择器的所有输入参数在连续的调用中都没有改变,那么Reselect将直接返回上一次的结果,而不是重新计算。这可以提高性能,特别是当我们的选择器需要进行昂贵的计算时。
这是一个简单的Reselect选择器的例子:
import { createSelector } from 'reselect'
const getVisibilityFilter = state => state.visibilityFilter
const getTodos = state => state.todos
export const getVisibleTodos = createSelector(
[getVisibilityFilter, getTodos],
(visibilityFilter, todos) => {
switch (visibilityFilter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
default:
throw new Error('Unknown filter: ' + visibilityFilter)
}
}
)
在这个例子中,getVisibleTodos
是一个记忆选择器,它依赖于getVisibilityFilter
和getTodos
。只有当visibilityFilter
或todos
改变时,getVisibleTodos
才会重新计算。否则,如果这些值没有改变,getVisibleTodos
将直接返回上一次的结果。