跳转到主要内容

react-native-performance-lists-profiler

这个库包含用于分析 FlatList 和 FlashList 的组件。

安装​

你可以通过运行以下命令安装此包

bash
yarn add @shopify/react-native-performance-lists-profiler react-native-flipper
bash
yarn add @shopify/react-native-performance-lists-profiler react-native-flipper

ListsProfiler​

要分析给定的列表，你首先需要在你的 App 树的较高位置挂载一个 <ListsProfiler /> 组件。如果你想自己处理分析结果，ListsProfiler 属性提供了两个回调函数 - onInteractive 和 onBlankArea。

使用示例

tsx
import {ListsProfiler} from '@shopify/react-native-performance-lists-profiler';
const App = () => {
  const onInteractiveCallback = useCallback((TTI: number, listName: string) => {
    console.log(`${listName}'s TTI: ${TTI}`);
  }, []);
  const onBlankAreaCallback = useCallback((offsetStart: number, offsetEnd: number, listName: string) => {
    console.log(`Blank area for ${listName}: ${Math.max(offsetStart, offsetEnd)}`);
  }, []);
  return (
    <>
      <ListsProfiler onInteractive={onInteractiveCallback} onBlankArea={onBlankAreaCallback}>
        <NavigationTree />
      </ListsProfiler>
    </>
  );
};
tsx
import {ListsProfiler} from '@shopify/react-native-performance-lists-profiler';
const App = () => {
  const onInteractiveCallback = useCallback((TTI: number, listName: string) => {
    console.log(`${listName}'s TTI: ${TTI}`);
  }, []);
  const onBlankAreaCallback = useCallback((offsetStart: number, offsetEnd: number, listName: string) => {
    console.log(`Blank area for ${listName}: ${Math.max(offsetStart, offsetEnd)}`);
  }, []);
  return (
    <>
      <ListsProfiler onInteractive={onInteractiveCallback} onBlankArea={onBlankAreaCallback}>
        <NavigationTree />
      </ListsProfiler>
    </>
  );
};

onInteractive​

当被分析的列表变为可交互时，会触发 onInteractive。

该回调函数具有以下参数

  • TTI：表示可交互时间。它计算为组件首次挂载的时间戳与列表第一页完全渲染的第一帧之间的时间差。
  • listName：在 FlatListPerformanceView 中定义的列表名称。

注意：如果单元格没有填充列表的整个框架，则列表不会报告 onInteractive。这是一个已知问题，我们将尝试修复。

onBlankArea​

每次滚动列表时都会调用 onBlankArea - 即使当前没有空白区域。

它具有以下参数

  • offsetStart：屏幕顶部可见的空白区域（向上滚动时）。如果值大于 0，则用户可见。
  • offsetEnd：屏幕底部可见的空白区域（向下滚动时）。如果值大于 0，则用户可见。
  • blankArea：值大于或等于零，并且是 offsetStart 和 offsetEnd 的最大值。这通常取决于用户滚动的方向。

FlatListPerformanceView​

FlatListPerformanceView 是一个用于分析 FlatList 特定实例的组件。

tsx
<FlatListPerformanceView listName="FlatList">
  <FlatList
    keyExtractor={...}
    renderItem={...}
    data={data}
  />
</FlatListPerformanceView>
tsx
<FlatListPerformanceView listName="FlatList">
  <FlatList
    keyExtractor={...}
    renderItem={...}
    data={data}
  />
</FlatListPerformanceView>

listName 属性将在回调函数 onInteractive 和 onBlankArea 中使用。如果你不想使用 ListsProfiler 组件，也可以直接在 FlatListPerformanceView 上使用这两个回调函数。

FlashListPerformanceView​

FlashListPerformanceView 是一个用于分析 FlashList 特定实例的组件，其 API 与 FlatListPerformanceView 相同。

tsx
<FlashListPerformanceView listName="FlashList">
  <FlashList
    keyExtractor={...}
    renderItem={...}
    data={data}
  />
</FlashListPerformanceView>
tsx
<FlashListPerformanceView listName="FlashList">
  <FlashList
    keyExtractor={...}
    renderItem={...}
    data={data}
  />
</FlashListPerformanceView>