React Native列表渲染过慢咨询：50行耗时400-700ms

首先明确：你遇到的渲染耗时（400-700ms渲染50行、300ms渲染20行）绝对不属于React Native的正常表现，这种简单结构的列表应该在几十毫秒内完成渲染。结合你的情况，以下是常见问题点和优化方案：

1. 开发模式的性能损耗 #

Expo的开发模式默认开启热重载、调试日志、语法检查等功能，这些会大幅增加渲染耗时。先切换到生产模式测试：

expo start --no-dev --minify

生产模式下的性能才是真实用户会体验到的，很多开发模式下的性能问题会在生产模式下消失。

2. 图片加载的阻塞问题 #

哪怕是30x30的小图，也可能因为加载机制导致渲染延迟：

• 远程图片：默认的Image组件没有内置高效缓存，建议使用expo-fast-image替代，它会自动缓存图片并优化加载流程；也可以提前用Image.prefetch()预加载所有列表图片。
• 本地图片：确保用静态require导入（不要用动态路径拼接），比如：

  // 正确
  <Image source={require('./assets/avatar.png')} style={{width:30, height:30}} />
  // 错误（会导致RN无法预编译图片）
  <Image source={{uri: `./assets/${item.img}`}} />
  

3. 列表项组件的不必要重渲染 #

如果列表项组件存在频繁重渲染，会累积大量耗时：

• 把列表项组件提取到父组件外部，避免每次父组件渲染时重新定义组件：

  // 正确：组件定义在外部
  const ListItem = ({item}) => (
    <View style={{flexDirection: 'row'}}>
      <Image source={item.img1} />
      <Text>{item.text1}</Text>
      <Image source={item.img2} />
      <Text>{item.text2}</Text>
    </View>
  );
  
  const ParentComponent = () => {
    return <FlatList data={data} renderItem={({item}) => <ListItem item={item} />} />;
  };
  

• 用useCallback包裹renderItem函数，保证其引用稳定：

  const renderItem = useCallback(({item}) => <ListItem item={item} />, []);
  

• 给列表项设置唯一的key：用数据的唯一ID而非索引，比如：

  <FlatList
    data={data}
    keyExtractor={(item) => item.id.toString()}
    renderItem={renderItem}
  />
  

4. FlatList的优化属性未正确配置 #

合理配置FlatList的属性可以减少初始渲染压力：

• 设置initialNumToRender为刚好填满屏幕的数量（比如20），避免一次性渲染过多内容；
• 开启removeClippedSubviews（默认开启，但部分场景需手动设置），自动卸载屏幕外的组件；
• 调整maxToRenderPerBatch为较小值（比如5），控制每次批量渲染的数量。

5. 冗余的组件结构与样式 #

React Native的视图层级和样式会影响渲染性能：

• 减少不必要的View嵌套，比如将两段文本合并到一个Text组件中（用\n换行），或者用Flex布局简化层级；
• 移除不必要的样式属性，比如避免使用opacity（会触发GPU离屏渲染）、非必需的阴影效果等。

排查工具建议 #

• 使用Expo的Performance Monitor查看JS线程和UI线程的耗时分布，确认是否有某一阶段的阻塞；
• 用React DevTools的Profiler功能，检查哪些组件在不必要地重渲染，定位性能瓶颈。

通过以上优化，你应该能将列表渲染耗时降到几十毫秒以内，达到接近浏览器的渲染速度。

内容的提问来源于stack exchange，提问作者Michel H.