时间戳

首页 > 解决方案 > 基本反应本机应用程序中的高内存消耗

javascript - 基本反应本机应用程序中的高内存消耗

问题描述

我正在使我的第一个反应是原生的，尽管这很容易，但事实证明我很难理解我可能做错了什么。

首先，我有一个非常简单的应用程序，它通过 redux 获取数据

componentWillMount() {

    this.props.fetchCoin()
    this.props.CurrencyRate()
  }

然后在它的返回部分呈现它

 return (
     <ScrollView>
                 <Header />
                 {/* Custom Search Input */}
                 <View>
                 <TextInput
                  style={textInput}
                  placeholder="Search Coin"
                  onChangeText={(text) => this.onSearch(text)} />
                  </View>
                  <View>
                  <FlatList
                   data={this.state.searchCoin ? displaySearchCrypto : this.props.cryptoLoaded}
                   renderItem={({ item }) => (
                   <CoinCard
                      key={item["long"]}
                      coinShortName = {item["short"]}
                      coinName = {item["long"]}
                      coinPrice = {item["price"].toFixed(2)}
                      marketCap = {(item["mktcap"]/1000000000).toFixed(4)}
                      percentChange = {item["perc"].toFixed(2)}
                      vwapData={item["vwapData"].toFixed(2)}
                      coinImage={"https://coincap.io/images/coins/" + item["long"] + ".png"}
                      />
                  )}
          />
          </View>
               </ScrollView>
           )
      }
    }

即使在应用程序获取数据并且 UI 线程保持在 60 (fps) 之后，我仍然看到我的 ram 消耗大于 500 MB，我认为 UI 中没有发生任何事情

而不是分享我所有的代码：你可以在 github 上找到大部分的东西上面的代码片段是从这里分享的：https ://github.com/irohitb/Crypto/blob/master/src/container/cryptoContainer.js

上面代码中的 CoinCard 组件可以在这里看到：https ://github.com/irohitb/Crypto/blob/master/src/components/CoinCard.js

同样的操作在这里：https ://github.com/irohitb/Crypto/blob/master/src/actions/cryptoAction.js

[问题：]有人可以帮我找出我做错了什么，我该如何解决？如果有人想尝试一下，这个存储库应该可以在您的模拟器上运行而不会引发错误。 在此处输入图像描述

标签： javascriptreactjsreact-native

解决方案

FlatListwithImage在 Android 上有一个未解决的问题：https ://github.com/facebook/react-native/issues/13413 。这里有一些关于性能的提示：https ://github.com/filipemerker/flatlist-performance-tips/

作为修复的第一次尝试，请尝试添加removeClippedSubviews到您的FlatList.

我还在屏幕截图中注意到，您会收到有关丢失密钥的警告。解决该问题并尝试keyExtractor看看是否可以改善情况。

或者，使用除 之外的其他内容FlatList，例如ScrollView。您将失去一些功能，FlatList但如果您获得可接受的内存使用和性能，这可能是值得的。

推荐阅读