javascript - 使用一个巨大的状态对象

Question

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

由于数据来自单一来源，我是 thinking in React并将数据存储为表状态，并将所有必要的内容传递给各个组件。因此，一行仅获取行数据作为 prop，而单元格仅获取单元格数据作为 prop。对于单元格级别的更新过程，我然后使用反向数据流调用表上的更新方法来更新已更新单元格的状态:

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

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

但问题是，更改单个单元格 本质上会触发整个表格的重新呈现。即使结果仅针对单个单元格更改了 DOM，所有渲染方法都会执行，其中大多数方法什么都不做(因为更改仅发生在单个单元格中)。

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

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

我真的不确定如何处理这种情况。我什至考虑为此放弃 React，并将所有内容呈现为静态 HTML，并在顶部使用自定义 JavaScript 模块，在请求保存时从实际输入元素中按需获取数据。有什么好的方法可以解决这个问题吗？

如果您想尝试这种情况，我有一个运行示例 on CodePen .当您在众多输入字段之一中输入内容时，您会注意到 React 调用所有 render 函数而没有真正更改 DOM 中的任何内容的延迟。

Answer 1

你应该看看 PureRenderingMixin 和 shouldComponentUpdate 文档

我对您的代码做了一些更改，这样您就不会直接修改状态，因此 shouldComponentUpdate 可以正确比较 Prop 以确定是否需要重新渲染。这里的代码有点乱，我很快就把它拼凑在一起了，但希望它能很好地说明如何实现它。

http://codepen.io/anon/pen/yYXbaL?editors=001

表格

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