具有大型数据集的组件仅在 IE11/Edge 上运行缓慢

请考虑下面的代码。 <GridBody Rows={rows} />并假设rows.length将等于任何值 2000 或更多，在此示例中每个数组大约有 8 列。我使用此代码的扩展版本来呈现表的一部分，该部分一直阻碍我的 Web 应用程序。

var GridBody = React.createClass({
    render: function () { 
        return <tbody>
            {this.props.Rows.map((row, rowKey) => {
                    return this.renderRow(row, rowKey);
            })}
        </tbody>;
    },
    renderRow: function (row, rowKey) {
        return <tr key={rowKey}>
            {row.map((col, colKey) => {
                return this.renderColumn(col, colKey);
            })}
        </tr>;
    },
    renderColumn: function (col, colKey) {
        return <td key={colKey} dangerouslySetInnerHTML={{ __html: col } }></td>;
    }
});

现在进入实际问题。看起来计算(即使使用我自己的代码(似乎快得惊人，甚至 ReactJS 与 virtualDOM 的合作也没有问题。

但是在 reactJS 中还有这两个事件。

componentWillUpdate直到一切正常。然后是componentDidUpdate似乎很好，而且都在镀铬上。

问题所在

但是，IE11/Edge比任何其他浏览器慢约4-6秒，而F12-Inspector似乎比Chrome慢P到8秒。

我为尝试解决此问题所做的步骤：

• 去除不必要的代码。

• 将计算时间缩短几毫秒。

• 将网格拆分为松散的组件，以便 virtualDOM 不会尝试以一次更新整个组件。

• 尝试将所有内容交替为字符串并允许对只设置 innerhtml 一次。这实际上似乎是IE中的一个错误在 IE11 上，大字符串大约需要 25-30 秒。并且只有 30 毫秒铬。

我还没有找到合适的解决方案。我上面所做的操作似乎使IE中的事情变得不那么糟糕，但问题仍然存在，即"现代"或"最新"浏览器仍然慢了3-4秒。

更糟糕的是，这似乎几乎冻结了整个浏览器，并且正在渲染。

TL;dr 如何提高IE和其他浏览器(如果可能的话(的整体性能？

如果我的问题不清楚，我深表歉意，我对这件事感到筋疲力尽。

编辑：特别是 DOM 访问在 IE 上很慢，因为设置 innerHTML 被调用超过 10.000 次。这在 ReactJS 中可以防止吗？