如何在React / Redux中使自动完成更快,更流畅?

时间:2018-06-28 09:00:14

标签: reactjs redux autocomplete

我已经实现了带有自动完成功能的搜索栏。

输入组件具有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调用。

鉴于此实施方式,我还有其他方法可以改善自动完成功能以减少延迟吗?

2 个答案:

答案 0 :(得分:0)

您可以尝试添加一些去抖动功能。像这样:

## https://square.github.io/retrofit/ ##
-dontwarn retrofit2.**
-keep class retrofit2.** { *; }
-keepattributes Signature
-keepattributes Exceptions
 -keepclasseswithmembers class * {
    @retrofit2.http.* <methods>;
}

## Simple XML ##
-dontwarn org.simpleframework.xml.stream.**
-keep public class org.simpleframework.** { *; }
-keep class org.simpleframework.xml.** { *; }
-keep class org.simpleframework.xml.core.** { *; }
-keep class org.simpleframework.xml.util.** { *; }

-keepattributes ElementList, Root, *Annotation*

-keepclassmembers class * {
    @org.simpleframework.xml.* *;
}

这样,您不会在每次用户键入每个字符时都发送请求,而只是在稍等片刻之后,即他完成输入后发送请求。

答案 1 :(得分:0)

这也许有些矫kill过正,但是RxJS(又名redux-observable)已经消除了内置的抖动,以及许多其他可以节流的运算符。