使用 forEachNode 的行选择非常慢

Question

我正在使用 AG Grid React。我有一千行数据。我试图根据它们的索引选择一系列行。

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

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

Answer 1

The problem is - setSelected(newValue) dispatches events. When we do it in a loop for a thousand items(say) - there are a thousand events, a thousand requests queued for asynchronous update in React which can be accounted for all the delay.

I fixed it using another version of setSelected - setSelected(newValue, clearSelection, suppressFinishActions). Unfortunately, this is not written in the official documentation. The idea is to use this version for all but the last selection, so that all the event dispatches are supressed and use the normal selection we have been using forever to select the last element so that it also triggers necessary events for onRowSelected, onSelectionChanged, etc. to work normally.

        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);
        }