javascript - 带有选项卡菜单的平面列表

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .


去年关闭。







Improve this question




我正在尝试实现这样的目标:

数据类似于:根类别 -> 子类别 -> 产品。
我们有大约 3000 多种产品。显示所有产品会减慢设备速度(如果我可以做些什么来加快渲染速度，请告诉我)，所以我将它们缩减为子类别，每个子类别中大约有 5-12 个子类别类别，每个子类别中约有 200 种产品。
代码
列表组件:
https://gist.github.com/Fl4zher/5e6f90d3d10e494d0f19395231f25946
标签栏:
https://gist.github.com/Fl4zher/f42afbbc6a57602d0ed4c682d5ac0a20
我所经历的

即使有 200 种产品，该列表也会有点滞后。

当我在选项卡菜单中按下子类别时，需要一段时间才能采取行动(大约 1-2 秒)。

当我滚动时，选项卡菜单并没有很好地跟进。

使用标签菜单几次后，它比以前慢。

我想要的

当我从选项卡菜单中按下一个类别时，我希望它滚动到所选的子类别列表。

当我滚动时，我希望标签菜单跟随当前显示的子类别列表。

Answer 1

首先，keep away from ScrollView对于这种必须动态渲染大量数据的用例，Scrollview 是一个滚动容器，如果您有大量数据会导致性能问题并使 JS 线程繁忙，它会渲染一次所有数据。
现在您可以选择使用

RecyclerView

FlatList

SectionList

现在以上三个 ListView 都提供了 onEndReached方法和 onEndReachedThreshold (触发 onEndReached 或距底部距离的阈值)
在到达列表末尾之前，对您的服务器进行网络调用并获取更新的数据并将其添加到列表中，如下所示 [...oldData, ...NewData]

设置您的initialNumToRender到 10 或 20(覆盖 View 并且到底部有一些可滚动距离)

设置 maxToRenderPerBatch因此即使将其加载到列表中，也不会渲染所有渲染。

设置 windowSize所以 List 将保持它是一个可 ScrollView 的 View ，并且当它离开 View 时不会卸载 View 。