首页 文章

ReactNative FlatList一次渲染所有项目?

提问于
浏览
3

我正在使用ReactNative的新List组件 - FlatList .

即使单元格在屏幕上实际不可见,FlatList似乎也会立即呈现所有项目 .

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

根据项目的总数调用设置30个项目并且似乎“呈现”警告 .

我认为FlatList类似于Android中RecycleView的工作方式,只有当它在屏幕上可见时才会呈现项目 .

我错过了什么吗?它不会降低性能吗?
我希望它只能在它即将展示时呈现一个项目 .

2 回答

  • 0

    它是一样的 . 在文档中,您可以找到以下内容:

    为了约束内存并启用平滑滚动,内容在屏幕外异步呈现 . 这意味着可以比填充率更快地滚动,并暂时看到空白内容 . 这是一个可以根据每个应用程序的需求进行调整的权衡,我们正在努力在幕后进行改进 .

    因此它不会立即渲染所有项目 .

    除此之外:

    这是一个PureComponent,这意味着如果道具保持浅层相等,它将不会重新渲染 . 确保renderItem函数所依赖的所有内容在更新后作为prop(例如extraData)传递,而不是===,否则您的UI可能无法更新更新 . 这包括数据支柱和父组件状态 .

    如果您需要更多详细信息,请告诉我 .

  • 0

    FlatList提前渲染太多项目以获得更好的填充率 . 我们有类似的问题 . 我们构建RecyclerListView以解决此类问题 . 与RecyclerView非常相似,但它只是JS . 它比FlatList更快,并且在Flipkart进行了战斗测试 . 你可以尝试一下 .

    链接:https://github.com/Flipkart/ReactEssentials

    你可以在这里阅读更多相关信息:https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

相关问题