react-bootstrap-typeahead缓存的实现细节是什么？

Question

我在一个应用程序中工作，其中我们使用来自react-bootstrap-typeahead的AsyncTypeahead组件。它工作得很棒，我喜欢这个库，但最近我的任务是，如果用户输入了一些东西，然后在字段之外单击(所以onBlur)，我的任务是自动选择排名最靠前的结果。我添加了我的逻辑，并在测试期间注意到，当我在字段中输入测试数据时，我们的搜索函数并不总是被调用。

在阅读了文档后，我发现了useCache标志，并意识到它被默认设置为on，这就是为什么我们并不总是调用search。将其切换为false可确保我们在所有情况下都调用搜索，并且自动选择可以无缝地工作(我对搜索函数中设置的数据进行了一些自动选择验证，这就是为什么在本例中两个事件绑定在一起的原因)。

在我将我的更改推送到prod之前，我希望得到一些关于这个缓存如何工作的详细信息，以及何时我们决定缓存不再“有效”，必须进行新的搜索。我基本上是想了解禁用这个缓存的影响，我在文档中没有看到任何具体的东西。

如有任何帮助，我们不胜感激！

Answer 1

React-bootstrap-typeahead是开源的，所以如果你想了解它的实现，你可以自由地看看source code。内置缓存非常基本:它只是一个普通对象，用于添加与查询字符串和结果相对应的键/值对。在触发搜索之前，该组件检查对象以查看当前查询是否已发送，如果已发送，将返回缓存结果。

以下是相关部分：

const cacheRef: { current: Cache } = useRef({});
const queryRef: { current: string } = useRef(props.defaultInputValue || '');

const handleSearch = useCallback((query: string) => {
  queryRef.current = query;

  if (useCache && cacheRef.current[query]) {
    forceUpdate();
    return;
  }

  onSearch(query);
}, [forceUpdate, minLength, onSearch, useCache]);

useEffect(() => {
  if (!isLoading && prevProps && prevProps.isLoading && useCache) {
    cacheRef.current[queryRef.current] = options;
  }
});