React Native ListView 加载缓慢

Posted 2023-03-15

【中文标题】React Native ListView 加载缓慢

【英文标题】：React Native ListView slow to load

【发布时间】：2016-01-31 21:37:01

【问题描述】：

我有一个简单的 ListView，它似乎需要很长时间才能加载它的项目。我已经在发布模式下进行了测试，加载整个页面大约需要 3 秒。如果我设置initialListSize=1，我可以看到它逐项构建列表。

ListView JSX 代码：

<ListView
      dataSource=this.state.dataSource
      renderRow=this.renderRow
      renderSeparator=(sectionID, rowID) => <View key=`$sectionID-$rowID` style=styles.separator />
      style=styles.listView
      initialListSize=1
    />

还有 renderRow 方法：

  renderRow(row) 
    // console.log ('rendering scale row: ' + row.numerator + ':' + row.denominator );
    return (
      <TouchableHighlight onPress=() => this.pressRow(row) underlayColor="grey">
        <View style=styles.rowContainer>
          <Text style=styles.rowText>row.hasOwnProperty('label') ? row.label : row.numerator + ':' + row.denominator</Text>
          <Text style=styles.rowText>row.hasOwnProperty('label') ? row.numerator + ':' + row.denominator : ''</Text>
        </View>
      </TouchableHighlight>
    );
  

我没有在 renderRow 中做任何非常复杂的事情...并且数据已经在之前的视图中获取并通过 props 传递。

有什么我不知道的可能会影响加载/渲染时间的事情吗？

这仅适用于 ios，适用于 iPhone 4S。我的测试中只有 12-21 行。

我还应该补充一点，该应用程序的核心是使用 JUCE C++ 框架并在其中一个视图中运行一些音频处理。我有一个仅在该视图可见时运行的音频处理线程 - 所有其他视图（包括具有此 ListView 的视图）将停止音频处理线程。我也尝试过以类似的方式停止音频线程，但没有任何区别。

【问题讨论】：

代码看起来不错。设备还是模拟器？仅限iOS？多少行？

【参考方案1】：

不确定这是否会对您有所帮助，但我可以想到您可以尝试的三件事...

cmd+T 将打开/关闭“慢动画”。这是一个远射 如果您正在写入console.log，请注释掉这些行。他们有时会出人意料地陷入困境。 关闭开发模式。您不需要，但值得一试

【讨论】：

我尝试注释掉 console.log 并在发布模式下进行测试 - 行仍然需要时间来加载。虽然没有尝试过 cmd + T。

如果 command+T 有帮助，请告诉我，请务必在模拟器中按组合键。如果这不能解决问题，请拍摄视频，以便我们看到您所看到的

我只在设备上看到这个，还没有在模拟器中测试过（模拟器需要很长时间才能加载并减慢我老化的 macbook 的速度！）

啊，那肯定不能解决你的问题。抱歉，我帮不上忙。

【参考方案2】：

最好开始使用 FlatList 或 SectionList，因为 ListView 现在已弃用。

https://facebook.github.io/react-native/docs/listview.html

很少有警告，例如您必须使用 FLUX/REDUX 或 RELAY。请在此处查看详细信息（功能/警告） https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html