Javascript 处理大型状态对象

我在React应用程序中处理状态时遇到问题。对于某些背景：应用程序主要呈现一个包含大量数据的大表，然后这些数据可以编辑。数据来自一个单一的源，作为一个大的对象列表（实际上这是一个更复杂的层次结构，但为了这个目的，让我们保持简单），并且应该保持原样。然后，用户可以部分更改大表中的数据，并最终保存所做的更改

由于数据来自单个源，因此我会将数据存储为表状态，并将所有必要的信息传递给各个组件。因此，行只获取行数据作为道具，而单元格只获取单元格数据作为道具。对于单元级别的更新过程，我随后使用反向数据流调用表上的更新方法来更新更新单元的状态：

change (rowIndex, cellIndex, value) {
    this.state.data[rowIndex][cellIndex] = value;
    this.forceUpdate();
}

这在理论上很有效。然而，我有很多数据；该表很容易包含约1000行和多列。这不是一个直接的问题：浏览器渲染表需要一点时间，但一旦它出现，它就可以很好地处理它。此外，React也没有数据量的问题

但问题是，更改单个单元格实质上会触发整个表的重新加载。即使结果只是更改了单个单元格的DOM，也会执行所有渲染方法，其中大多数都不会执行任何操作（因为更改只发生在单个单元格中）

我当前的解决方案是为row组件实现，并对所有可变值执行深度检查，以避免在row和cell级别出现重新排序。但这感觉非常混乱，因为它不仅非常冗长，而且非常依赖于数据结构

所以我真的不知道如何更好地解决这个问题。我目前正在考虑将状态移动到行中，因此也考虑了变异功能，并让表组件根据需要查询行中的更改。或者，我也可以将整个数据移出表，只处理行的标识符，然后使用这些标识符从提供数据和变异函数的中央存储中查询数据。这是可能的，因为整个数据在页面加载时加载一次，然后仅由用户进行修改

我真的不确定如何处理这种情况。我甚至在考虑删除React，将所有内容呈现为静态HTML，并在顶部添加一个自定义JavaScript模块，当请求保存时，该模块可根据需要从实际输入元素中获取数据。有什么办法可以很好地解决这个问题吗

---

如果你想玩弄这种情况，我有一个正在运行的示例。当您键入许多输入字段中的一个时，您会注意到React调用所有

render

函数时会出现延迟，而不会真正更改DOM中的任何内容。

您应该看看PureRenderingMixin和shouldComponentUpdate文档

我对您的代码做了一些更改，这样您就不会直接修改状态，所以shouldComponentUpdate可以正确地比较这些道具，以确定是否需要重新加载。这里的代码有点凌乱，我很快就把它拼凑起来了，但希望它能给出一个如何实现它的好主意

桌子

划船

---

@crush我对使用虚拟化的表/网格解决方案不感兴趣，因为它会阻止浏览器搜索功能。此外，我正在处理的实际应用程序有多个需求，需要定制实现（在得出结论之前，我回顾了许多现有的网格解决方案）。CodePen上的示例只是一个非常简单的示例，只关注数据大小问题。@但是状态实际上不属于行/单元格，因为它是一组连贯的数据和外部组件（表）还负责将其发送回服务器等。我确实希望避免重复状态，并使

onChange

同时影响本地状态（触发本地重新渲染器）和非本地状态（跟踪新值）。状态和数据只能由单个组件拥有，以确保数据的一致性。@请提交您的想法作为答案，并详细解释。我很难理解你的建议。此外，（可编辑）表格中显示的数据是我拥有的和需要处理的数据/状态。请随意使用我的代码笔作为解释的基础。这是一个非常好的主意，它使

shouldComponentUpdate

非常简单，并且独立于数据结构。我可以把它抽象出来，这样我就可以有一些

patchState

函数，它可以像那样更新单行。我喜欢这样：）明天我将在我的完整代码中尝试这个，看看它的性能如何。谢谢

  change (rowIndex, cellIndex, value) {
    this.state.data[rowIndex][cellIndex] = value;
    var newData = this.state.data.map((row, idx) => {
      if(idx != rowIndex){
        return this.state.data[idx]
      } else {
        var newRow = this.state.data[idx].map((colVal, idx) =>{
          return idx == cellIndex ? value : colVal
        })
        return newRow
      }
    });

  shouldComponentUpdate(nextProps){
    return this.props.cells != nextProps.cells;
  }