如何在加载数据时同时渲染FlatList的listItem？

Question

我有{data.word}组件。

并且，我从JSON文件加载了大约100,000个单词的数据。

使用以下代码进行搜索时。如果结果返回10,000个单词。这需要4-5秒。然后，刚刚更新了。

for(let i = 0, l = data.length; i < l; ++i) {
            if(data[i].word.toLowerCase().indexOf(inputText) === 0){
                filteredWords.push(glossaries[i]);
            }
}

我的问题是我如何加载搜索数据并同时开始渲染平面列表，或者是否有更好的代码来执行更快的搜索。 （我当前的应用程序，当我在搜索框上输入搜索词时，显示更新的平面列表需要4-5秒才能看起来很尴尬。

谢谢

Answer 1

100000个条目需要进行大量搜索，尤其是当您在移动设备上的JS运行时执行此操作时，该移动设备也负责其他应用程序。我建议的一些优化：

• 如果您只想匹配单词的开头（例如，“mat”将匹配“床垫”但“at”不匹配），请查看类似Suffix Tree的数据结构。实施此操作可以大大加快您的搜索时间。
• 我看到你在循环播放时将所有单词转换为小写，尝试使用小写的所有单词提供单词数据，这样你就不需要运行此操作100000次了每次击键。
• 确保您只渲染一次，并且每次找到匹配项时都不会重新渲染列表。只有在完成字符串查找后才更新组件状态。

这些调整应该会让你的应用变得更加快捷。