指标

FlashList 允许您在生产环境中跟踪指标，从而更深入地了解您的应用程序在性能方面的表现。我们建议您在生产环境中跟踪以下指标

可见空白区域

FlashList 提供了一个 hook，可以跟踪用户在滚动列表时累积和体验到的最大空白空间。跟踪此指标的成本非常低，您可以按以下方式实现

const MyComponent = () => {
  // `any` is the type of data. You can mention the type of data that you're using with your FlashList implementation.
  const ref = useRef<FlashList<any>>(null);

  // The tracking will happen for the entire lifecycle of the list and the result object will always have the latest values.
  // You can make a call when to ingest this data. We recommend that you ingest when the list unmounts.
  const [blankAreaTrackerResult, onBlankArea] = useBlankAreaTracker(ref);
  useEffect(() => {
    return () => {
      // When component is being cleaned up, you can ingest the result into your analytics system.
      // blankAreaTrackerResult has two fields - `cumulativeBlankArea` and `maxBlankArea`. `cumulativeBlankArea` is the total blank area that the user has seen while scrolling the list.
      // maxBlankArea is the maximum blank area that the user has seen while scrolling the list.
      ingestData(blankAreaTrackerResult);
    };
  }, []);

  // pass the listener returned by the hook to FlashList
  return <FlashList {...props} ref={ref} onBlankArea={onBlankArea} />;
};

当您在生产环境中看到接近零的空白空间时，您可以放心。如果您对这些数字不满意，请参考我们的性能故障排除指南，它可以帮助您优化列表的性能。

加载时间

FlashList 有一个内置的 onLoad 事件，您可以使用它来跟踪加载列表所花费的时间。这将跟踪从列表创建到其子元素对用户可见的时间之间所经过的时间。

const MyComponent = () => {
    const onLoadListener = useCallback(({ elapsedTimeInMs } ) => {
        ingestData("Sample List load time", elapsedTimeInMs);
    }, []);
    return <FlashList {...props} onLoad={onLoadListener} />;

采样

请注意，您可以始终对您的实现收集的数据进行采样。通过从一部分用户收集数据，可以准确了解您的应用程序的性能。如果您想限制收集的数据量，这一点很重要。