在React中创建网格组件 - 混淆了放置状态的位置

Question

我是React新手。我正在构建一个带有检查列的通用网格组件（类似于Gmail收件箱），因此用户可以通过单击标题中的复选框轻松选择多行（或所有行）。

Grid组件由GridHeader和GridRows（由GridCells组成）组成。

        <table className="grid">
            <GridHeader ... />
            <tbody>
                {rows}
            </tbody>
        </table>

对于每个GridRow，我在第一列中呈现一个复选框，用于切换该行的“已选择”状态。

<input type='checkbox' checked={selected} onChange={this.handleChange}/>

...

handleChange: function (event) {
    this.setState({selected: event.target.checked});
},

就更新UI而言，这样做很好：

...但是此Grid组件的用户需要使用API​​调用以某种方式访问​​所选行/记录，如下所示：

grid.getSelected()

如果getSelected（）方法必须迭代每一行以查询其选定状态，那将是非常低效的。所以我想把选择状态转移到Grid的状态。我担心的一个问题是，现在只要Grid的state.selected发生变化，它就会导致整个网格被重新渲染。

或者，网格可以将选定项目的数组保存在与状态分开的变量中：

getSelected() { return this.selected } // array of selected row indices

每个单独的行仍然可以保持自己选择的状态，因此可以更新UI，但是may be an anti-pattern现在已经不再是选择模型的一个真实来源了。

有人可以指导我在哪里保留此网格的选择状态吗？

另外，如果我确实需要迭代网格组件中的行，我是否必须在每行附加一个引用并迭代引用？

我试图不要过多地复杂化这个问题，但请记住，网格需要支持GridHeader中的“全选”复选框，该复选框应选择网格中的所有行（如Gmail的收件箱中）。