如何通过大桌子提高性能？

Question

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

所以看起来像：

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

当我重新渲染父组件（子组件在shouldComponentUpdate停止，因此不重新渲染）时，它不需要花费很多时间。

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

当我重新渲染一个孩子时，它会重新渲染。

也许它会考虑反应虚拟DOM计算？

我应该看一下其他测试/方向吗？

修改：

孩子的shouldComponentUpdate非常小，看起来像：

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

Answer 1

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