Ag-grid-react 未正确刷新答案

【问题标题】：Ag-grid-react Not Refresh properlyAg-grid-react 未正确刷新
【发布时间】：2017-11-15 19:39:53
【问题描述】：

我是 Ag-grid-react 的新手。目前，App 中有一个简单的反应表可以正常工作，但它没有像 Ag-grid 这样的强大功能。我正在考虑切换到 Ag-grid-react。

但是，在实施过程中。我发现当我将外部数据源中的道具更新到 Ag-grid 时。 Ag-grid-react 会自动重新渲染整个表格并忘记之前的设置。

我使用 Meteor 1.4 作为平台，React 15.4.2 作为框架。

问题： this.props.data 是我要显示的外部数据源。它适用于第一次渲染，但是当我从外部更改单元格值时。这个道具变了。它会重新渲染表格。如何避免自动重新渲染而只更改我已更改的单元格值？

我在文档中看到有 API 可以调用并更改 Ag-grid 中的行数据。如果我使用 API，那么每次我的数据更改时都需要在数据源中进行 prev props 和 current props 检查，并使用 API 将更改发送到 Ag-grid。是否应该 React 会自动检查并仅重新渲染我已更改的子组件？

如果有解决此问题的方法，请告诉我。

部分代码：

class MasterDetailExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rowData: this.props.data,
            columnDefs: this.createColumnDefs(),
        };
        this.onGridReady = this.onGridReady.bind(this);
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
    }

...//Some code for createColumnDefs()

    isFullWidthCell(rowNode) {
        return rowNode.level === 1;
    }

    getRowHeight(params) {
        let rowIsDetailRow = params.node.level === 1;
        return rowIsDetailRow ? 200 : 25;
    }

    getNodeChildDetails(record) {
        if (record.callRecords) {
            return {
                group: true,
                key: record.name,
                children: [record.callRecords],
            };
        } else {
            return null;
        }
    }

    render() {
        return (
            <div style={{height: 1000 , width: "100%" }}
                 className="ag-fresh">
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}

                    isFullWidthCell={this.isFullWidthCell}
                    getRowHeight={this.getRowHeight}
                    getNodeChildDetails={this.getNodeChildDetails}
                    fullWidthCellRendererFramework={DetailPanelComponent}

                    enableSorting
                    enableColResize
                    suppressMenuFilterPanel

                    onGridReady={this.onGridReady}>
                </AgGridReact>
            </div>
        );
    }
};

【问题讨论】：

如果你传递给 AgGridReact 的 props 改变了，整个组件会重新渲染，没有办法。除非您实现将数据单独获取为自己的 props 的单元格，否则 React 将始终如此。除此之外，我的 2 美分：Ag-grid 有一个翻译 API 的 React 包装器，但根据我的经验，它不能很好地与 React(/Redux) 集成，尽管正在努力：ag-grid.com/ag-grid-react-datagrid。 React-virtualized 是一个有趣的替代方案（我正在使用 Ag-grid，我可能会为此进行更改）。
其实，仔细阅读我刚才复制的链接，我注意到有一个新的deltaRowDataMode 可以回答你的问题。页面的最后一段。

标签： ag-grid-react

【解决方案1】：

就像@JulienD 已经提到的那样，deltaRowDataMode 是那里的关键。

设置deltaRowDataMode={true}
而不是参数rowData 在onGridReady 回调和componentDidUpdate 中使用setRowData()
别忘了getRowNodeId={data => data.id}

这将为您比较和更新确切的行。

文档：https://www.ag-grid.com/javascript-grid-data-update/#delta-row-data

【讨论】：