React Native ScrollView 的延迟加载

问题描述 投票:0回答:1

目前,我的 React Native 应用程序包含许多在 ScrollView 中渲染的复杂组件。我将使用以下方法来优化 ScrollView 的渲染:

  • 跟踪ScrollView偏移的当前位置。
  • 检查ScrollView中组件的位置是否正在被查看,然后渲染Component或者渲染null

您认为这会提高ScrollView的优化吗?我怎样才能关注它是否表现更好?

react-native scrollview lazy-loading
1个回答
0
投票

不会,因为您必须重新渲染才能更新滚动视图渲染的组件。

我不知道你所说的许多复杂组件是什么意思,但是如果有很多你应该使用FlatList/SectionList。有些库可以在处理列表时提供更好的性能。

https://shopify.github.io/flash-list/

https://github.com/Flipkart/recyclerlistview

如果渲染时 ScrollView 项目内部触发了某些逻辑,例如 UseEffecs / Queries / Fetching Image 等...

你可以实施

  1. onViewableItemsChanged

  2. viewabilityConfig

然后使用 forwardRefuseImperativeHandle 您可以将逻辑分配给 ref 并在特定项目可见或即将变得可见时触发它。

这不是一个简单的解决方案,但简而言之,这就是在react-native中优化列表的方法

© www.soinside.com 2019 - 2024. All rights reserved.