React Native中如何显示FlatList列表的渲染耗时？

首先修正你代码里的问题：你代码里的start变量未定义，clearTimeout()也没有传入定时器ID，完全无效。而且当前的计时逻辑统计的是生成随机字符串列表的时间，并不是FlatList的渲染耗时。

下面是两种统计FlatList从开始渲染到全部项渲染完成耗时的可行方案：

方案一：利用FlatList可视项监听（推荐） #

通过viewabilityConfig配置可视元素检测规则，当最后一个列表项完全进入可视区域时，计算从列表开始渲染到此时的耗时。

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

export default function App() {
  const [list, setList] = useState([]);
  const renderStartTime = useRef(null);
  // 配置可视性检测：元素100%可见时触发回调
  const viewabilityConfig = useRef({
    itemVisiblePercentThreshold: 100,
  });

  useEffect(() => {
    // 生成随机列表，用push代替解构赋值提升性能
    let rList = [];
    for (let i = 0; i < 1000; i++) {
      rList.push(Math.random().toString(36).slice(2, 7));
    }
    setList(rList);
  }, []);

  // 当列表数据更新（开始准备渲染）时记录起始时间
  useEffect(() => {
    if (list.length > 0) {
      renderStartTime.current = Date.now();
    }
  }, [list]);

  // 监听可视项变化
  const onViewableItemsChanged = useRef(({ viewableItems }) => {
    const lastItem = list[list.length - 1];
    // 检查最后一个元素是否已完全可见
    const isLastItemVisible = viewableItems.some(item => item.item === lastItem);
    if (isLastItemVisible && renderStartTime.current) {
      const renderDuration = Date.now() - renderStartTime.current;
      console.log(`FlatList渲染总耗时：${renderDuration}ms`);
      // 只统计一次，避免重复触发
      onViewableItemsChanged.current = () => {};
    }
  }).current;

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.boldHeader}>Header</Text>
      </View>
      <View style={styles.body}>
        <FlatList
          data={list}
          renderItem={({ item }) => (
            <Text style={styles.itemText}>{item}</Text>
          )}
          viewabilityConfig={viewabilityConfig.current}
          onViewableItemsChanged={onViewableItemsChanged}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  header: { padding: 20, backgroundColor: '#f5f5f5' },
  boldHeader: { fontSize: 18, fontWeight: 'bold' },
  body: { flex: 1, padding: 10 },
  itemText: { padding: 8, fontSize: 16 },
});

方案二：监听每个列表项的渲染完成事件 #

给每个列表项添加onLayout事件，记录最后一个项渲染完成的时间，与起始时间做差得到总耗时。

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

export default function App() {
  const [list, setList] = useState([]);
  const renderStartTime = useRef(null);
  const renderedCount = useRef(0);

  useEffect(() => {
    let rList = [];
    for (let i = 0; i < 1000; i++) {
      rList.push(Math.random().toString(36).slice(2, 7));
    }
    setList(rList);
  }, []);

  useEffect(() => {
    if (list.length > 0) {
      renderStartTime.current = Date.now();
      renderedCount.current = 0;
    }
  }, [list]);

  const handleItemLayout = () => {
    renderedCount.current += 1;
    // 当所有项都渲染完成时计算耗时
    if (renderedCount.current === list.length && renderStartTime.current) {
      const renderDuration = Date.now() - renderStartTime.current;
      console.log(`FlatList渲染总耗时：${renderDuration}ms`);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.boldHeader}>Header</Text>
      </View>
      <View style={styles.body}>
        <FlatList
          data={list}
          renderItem={({ item }) => (
            <Text style={styles.itemText} onLayout={handleItemLayout}>{item}</Text>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    </View>
  );
}

// 样式同上，可复用方案一中的styles

注意事项 #

• 方案一适合长列表（FlatList默认懒加载），只有当最后一个项被滚动到可视区域时才会完成统计；方案二会统计所有进入可视区域的项的渲染完成时间，符合FlatList的懒加载逻辑。
• 生成列表时用push代替解构赋值[...rList, xxx]，避免每次循环创建新数组，提升性能。
• 统计完成后建议取消监听，避免重复触发统计逻辑。

内容的提问来源于stack exchange，提问作者Sarthak Gupta