VirtualizedList更新缓慢警告求助：8项FlatList仍触发该问题

收到如下性能警告：

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 5200, "dt": 2470, "prevDt": 2834}

已将问题复现到三个文件：Home.js、OtherScreen.js和App.js。Home页面包含一个跳转按钮和8个列表项的FlatList，每个列表项是高度650的View加文本；点击按钮跳转到仅显示一段文本的OtherScreen。

复现代码 #

Home.js

import { View, Text, FlatList, Button } from "react-native";
import React, { useState } from "react";

const Home = ({ navigation }) => {
  const [data, setData] = useState([
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
  ]);
  return (
    <>
      <Button
        onPress={() => {
          navigation.navigate("OtherScreen");
        }}
        title="go"
      ></Button>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={() => {
          return (
            <View style={{ height: 650 }}>
              <Text>yo</Text>
            </View>
          );
        }}
      />
    </>
  );
};
export default Home;

OtherScreen.js

import { Text, View } from "react-native";
import React from "react";

const OtherScreen = () => {
  return (
    <View>
      <Text>OtherScreen</Text>
    </View>
  );
};

export default OtherScreen;

App.js

import { Text } from "react-native";
import Home from "./src/Home";
import OtherScreen from "./src/OtherScreen";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import { NavigationContainer } from "@react-navigation/native";

const HomeStack = createNativeStackNavigator();

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={Home}
        options={({ navigation }) => ({
          title: null,
          headerLeft: () => {
            return <Text>Home</Text>;
          },
        })}
      />
      <HomeStack.Screen
        name="OtherScreen"
        component={OtherScreen}
        options={{ title: "Other" }}
      />
    </HomeStack.Navigator>
  );
};

export default function App() {
  return <NavigationContainer>{HomeStackScreen()}</NavigationContainer>;
}

解决方案 #

针对你的代码，以下调整可以解决这个警告：

• 将列表项抽为独立的memo组件：当前renderItem内直接定义组件，每次FlatList重渲染都会创建新的组件实例，触发不必要的重渲染。用React.memo包裹列表项组件，避免无意义的更新：

// Home.js中新增
const ListItem = React.memo(() => {
  return (
    <View style={{ height: 650 }}>
      <Text>yo</Text>
    </View>
  );
});

// 然后FlatList的renderItem改为
renderItem={() => <ListItem />}

• 指定initialNumToRender属性：FlatList默认会渲染较多初始项，指定这个属性可以控制首次渲染的数量，减少初始加载压力：

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  initialNumToRender={2} // 根据屏幕高度调整，比如你的列表项高650，初始渲染2个足够覆盖屏幕
  renderItem={() => <ListItem />}
/>

• 避免inline函数：如果后续列表项需要接收参数，不要在renderItem里直接写箭头函数，提前用useCallback定义函数，确保每次传递的函数引用一致：

// 比如需要传递item时
const renderItem = React.useCallback(({ item }) => {
  return <ListItem item={item} />;
}, []);

// 然后FlatList的renderItem={renderItem}

这些调整遵循React Native性能最佳实践，能有效消除VirtualizedList的性能警告。

内容的提问来源于stack exchange，提问作者Mark Hsiao