Javascript 反应:如何仅渲染可见元素

Javascript 反应:如何仅渲染可见元素,javascript,reactjs,performance,Javascript,Reactjs,Performance,我构建了一个组件,它在道具中获取json,并显示它,用户可以编辑它,具有很多功能,如下所示: 当用户加载一个大的json时,组件的呈现时间非常慢。因此,我只想呈现可见元素,而不是json中的所有元素,这样会更快。(如您所见,溢出-y时有一个滚动条) 我看到有很多库支持我想要的,比如react window,或者react virtualized等等。问题是这些库希望收到一个组件列表,如下所示: 在我的组件中,所有组件都相互嵌套,就像json一样,功能非常复杂 1) 有解决我问题的图书馆吗 2

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

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

我看到有很多库支持我想要的,比如
react window
,或者
react virtualized
等等。问题是这些库希望收到一个组件列表,如下所示:

在我的组件中,所有组件都相互嵌套,就像json一样,功能非常复杂

1) 有解决我问题的图书馆吗


2) 除了只渲染可见元素外,是否还有另一种缓慢渲染的解决方案?

此库是用于显示json的自定义组件。我自己构建了这种组件,所以我对功能有灵活性,所以这个库对我没有帮助:(我需要一些东西来帮助我显示json fast
1)有一个库可以解决我的问题吗?
学习使用其他人的库来解决你的问题是作为开发人员的一个关键部分。同意你的观点,但在某些特定情况下,我必须自己构建组件尝试使用库,看看它是否遇到与你相同的问题。如果没有,请通读它的代码,找出它的不同之处。TBH,奇怪的是,你会接受一个库解决方案来修复你的“缓慢渲染”,但你不会接受一个库解决方案来替换你所构建的。坦率地说,您的组件将没有rjv那样的文档、稳定性、灵活性和可定制性。在rjv周围编写一个包装器来提供您想要的精确功能比从头开始编写自己的rjv更有价值。此库是一个用于显示json的自定义组件。我自己构建了这种组件,所以我对功能有灵活性,所以这个库对我没有帮助:(我需要一些东西来帮助我显示json fast
1)有一个库可以解决我的问题吗?
学习使用其他人的库来解决你的问题是作为开发人员的一个关键部分。同意你的观点,但在某些特定情况下,我必须自己构建组件尝试使用库,看看它是否遇到与你相同的问题。如果没有,请通读它的代码,找出它的不同之处。TBH,奇怪的是,你会接受一个库解决方案来修复你的“缓慢渲染”,但你不会接受一个库解决方案来替换你所构建的。坦率地说,您的组件将没有rjv那样的文档、稳定性、灵活性和可定制性。围绕rjv编写一个包装器来提供您想要的精确功能比从头开始编写自己的rjv更有价值。