javascript - react setState 慢

Question

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

无论如何，我决定向我的组件添加一个搜索输入并将它的值存储到它的状态中。现在，我同时拥有大列表和 searchInput 状态，我正在设置每个 onChange 并根据它过滤列表。

那是 super 慢的。每个 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，而是呈现和您在所述状态下搜索事物的方式。

如果我是你，我会把时间花在两件事上:

1. 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} />
    }
}

1. 如果您的名单很大，那么 memoization是一个不错的选择。您可以使用 react-virtualized为此。

React components for efficiently rendering large lists and tabular data

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

1. 良好的 UI 设计和分页

react-virtualized List 组件只会渲染用户看到的内容。因此，如果您有一个漂亮的 UI 设计，您可以从一个非常大的值列表中获得大量性能。

很多时候，这取决于您如何向最终用户显示数据。因此，您可以为数据添加分页，并使用分页链接或无限滚动功能获取更多内容。

希望对你有帮助