如何使用大表提高性能？

Question

我有一个包含表格的父容器（每一行都是一个子组件）。 子组件在数据方面有点重（有很多图像）

所以它看起来像：

<parent>
    <child> </child>
    <child> </child>
    <child> </child>
    ...
</parent>

不是当我重新渲染父组件时（子组件在shouldComponentUpdate处停止，所以不会重新渲染），它需要很多时间。

Perf.timeWasted 没有显示任何内容。

当我重新渲染一个孩子时，它重新渲染得很快。

也许它与 react 虚拟 DOM 计算有关？

还有其他的测试/方向我应该看看吗？

编辑：

孩子的 shouldComponentUpdate 很小，看起来像：

shouldComponentUpdate(nextProps, nextState) {
    let shouldUpdate =nextProps.test1;
    return shouldUpdate;
}

Answer 1

您可以尝试使用库 react-virtualized 或 react-infinite 中的 InfiniteLoader。感谢这个库将只呈现可见组件。这会提高你的表现。