其他分享
首页 > 其他分享> > 认识 FlashList:React Native 的 FlatList 更好的替代品

认识 FlashList:React Native 的 FlatList 更好的替代品

作者:互联网

认识 FlashList:React Native 的 FlatList 更好的替代品

切换优势的简要指南

Photo by 格伦·卡斯滕斯-彼得斯 on 不飞溅

自从我开始使用 React Native 进行开发以来,我肯定和其他人一样,至少遇到过十几次这样的警告:

VirtualizedList:您有一个更新缓慢的大型列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件,如 PureComponent、shouldComponentUpdate 等。{“dt”:13861、“prevDt”:1498372326027、“contentLength”:第6624章

似乎很熟悉,对吧?这通常发生在我们用许多项目填充 FlatList 时,这些项目不仅仅是静态图像或文本,而是包含一些动画或其他交互的组件。

这里的 FlatList 只是说它无法处理列表以平滑渲染。您始终可以将其作为警告忽略,但这并不意味着它会消失。我希望我们能生活在这样的世界里。

Photo by JESHOOTS.COM on 不飞溅

在跳到解决方案之前,让我们深入研究此消息并找出这些数字是什么:

平面列表 ,这是基于 滚动视图 , 使用一个名为 虚拟化列表 .在引擎盖下, 虚拟化列表 利用渲染 API 负责以滚动的形式显示可枚举的项目列表。也许我们没有注意到它,因为我们拥有最新的 iPhone,而且我们整天都在通过 Instagram 帖子顺利完成。滚动动作对于移动应用程序来说是一项巨大的流程密集型任务,因为它不仅需要从上或下为下一个即将出现的内容进行预渲染,而且它还必须在该内容处于视口。

这些密集计算称为“批次”,任何超过前一个批次大小的批次都称为“增量”。所以数字是 dt (三角洲), 上一篇 (以前的增量)并以时间戳表示,表示批次之间经过的时间。最后一个数字是 内容长度 ,这是 React Native 的 unitless(!) 单元中的整个内容大小。每当任何 delta 值超过 500ms 并且 内容长度 超过视口大小的五倍,则会触发此错误。这就是极限 虚拟化列表 正常工作。

所以你对此能做些什么?你可以在网上搜索或参考 平面列表 在 React Native 的官网上,想出了一些优化渲染过程的技巧。这些包括使用 initialNumToRender 或者 removeClippedSubviews 道具,也许记忆项目组件或使其成为纯粹的。大多数情况下,无论你使用什么都会让这条消息消失,你会没事的。

但…

即使看起来没问题,如果您的项目在低端设备上运行,尤其是 Android 设备,您仍然可能会收到此错误。因为只是那些技术也需要进行一些计算才能解决。话虽如此,我们需要做的是将这个进程负担重定向到其他线程。也许,为什么不,UI,对吧?

认识 FlashList!一种在 UI 线程上运行的 FlatList 替代方案,正如他们在其网站上声称的那样,它在 JS 上的运行速度提高了 10 倍,在 JS 线程上运行速度提高了 5 倍。即使只考虑一半的改进——这些都是非常好的性能提升。

要使用它,您只需要使用以下命令安装 FlashList:

 纱线添加@shopify/flash-list

如果您需要更换现有的 pod install.而已!

是的,FlashList 非常易于使用,因为它具有与 FlatList 相同的属性。这意味着 数据 , 渲染项 , ListEmptyScrollComponent , 等等。唯一的区别是它使用 回收站视图 代替 虚拟化列表 作为底层组件,我们上面提到的性能道具是不必要的。相反,您可以查看其他性能和诊断道具 https://shopify.github.io/flash-list/docs/usage .

最为显着地, 估计项目大小 您提供单个组件的高度。如果列表中的每个项目都具有相同的大小,那么它会非常快,因为 FlashList 不需要单独重新计算项目的大小。如果它很灵活,您可以获取元素高度的总和并将其提供给该道具。

另一方面,如果您针对的是低端设备,则可能需要额外调整其他道具,例如 获取项目类型 或者 覆盖项目布局 . “轻组件”逻辑仍然适用于 FlashList,因此您可以查看 https://shopify.github.io/flash-list/docs/fundamentals/performant-components 优化您的组件。

到目前为止,我个人没有在生产中使用这个库,但是我在我的旧三星 S5 手机上做了一些测试,我可以看出当我使用 FlashList 时滚动性能变得更好。以前快速滚动时有明显的空白区域,当我切换到它时它们都消失了。

你可以去看看图书馆 https://shopify.github.io/flash-list/ 并轻松地用这个替换您现有的 FlatLists。我相信您会注意到性能的提升,尤其是当您在项目中使用动画或复杂布局时。

谢谢阅读!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/36972/20081612

标签:FlatList,列表,React,组件,FlashList,Native
来源: https://www.cnblogs.com/amboke/p/16699403.html