React JS中HTML表的懒惰加载实现



我有一个API,它返回数千条记录。当我在屏幕上渲染时,UI开始滞后。所以我想用惰性加载来实现它。

我想在用户滚动时加载更多数据,从UI中删除元素,并在用户滚动的时候渲染新元素。这意味着我只想在UI上渲染所需的数据,但我找不到任何好的资源来延迟加载表数据。

我已经为此创建了一个代码沙盒
https://codesandbox.io/s/gallant-nightingale-glvdp8

有人能帮我做同样的事吗?

谢谢。

在这种情况下,我们可以使用两种方法:

1-React Window库:https://react-window.vercel.app/#/examples/list/fixed-尺寸

2-从头开始创建懒惰加载行为,但这需要在后端进行一些更改,因为我们将数据划分为多个页面,并一次发送一个页面(其中将包含n条记录(,您可以在这里看到如何实现它:https://www.youtube.com/watch?v=NZKUirTtxcg

最新更新