认识 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