如何在React / Redux中使自動完成更快更流暢？

Question

我已經實現了帶有自動完成功能的搜索欄。

輸入組件具有onChange屬性，該屬性觸發一個動作創建者，該動作創建者向我的數據庫發出GET請求以獲取自動完成建議。

然后，我每次返回並渲染整個action.payload。

onInputChange ：

onInputChange(event) {
    this.setState({ term: event.target.value });

    if (event.target.value.length >= 3) {
      setTimeout(this.props.fetchSuggestions(event.target.value), 1000);
    }
  }

fetchSuggestions （動作創建者）：

export const fetchSuggestions = (term) => async dispatch => {
  const res = await axios.get(`${BASE_URL}/api/symptoms?query=${term}`);

  dispatch({
    type: constants.FETCH_SUGGESTIONS,
    payload: res.data
  });

}

症狀建議 （減少劑）：

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_SUGGESTIONS:
      return action.payload;
    default:
      return state;
  }
}

目前，我已將查詢的長度限制為3個或更多，並且每1秒查詢一次以限制對數據庫的API調用。

有了這種實現方式，我還有其他方法可以改善自動完成功能，以減少延遲嗎？

Answer 1

您可以嘗試添加一些去抖動功能。 就像是：

let lastFetched = 0;

onInputChange(event) {
  this.setState({ term: event.target.value });

  if (event.target.value.length >= 3 && (new Date() - new Date(lastFetched )) > 300) {
    lastFetched = Date.now();
    this.props.fetchSuggestions(event.target.value);
  }
}

這樣，您不會在用戶每次鍵入每個字符時都發送請求，而只是在稍等片刻之后，即他完成鍵入后，才發送請求。

Answer 2

可能矯kill過正，但是RxJS（又名Redux-observable）已經消除了內置的抖動，以及許多其他可以節流的運算符。