FlatList滚动时列表项重复渲染问题求助

问题核心分析 #

你遇到的“重复渲染”分为两种场景：一是组件更新阶段的不必要渲染，二是FlatList内置的组件回收机制导致的卸载后重新挂载。你的代码存在两个关键问题：

1. isEqual函数实现错误：直接返回true会跳过props的真实比较，既无法利用React.memo的优化能力，还可能导致props变化时组件无法正常更新。
2. FlatList默认回收行为：滚动时超出可视区域的组件会被卸载，当它们重新进入视口时会触发挂载阶段的渲染，这属于正常机制，React.memo无法阻止这类渲染。

具体修复步骤 #

1. 修正isEqual比较逻辑

React.memo的第二个参数需要准确比较前后props的一致性，替换原有的无效实现：

const isEqual = (prevProps, nextProps) => {
  return (
    prevProps.id === nextProps.id &&
    prevProps.first_name === nextProps.first_name &&
    prevProps.email === nextProps.email
  );
};

2. 优化FlatList配置

通过以下参数减少不必要的组件卸载和布局计算：

• getItemLayout：提前告知FlatList每个列表项的固定高度，避免重复测量布局（假设每个item高度为60，可根据实际样式调整）：

  const getItemLayout = (data, index) => ({
    length: 60,
    offset: 60 * index,
    index,
  });
  

• windowSize：增大该值让FlatList保留更多可视区域外的组件，降低卸载后重新挂载的频率（默认值为10，值越大内存占用越高，需根据设备性能权衡）。

3. 完整优化后的代码

const data = [
  { id: 1, first_name: "Shaina", last_name: "Osorio", email: "sosorio0@a8.net" },
  { id: 2, first_name: "Ania", last_name: "Cotilard", email: "acotilard1@about.me" },
  { id: 3, first_name: "Hagen", last_name: "Lisciandri", email: "hlisciandri2@nature.com" }
];

const isEqual = (prevProps, nextProps) => {
  return (
    prevProps.id === nextProps.id &&
    prevProps.first_name === nextProps.first_name &&
    prevProps.email === nextProps.email
  );
};

const RenderItem = React.memo((props) => {
  const { id, first_name, email } = props;
  console.log("id >>> ", id);

  return (
    <View
      style={{
        padding: 5,
        backgroundColor: "lightblue",
        marginVertical: 3
      }}
    >
      <Text>First Name : {first_name}</Text>
      <Text>Email : {email}</Text>
    </View>
  );
}, isEqual);

const getItemLayout = (data, index) => ({
  length: 60,
  offset: 60 * index,
  index,
});

function App() {
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <RenderItem
            id={item.id}
            first_name={item.first_name}
            email={item.email}
          />
        )}
        initialNumToRender={15}
        maxToRenderPerBatch={15}
        keyExtractor={(item) => item.id}
        getItemLayout={getItemLayout}
        windowSize={20}
      />
    </View>
  );
}

export default App;

补充说明 #

• React.memo仅能阻止更新阶段的不必要渲染，无法干预FlatList的组件回收机制。如果列表项渲染成本极高，可考虑进一步增大windowSize或使用第三方虚拟列表库平衡性能与内存占用。
• 确保keyExtractor返回的key唯一且稳定，这是FlatList高效复用组件的基础。

内容的提问来源于stack exchange，提问作者Yogesh Tripathi