shopify-react-native-performance

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发布说明。

@amazon-devices/shopify__react-native-performance是一个库，用于测量应用中不同流的渲染时间。

安装
示例
API参考
- 组件
- 挂钩
实现详情
支持的版本
其他资源

安装

在package.json文件中添加JavaScript库依赖项。

已复制到剪贴板。

 "dependencies": {
     ...
     "@amazon-devices/react-navigation__native": "~2.0.0",
     "@amazon-devices/react-navigation__stack": "~2.0.0",
     "@shopify/react-native-performance": "npm:@amazon-devices/shopify__react-native-performance@~2.0.0"
 },

使用npm install命令重新安装依赖项。

示例

已复制到剪贴板。

import React, {
  Dispatch,
  ReactNode,
  SetStateAction,
  createContext,
  useCallback,
  useContext,
  useState,
} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import {
  RenderPassReport,
  PerformanceMeasureView,
  PerformanceProfiler,
} from '@shopify/react-native-performance';

interface ReportContextType {
  report: RenderPassReport | undefined;
  setReport: Dispatch<SetStateAction<RenderPassReport | undefined>>;
}

const ReportContext = createContext<ReportContextType | null>(null);

interface ReportProviderProps {
  children: ReactNode;
}

const ReportProvider = ({ children }: ReportProviderProps) => {
  const [report, setReport] = useState<RenderPassReport>();

  return (
    <ReportContext.Provider value={{ report, setReport }}>
      {children}
    </ReportContext.Provider>
  );
};

const Stack = createStackNavigator();

const NavigationTree = () => {
  const { setReport } = useContext(ReportContext) as ReportContextType;

  const onReportPrepared = useCallback(
    (report: RenderPassReport) => {
      setReport(report);
    },
    [setReport],
  );

  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="HomeScreen">
          <Stack.Screen name="HomeScreen" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};

const HomeScreen = () => {
  const { report } = useContext(ReportContext) as ReportContextType;

  return (
    <PerformanceMeasureView screenName="HomeScreen" interactive>
      <View style={styles.container}>
        <Text style={styles.text}>主屏幕</Text>
        {report ? (
          <>
            <Text style={styles.text}>渲染报告:</Text>
            <Text style={styles.text}>
              {JSON.stringify(report, undefined, 4)}
            </Text>
          </>
        ) : (
          <Text style={styles.text}>未生成渲染通道报告</Text>
        )}
      </View>
    </PerformanceMeasureView>
  );
};

export const App = () => {
  return (
    <ReportProvider>
      <NavigationTree />
    </ReportProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
    fontWeight: '500',
  },
});

API参考

请您查看以下专门文档页面，了解有关此库、API参考等的信息：官方shopify/react-native-performance文档（仅提供英文版）。

组件

组件	描述	平台支持
`PerformanceProfiler`	收集性能指标的组件。应该安装在应用树的高处。	所有平台
`PerformanceMeasureView`	衡量包装的屏幕或组件性能数据的包装器。	所有平台
`PerformanceMarker`	一个内部实用工具组件，可实现在应用内标记特定点以进行性能测量。	所有平台

PerformanceProfiler属性

属性	描述	平台支持
`onReportPrepared`	准备好性能报告时调用的回调。可用于以自定义方式处理性能数据。	所有平台
`renderTimeoutMillis`	指定在将渲染操作视为超时之前等待的时间（以毫秒为单位）。	所有平台
`errorHandler`	处理分析过程中遇到的错误的回调。	所有平台
enabled	启用或禁用分析器的标记。可用于控制基于环境或条件的分析。	所有平台
`useRenderTimeouts`	确定是否使用渲染超时来检测长时间或停滞的渲染。	所有平台
`logLevel`	设置分析器的日志记录级别并控制分析器生成的日志的详细程度。	所有平台

PerformanceMeasureView属性

属性	描述	平台支持
`screenName`	包装的屏幕或组件的名称或标识符。帮助对视图特定的性能指标进行分类和识别。	所有平台
`optimizeForSlowRenderComponents`	表示是否对渲染速度缓慢的组件进行优化的标记。	所有平台
`slowRenderPlaceholder`	主组件渲染时间过长时要渲染的占位符组件。	所有平台
`interactive`	表示被测量的组件是否是交互式组件。	所有平台
`renderPassName`	渲染通道的名称。	所有平台

PerformanceMarker属性

属性	描述	平台支持
`componentInstanceId`	被标记组件的实例的唯一标识符。	所有平台
`renderPassName`	渲染通道的名称。	所有平台
`interactive`	表示被标记的组件是否是交互式组件。	所有平台
`destinationScreen`	渲染过程导向的目标屏幕或组件的名称。	所有平台
`style`	适用于`PerformanceMarker`组件的其他样式。	所有平台
`onRenderComplete`	标记的组件渲染完成时触发的回调。	所有平台

挂钩

挂钩	描述	平台支持
`useComponentInstanceId`	内部实用工具挂钩。创建可用于`componentInstanceId`的唯一标识符。	所有平台
`useErrorHandler`	返回存储在错误处理程序上下文中的错误处理器回调。	所有平台
`useProfilerState`	用于监视库的内部状态转换。不应该在生产中使用。	所有平台
`useProfilerStateChangeListener`	`useProfilerState`使用的内部挂钩。为内部状态转换更改注册侦听器。	所有平台
`useRenderPassReport`	返回上次收集的渲染通道报告。	所有平台
`useResetFlow`	用于表示正在重新绘制屏幕或组件。	所有平台
`useStateController`	内部实用工具挂钩。返回存储在状态控制器上下文中的状态控制器。	所有平台

实现详情

useResetFlow挂钩不适用于Vega等任何平台。
用于在屏幕之间导航的渲染通道报告目前未在Vega虚拟设备上生成。

支持的版本

程序包名称	亚马逊NPM库版本	Vega OS内部版本号	Vega SDK版本	发布说明
`@amazon-devices/shopify__react-native-performance`	2.0.1+4.1.2	`OS 1.1 (201010438050)`	0.20

其他资源

有关其他库的信息，请参阅支持的第三方库和服务。

Last updated: 2025年9月30日