标签：FlatList 列表 React 组件 FlashList Native
认识 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。