jjzjj

javascript - 大列表的 React-Native FlatList 性能问题

coder 2024-07-21 原文

我的代码使用 FlatList 将 Json 数据获取到数组中列出数据.它看起来像一排电话簿照片和文字。

这是我的代码:

  renderItem = ({ item }) => 
    (
    <ListItem
      title={item.username}
      avatar={{ uri: item.photo }}
    />
    )


  render() {
    console.log(this.state.myData);
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.myData}
          renderItem={this.renderItem}
        />
      </View>
    );
  }

它的工作原理，我得到了输出，但性能很慢。渲染大约需要 10 秒，这对用户来说很烦人。我该怎么做才能让它更快？

最佳答案

编辑 2019 年 12 月 20 日 : 这个答案的信息成为了 official docs 的一部分.你应该检查一下!

编辑 2018 年 5 月 26 日 : 这个答案变成了bigger and more complete post on github

如果您关注 this thread ，你会看到 React 的团队已经意识到这个性能问题。
这个问题没有 Elixir ，你必须考虑每种方法的权衡以及你认为对你的观众来说是一种很好的体验。但幸运的是，您可以尝试一些调整来改进您的 FlatList .

术语和含义
一开始我使用了很多术语(在 docs 或一些问题上)让我感到困惑。所以，让我们从一开始就解决这个问题。

  • VirtualizedList 是 FlatList 后面的组件，并且是 React Native 对 ' virtual list 的实现' 概念。
  • 性能 ，在这种情况下，意味着平滑(而不是断断续续)滚动(以及导航进入或退出列表)体验。
  • 内存消耗 ，在这种情况下，是指在内存中存储了多少有关您的列表的信息，这可能会导致应用程序崩溃。
  • 空白区域 意味着 VirtualizedList 无法足够快地呈现您的项目，因此您使用未呈现的组件输入列表的一部分。
  • 窗口这里不是您的视口(viewport)，而是应呈现项目的区域的大小。

    • Prop
    改善您的 FlatList 的一种方法是通过调整它的 Prop 。这里有一个 Prop 列表，可以帮助你做到这一点。
    删除剪辑 subview
    您可以设置 removeClippedSubviews prop 为 true，即卸载窗口外的组件。
    赢:这对内存非常友好，因为您总会有一个小的渲染列表。
    权衡:请注意，如果您在不会卸载的组件(例如导航路线)上使用此实现，则可能存在错误，例如缺少内容。
    它也可能性能较差，在不太好的设备上为包含复杂项目的大列表提供断断续续的滚动动画，因为它每次滚动都会进行疯狂的计算。
    maxToRenderPerBatch
    您可以设置 maxToRenderPerBatch={number} ，这是一个 VirtualizedList可以直接传递给 FlatList 的 Prop .有了这个，您可以控制每批渲染的项目数量，这是在每次滚动时渲染的下一个项目块。
    赢:设置更大的数字意味着滚动时更少的视觉空白区域(更好的填充率)。
    权衡:每批项目越多意味着 JavaScript 性能越低，这意味着响应速度越慢(单击项目并打开详细信息)。如果您有一个静态和非交互式列表，这可能是要走的路。
    初始数量到渲染
    您可以设置 initialNumToRender={number} .这意味着要渲染的项目的初始数量。
    赢:您可以将此值设置为覆盖每个设备屏幕的精确项目数。在渲染列表组件时，这可以极大地提升性能。
    权衡:设置低 initialNumToRender 时，您最有可能看到空白区域。 .
    窗口大小
    您可以设置 windowSize={number} .此处传递的数字是一个测量单位，其中 1 相当于您的视口(viewport)高度。默认值为 21，即上方 10 个视口(viewport)、下方 10 个视口(viewport)和中间 1 个视口(viewport)。
    赢:如果您主要担心性能，您可以设置更大的 windowSize因此您的列表将顺利运行且空白空间更少。如果你主要担心内存消耗，你可以设置一个较低的windowSize所以你渲染的列表会更小。
    权衡:对于更大的 windowSize ，你会有更大的内存消耗。为更低 windowSize ，您将有更低的性能和更大的看到空白区域的变化。
    遗留实现
    This prop ，如果为真，则使您的 FlatList靠老ListView , 而不是 VirtualizedList .
    赢:这肯定会使您的列表表现更好，因为它消除了虚拟化并一次呈现您的所有项目。
    权衡:您的内存消耗达到顶峰，并且包含复杂项目的大列表(100 多个)很可能会使您的应用程序崩溃。
    它还会发出警告，指出上述调整不起作用，因为您现在在 ListView 上。
    禁用虚拟化
    你会看到人们在一些问题上提倡使用这个 Prop 。但是this is deprecated now .这曾经做过类似 legacyImplementation 的事情.

    列出项目
    还有一些涉及您的列表项组件的双赢策略。它们由 VirtualizedList 管理很多，所以它们需要快速。
    使用简单的组件
    您的组件越复杂，它们的渲染速度就越慢。尽量避免在列表项中出现大量逻辑和嵌套。如果您在应用程序中大量重复使用此列表项组件，请仅为您的大列表创建一个副本，并尽可能减少逻辑和嵌套。
    使用轻量级组件
    您的组件越重，渲染速度就越慢。避免使用过大的图像(对列表项使用裁剪版本，尽可能小)。与您的设计团队交谈，在您的列表中使用尽可能少的效果、交互和信息。将它们保存到您的项目的详细信息中。
    使用 shouldComponentUpdate
    对您的组件实现更新验证。 React 的 PureComponent 主要用于你没有时间思考的时候。如果您正在阅读本文，那么您确实有时间，因此，为您的列表项组件创建最严格的规则。如果您的列表足够简单，您甚至可以使用
    shouldComponentUpdate() {
  return false
}

    关于javascript - 大列表的 React-Native FlatList 性能问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47678959/

    React-Nativejavascriptstrongcodebrreact-native-androidreact-native-flatlist

    有关javascript - 大列表的 React-Native FlatList 性能问题的更多相关文章

    1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

      我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

    2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

      尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

    3. ruby - RVM 使用列表[0] - 2

      是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

    4. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

      我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

    5. ruby - Fast-stemmer 安装问题 - 2

      由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

    6. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

      当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

    7. java - 从 JRuby 调用 Java 类的问题 - 2

      我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

    8. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

      我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

    9. 【高数】用拉格朗日中值定理解决极限问题 - 2

      首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

    10. SPI接收数据异常问题总结 - 2

      SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位（1bit）。SPI数据收发是数据交换，因此接收数据时从第二个字节开始才是有效数据，也就是数据整体向右移一个字节（1byte）。请教前辈之后也没有得到解决，通过在网上查阅前人经验终于解决问题，所以写一个避坑经验总结。实际背景：MCU与一款芯片使用spi通信，MCU作为主机，芯片作为从机。这款芯片采用的是它规定的六线SPI，多了两根线：RDY和INT，这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手

    随机推荐