Question

所以我用React编写了一个应用程序，发生的事情是我的组件在其状态下有一个相当大的列表。我从网络获取JSON文件，然后将过滤后的副本直接存储到组件的状态。可能是不理想的解决方案但我认为仍然没问题，React应该处理它我的意思是，它只有10 kB。

无论如何，我决定向我的组件添加搜索输入并将其值存储到其状态。现在我有大型列表和searchInput在其状态，我设置每个onChange并基于此过滤列表。

那太慢了。每个setState都刷新列表并对组件的每个子节点和子节点执行componentUpdates，这基本上使搜索无法使用。

所以我的问题是如何解决这个问题？我应该将过滤后的列表存储在redux存储中而不是本地组件状态吗？这似乎不是一个好的解决方案，因为我现在有一个全局searchInput值，我必须在休假时重置和删除，我认为这更好地作为本地值。

以下是目前的情况：

list -> component -> filter list -> child -> split the list into 4 -> subchild -> map the sublist -> render the list item values

我还想到的是添加额外的列表，其中的值显示应该隐藏/显示哪些项目，而不是操纵大型列表我正在操作较小的项目ID列表。这看起来有点傻，这件事不应该这么难，我的意思是人们已经用JS和HTML做了很长一段时间。我正在考虑用Vue重新创建相同的组件，以便看到它会更好（我认为它会更好）。

Answer 1

我看到了你的问题。它实际上并不是setState，它实际上是渲染以及在所述状态下搜索事物的方式。

如果我是你，我会花时间做两件事：

debounce 进行搜索

debounce 不会立即触发搜索，但会“等待”一段时间让用户停止输入，然后触发该功能。

这是React中的一个例子：

// you can use another one. I've just used this one before and it works
import debounce from "throttle-debounce";

class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        // "waits" for 750 ms
        this.search = debounce(this.search, 750);
    }

    search() { ... }

    render() {
      <input type="text" onKeyUp={this.search} />
    }
}

如果您有一个大清单，那么memoization是一个不错的选择。您可以使用react-virtualized。

用于有效渲染大型列表和表格的反应组件数据

您甚至可以访问列表演示here

良好的用户界面设计和分页

react-virtualized 列表组件只会呈现用户看到的内容。因此，如果你有一个很好的UI设计，你可以从一个非常大的值列表中获得很多性能。

很多时候，它归结为您向最终用户显示数据的方式。因此，您可以为数据添加分页，并使用分页链接或无限滚动功能获取更多内容。

希望我帮助

React setState slow

1 个答案: