如何在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）已经消除了内置的抖动，以及许多其他可以节流的运算符。