使用 forEachNode 的行选择非常慢

Question

我正在使用 AG Grid React。我有一千行数据。我正在尝试 select 基于索引的一系列行。

    gridOptions.api.forEachNode(node => {
        if (node.childIndex >= startIndex && node.childIndex < endIndex) {
            node.setSelected(true)
        }
    });

事实证明这是非常糟糕的，通常在 UI 上需要 30 秒。似乎 setSelected 触发了多个渲染周期。正确的做法是什么？

Answer 1

您可以尝试使用分页来加载数据块而不是整个数据。 Pagination Docs

Answer 2

确保您没有订阅任何可能导致您的代码变慢的事件，例如onRowSelected，onSelectionChanged。每个

都会触发这些

node.setSelected(true)

如果您确实有任何这些订阅事件，解决此问题的一种可能方法是在循环之前取消订阅，然后在循环之后重新订阅。

此外，根据您的用例，您可能希望使用

forEachNodeAfterFilter(node)

为了只循环可见节点而不是

forEachNode(node)

Answer 3

问题是 - setSelected(newValue) 调度事件。当我们在一个循环中为一千个项目（say）执行它时 - 有一千个事件，一千个请求在 React 中排队等待异步更新，这可以解释所有的延迟。

我使用另一个版本的 setSelected - setSelected(newValue, clearSelection, suppressFinishActions) 修复了它。不幸的是，这没有写在官方文档中。我们的想法是将此版本用于 除了最后一个 selection，以便所有事件调度都被抑制并使用我们一直使用的正常 selection使用 forever 到 select 最后一个元素，这样它也会触发 onRowSelected、onSelectionChanged 等正常工作所需的事件。

        this.api.forEachNodeAfterFilter(node => {
            if (node.childIndex >= startIndex && node.childIndex < endIndex) {
                selectedNodes.push(node);
            }
        });

        if (selectedNodes.length > 0) {
            // setSelected re-renders every time so use suppressFinishActions except last one
            for (let i = 0; i < selectedNodes.length - 1; i++) {
                selectedNodes[i].setSelected(true, false, true);
            }
            selectedNodes[selectedNodes.length - 1].setSelected(true);
        }

使用 forEachNode 的行选择非常慢

Row selection using forEachNode very slow

ag-grid