React:如何仅渲染可见元素

我构建了一个组件,该组件在props中获取一个json并显示它,用户可以对其进行编辑,并且具有很多功能,如下所示:

enter image description here

当用户加载大json时,组件的渲染时间非常慢。所以,我只想渲染可见元素,而不是json中的所有元素,这样会更快。 (如您所见,溢出-y时有一个滚动条)。

I saw there are a lot of libraries which support what I want, like react-window, or react-virtualized etc. The problem is those libraries expect to receive a list of components, like this:

enter image description here

在我的组件中,所有组件彼此嵌套,例如json,并且功能非常复杂。

1)是否有图书馆可以解决我的问题?

2)除了仅渲染可见元素之外,还有其他解决方案来解决慢渲染问题吗?

评论