相关疑难解决方法(0)

我正在使用React实现可过滤列表.列表的结构如下图所示.

前提

以下是它应该如何工作的描述:

• 状态位于最高级别组件即Search组件中.
• 该州描述如下:

{
    visible : boolean,
    files : array,
    filtered : array,
    query : string,
    currentlySelectedIndex : integer
}

• files 是一个可能非常大的数组,包含文件路径(10000个条目是一个合理的数字).
• filtered是用户键入至少2个字符后的过滤数组.我知道它是衍生数据,因此可以将其存储在状态中,但需要它

• currentlySelectedIndex 这是筛选列表中当前所选元素的索引.

• 用户在Input组件中键入2个以上的字母,对数组进行过滤,对于过滤后的数组中的每个条目,Result都会呈现一个组件

• 每个Result组件都显示部分匹配查询的完整路径,并突出显示路径的部分匹配部分.例如,Result组件的DOM,如果用户键入'le',则类似于:

  <li>this/is/a/fi<strong>le</strong>/path</li>

• 如果用户在Input组件聚焦时按下向上或向下键,则currentlySelectedIndex基于filtered阵列进行更改.这会导致Result与索引匹配的组件被标记为选中,从而导致重新呈现

问题

最初我用一个足够小的数组测试了这个files,使用了React的开发版本,并且一切正常.

当我不得不处理一个files大到10000个条目的数组时,问题出现了.在输入中键入2个字母会生成一个大列表,当我按下向上和向下键进行导航时,它会非常滞后.

起初我没有为Result元素定义组件,我只是在Search组件的每个渲染上动态制作列表,如下:

results  = this.state.filtered.map(function(file, index) {
    var start, end, matchIndex, match = this.state.query;

     matchIndex = file.indexOf(match);
     start = file.slice(0, matchIndex);
     end …