反应 setState 慢

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，而是渲染和您在所述状态下搜索事物的方式。

如果我是你，我会在两件事上投入时间：

1. 去抖进行搜索

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 组件 数据

您甚至可以访问 List 演示 here

1. 良好的 UI 设计和分页

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

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

希望我能帮上忙