深入理解re-reselect：深度缓存与选择器管理

admin 2个月前 (03-14) 阅读数 18 #开源软件项目

## 项目介绍

`re-reselect`是一个基于[Reselect]的开源项目，由CSDN公司开发。该项目旨在通过提供深度缓存和缓存管理功能，进一步增强Reselect选择器的性能和可用性。在Reselect v5+中，虽然已经原生支持自定义缓存解决方案，但`re-reselect`仍然提供了向后兼容的增强功能。

## 项目及技术应用场景

`re-reselect`适用于以下几种场景：

- 当连续使用一个选择器，但参数略有不同时，可以保留选择器的缓存。
- 将相似的选择器合并为一个。
- 在多个组件实例间共享带有props的选择器。
- 运行时动态实例化选择器。
- 为Reselect提供自定义缓存策略。

## 核心功能解析

### 深度缓存

在Reselect中，默认的缓存限制为一个，当使用标准选择器在不同参数间切换时，会导致缓存失效。`re-reselect`通过将不同的调用转发到缓存中的不同`reselect`选择器，来保留计算/记忆化的值。

### 缓存管理

`re-reselect`允许通过`keySelector`函数为每个选择器实例定义一个唯一的缓存键（`cacheKey`），从而实现更细粒度的缓存管理。这允许开发者根据具体需求定制缓存策略。

## 安装与配置指南

安装`re-reselect`非常简单，只需执行以下命令：

```bash
npm install reselect
npm install re-reselect
```

## 实战案例分析

以下是一个使用`re-reselect`的简单示例：

```javascript
import {createCachedSelector} from 're-reselect';

const getUsers = state => state.users;
const getLibraryId = (state, libraryName) => state.libraries[libraryName].id;

const getUsersByLibrary = createCachedSelector(
  getUsers,
  getLibraryId,
  (users, libraryId) => expensiveComputation(users, libraryId),
)(
  (_state_, libraryName) => libraryName
);

const reactUsers = getUsersByLibrary(state, 'react');
const vueUsers = getUsersByLibrary(state, 'vue');
```

在这个例子中，`getUsersByLibrary`选择器使用`libraryName`作为`cacheKey`，从而在不同的`libraryName`间共享缓存，而不会因为数据类型的不同导致缓存失效。

## 常见问题解答

### 如何使用re-reselect包装现有选择器？

假设你有一个现有的Reselect选择器，可以通过添加`keySelector`来包装它：

```javascript
import {createCachedSelector} from 're-reselect';

export const getMyData = createCachedSelector(
  selectorA,
  selectorB,
  selectorC,
  (A, B, C) => doSomethingWith(A, B, C)
)(
  (state, arg1, arg2) => arg2 // 使用arg2作为cacheKey
);
```

### 如何使用多个输入设置cacheKey？

有多种方式可以使用多个输入来设置`cacheKey`：

```javascript
createCachedSelector(
  // ...
)(
  (state, arg1, arg2, arg3) => `${arg1}:${arg3}`
)
```

### 如何限制缓存大小？

可以通过使用`cacheObject`选项来实现，该选项在`re-reselect`中提供。你也可以编写自己的缓存策略。

### 如何在多个组件间共享选择器并保持记忆化？

`re-reselect`可以通过`keySelector`实现这一点，如前文示例所示。

### 如何测试re-reselect选择器？

`re-reselect`选择器支持与Reselect相同的测试方法，如`dependencies`、`resultFunc`、`recomputations`和`resetRecomputations`。

## 发展历程与未来展望

`re-reselect`作为一个开源项目，自推出以来已经帮助许多开发者优化了他们的应用程序性能。未来，`re-reselect`将继续更新，以支持Reselect的最新特性，并为用户提供更灵活的缓存管理策略。