React Native 和 Flutter 在列表滚动性能上到底谁更流畅？

A. 尚斌提问于 2026-03-16 17:05:20 阅读 34

移动

最近在做一个信息流类的 App，用 React Native 写了个长列表，发现滑动时偶尔掉帧，尤其在低端安卓机上更明显。我试过用 FlatList 并加上 initialNumToRender 和 maxToRenderPerBatch 优化，但效果一般。

听说 Flutter 的列表性能更好，是真的吗？有没有人实际对比过两者在复杂列表（比如每项都有图片、文本和按钮）下的表现？是不是我 RN 的写法有问题？

性能对比跨端开发

我来解答赞 6 收藏

反馈

1 条解答

设计师维通 Lv1

实际对比的话，Flutter在复杂列表场景下确实更流畅，这没什么好争的。Flutter是自绘引擎，列表滚动时不需要经过JS到Native的通信桥梁，帧率更稳。但RN也没那么不堪，你优化效果一般大概率是姿势不对。

先说你的FlatList优化为啥没效果：

你试的 initialNumToRender 和 maxToRenderPerBatch 确实有用，但只是基础配置。真正卡顿的原因往往是这几个：

第一，getItemLayout 没加。FlatList 每次滚动都要算高度，你不给明确高度它就得实时测量，低端机上一测量就卡。建议改成这样：

getItemLayout={(data, index) => ({

  length: 100, // 你的行高

  offset: 100 * index,

  index

})}

第二，每行组件重渲染太频繁。检查一下你的 Item 组件有没有用 React.memo 包裹，以及有没有在 renderItem 里创建新的函数/对象。改成：

const ListItem = React.memo(({ item }) => {

  return (

    // 你的组件

  );

}, (prevProps, nextProps) => {

  return prevProps.item.id === nextProps.item.id;

});

第三，图片问题。信息流肯定有图片，RN的图片加载是异步的，滚动时大量图片同时请求或者解码都会卡。解决方案是限制同时加载的图片数量，可以用 react-native-fast-image 替代 Image，它有更好的缓存策略和并发控制。

第四，检查 removeClippetsSubviews 在安卓上是否生效。有些情况下这个属性在安卓上反而会导致闪烁或者性能问题，可以试试看关掉它。

如果上面都做了还是卡，那就要考虑是不是业务场景真的不适合RN。信息流这种场景对性能要求极高，RN做起来确实吃力。你要是不想换Flutter，可以看看 @shopify/react-native-skia，它能做一些更底层的渲染优化，或者干脆考虑用 react-native-reanimated 做列表的动画优化。

至于要不要换Flutter，我的建议是：如果现有RN项目已经搭起来了，为了列表性能重写不划算。但如果你是从零开始做信息流类App，可以直接选Flutter，省得后面折腾。

2026-03-16 20:08