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

前提

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

• 状态驻留在最高级别的组件中，即 Search 组件。
• 状态描述如下:

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

• files is a potentially very large, array containing file paths (10000 entries is a plausible number).
• filtered is the filtered array after the user types at least 2 characters. I know it's derivative data and as such an argument could be made about storing it in the state but it is needed for

• currentlySelectedIndex which is the index of the currently selected element from the filtered list.

• User types more than 2 letters into the Input component, the array is filtered and for each entry in the filtered array a Result component is rendered

• Each Result component is displaying the full path that partially matched the query, and the partial match part of the path is highlighted. For example the DOM of a Result component, if the user had typed 'le' would be something like this :

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

• If the user presses the up or down keys while the Input component is focused the currentlySelectedIndex changes based on the filtered array. This causes the Result component that matches the index to be marked as selected causing a re-render

PROBLEM

Initially I tested this with a small enough array of files, using the development version of React, and all worked fine.

The problem appeared when I had to deal with a files array as big as 10000 entries. Typing 2 letters in the Input would generate a big list and when I pressed the up and down keys to navigate it it would be very laggy.

At first I did not have a defined component for the Result elements and I was merely making the list on the fly, on each render of the Search component, as such:

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 = file.slice(matchIndex + match.length);

     return (
         <li onClick={this.handleListClick}
             data-path={file}
             className={(index === this.state.currentlySelected) ? "valid selected" : "valid"}
             key={file} >
             {start}
             <span className="marked">{match}</span>
             {end}
         </li>
     );
}.bind(this));

如您所知，每次 currentlySelectedIndex 更改时，都会导致重新呈现，并且每次都会重新创建列表。我认为，因为我在每个 li 元素上设置了一个 key 值，React 会避免重新渲染所有其他没有它的 li 元素className 发生了变化，但显然并非如此。

我最终为 Result 元素定义了一个类，它在其中明确检查每个 Result 元素是否应该根据之前是否被选中并基于当前用户输入:

var ResultItem = React.createClass({
    shouldComponentUpdate : function(nextProps) {
        if (nextProps.match !== this.props.match) {
            return true;
        } else {
            return (nextProps.selected !== this.props.selected);
        }
    },
    render : function() {
        return (
            <li onClick={this.props.handleListClick}
                data-path={this.props.file}
                className={
                    (this.props.selected) ? "valid selected" : "valid"
                }
                key={this.props.file} >
                {this.props.children}
            </li>
        );
    }
});

现在列表是这样创建的:

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

    matchIndex = file.indexOf(match);
    start = file.slice(0, matchIndex);
    end = file.slice(matchIndex + match.length);
    selected = (index === this.state.currentlySelected) ? true : false

    return (
        <ResultItem handleClick={this.handleListClick}
            data-path={file}
            selected={selected}
            key={file}
            match={match} >
            {start}
            <span className="marked">{match}</span>
            {end}
        </ResultItem>
    );
}.bind(this));
}

这使性能略微更好，但仍然不够好。事情是当我在 React 的生产版本上测试时，一切都非常顺利，没有任何延迟。

底线

React 开发版本和生产版本之间如此明显的差异是否正常？

当我思考 React 如何管理列表时，我是否理解/做错了什么？

2016 年 11 月 14 日更新

我找到了 Michael Jackson 的这个演讲，他在其中解决了一个与这个非常相似的问题:https://youtu.be/7S8v8jfLb1Q?t=26m2s

该解决方案与 AskarovBeknar 的 answer 提出的解决方案非常相似, 下面

2018 年 4 月 14 日更新

由于这显然是一个热门问题，并且自从提出原始问题以来事情已经取得了进展，同时我鼓励您观看上面链接的视频，为了掌握虚拟布局，我也鼓励您使用React Virtualized图书馆，如果你不想重新发明轮子。

最佳答案

与这个问题的许多其他答案一样，主要问题在于在过滤和处理关键事件的同时在 DOM 中呈现如此多的元素将会很慢。

对于导致问题的 React，您并没有做任何本质上的错误，但与许多与性能相关的问题一样，UI 也可能承担很大一部分责任。

如果您的 UI 设计时没有考虑到效率，即使像 React 这样旨在提高性能的工具也会受到影响。

如@Koen 所述，过滤结果集是一个很好的开始

我试了一下这个想法，并创建了一个示例应用程序来说明我可能会如何着手解决此类问题。

这绝不是 production ready 代码，但它确实充分说明了概念并且可以修改为更健壮，请随时查看代码 - 我希望至少它给了你一些想法......;)

react-large-list-example

关于javascript - React 的大列表性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38033442/