大桌子如何提高性能？

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

您可以尝试使用来自liblary react-virtualized或react-infinite的 InfiniteLoader。 谢谢，此库将仅呈现可见组件。 这样可以提高性能。