反应本地是从表现引人注目角度来看，但截至目前，框架没有为开发人员提供一种稳定的方法来测量他们正在测试的应用程序的速度。因此，需要在逐个案例的基础上进行RACK本机代码。
如果您正在开发与原生的反应，并且甚至参加的应用程序新的遗物移动反应原生代理Beta程序，您可能有兴趣学习如何测量组件加载时间。
最近，我很兴趣看到新的遗物React原生代理如何用于测量应用程序上的组件加载时间，以及其他度量：
- 应用启动计数
- 用户会话时间
- 用户交互（这里的交互意味着用户路径/路径，而不是手势）
组件负载时间是加载完成给定屏幕的所有组件（JavaScript，Image等）所需的时间，并且这是基于基准响应性和性能的好方法。它也不是对本机应用程序测量的传统指标。因此，如果您想衡量它，则会有一系列工作。
在此帖子中，我将通过自定义仪器在React Native应用程序中介绍如何测量组件加载时间（除其他基本性能度量）。请注意，我们将首先从类组件开始，然后继续运行到功能组件。
入门
我开始在这个主题上戳了一下。我需要一个React Native测试应用程序来试用想法和故障排除。经过一些搜索和测试，我终于结束了这个例子。它在过去六个月内更新，我能够在我的Xcode模拟器中使用最小更新。
用于安装和配置新的遗物React原生代理，请参阅文件。
从那里，我通过解决组件负载时间来启动该项目。
在与我的团队不同的解决方案戳戳之后，我们很快意识到了亚博直播平台我们最好的选择是记录面包屑（）。由于我们从无自动仪器开始，因此这意味着我需要识别插入的适当位置gettime（）和RecordBreadCrumb（）调用各级嵌套组件。
测量类组件的性能指标
使用测试应用程序准备好，我的下一步是确定如何知道给定的组件何时在哪个阶段开始定时器，停止计时器，计算持续时间，并使用其他属性将结果传输。这将确保我可以在新遗物中构建小部件和仪表板。
1.捕获C类omponent负载时间
在阅读React文档时，我发现了CLass组件生命周期API并确认了我们的移动APM工程师的方法。
当首次加载类组件时，它将通过以下安装周期：
所以通过插入一个开始计时器componentwillmount（）然后计算持续时间componentdidmount（），然后致电RecordBreadCrumb（）要使用所需的所有属性（例如UserID，屏幕，组件，循环，持续时间）和更多 - 仪表板的“MobileBrobleFCrumb事件类型”推送事件，我们可以捕获组件安装加载时间：
componentwillmount（）{starttimem = new date（）。gettime（）} componentdidmount（）{dowationm = new date（）。gettime（） - starttimem newrelic.recordbreadcrumb（“容器”，{“用户”：“mike”，“屏幕”“：”探索“，”组件“：”探索“，”循环“：”mount“，”持续时间“：durationm，”Ususaction“：”真实“}）;
同样，在更新周期中，组件将通过此循环，我们可以发送类似的事件，包括更新加载时间：
componentwillupdate（）{starttimeu = new date（）。gettime（）} componentdidupdate（）{downedu = new date（）。gettime（） - starttimeu newrelic.recordbreadcrumb（“容器”，{“用户”：“mike”，屏幕“：”探索“，”组件“：”探索“，”循环“：”更新“，”持续时间“：达努利，”Ususaction“：”真实“}）;}
由于父类组件加载时间不包括子组件加载时间，因此组件的关系和层次结构在RecordBreadCrumb（）调用属性，因此我们可以正确地聚合子组件以确定父组件加载时间。
2.录制类组件aPP启动计数
应用程序发布计数可以通过制作一个RecordBreadCrumb（）当applaunch属性具有“真实”值时调用componentdidmount（）在默认课程中或index.js.之前批准.RegisterComponent（）称呼。然后是一个简单的NRQL.查询可以产生计数applaunch ='true'对于给定的一段时间。
componentDidmount（）{newrelic.recordbreadcrumb（“AgentStart”，{“用户”：“Mike”，“屏幕”：“App”，“组件”：“App”，“Cycle”：“Mount”，“持续时间”：0，“appstate”：appstate.currentstate，“applaunch”：“真实”}）;
3.计算类组件USER会话时间
出于演示目的，我选择通过移动APM代理规范定义用户会话，该规范将一个会话定义为从应用程序处于活动（前景）到结束时的会话到结束。注意：React Native Agent已将会话定义为30分钟，以便通过该选项设置自定义会话长度延迟API.。这可以通过利用来实现Appstate.以及它的变化EventListener.和setstate.。
基本上，当应用程序第一个安装挂载时，添加了AppState EventListener以侦听更改以及会话计时器启动时。然后，使用AppStateChange Hander函数和下一个状态信息，确定是否计算会话持续时间（活动到后台）或将计时器重置（背景为Active）。
state = {appstate：appstate.currentstate，};componentdidmount（）{starttimea = new date（）。gettime（）;appstate.addeventListener（'更改'，this._handleappstatechange）;};_handleappstatechange =（nextAppstate）=> {if（this.state.appstate.match（/非活动|背景/）&& nextappstate ==='Active'）{starttimea = new date（）。gettime（）;Newrelic.RecordBreadCrumb（“AppStart”，{“用户”：“Mike”，“屏幕”：“App”，“组件”：“App”，“Cycle”：“Session”，“持续时间”：0，“AppState”：appstate.currentstate}）;}否则if（this.state.appstate.match（/不活动）&& nextappstate ==='background''）{durationa = new date（）。gettime（） - starttimea;newrelic.recordbreadbrumb（“appstop”，{us“：”mike“，”屏幕“：”app“，”组件“：”app“，”cycle“：”sence“，”session“，”持续时间“：潮rorya，”appstate“：appstate.currentstate}）;}这个.setstate（{appstate：nextappstate}）;};
4.捕获类组件USER互动
通过设置的事件的用户跟踪UsusAction.归因于'真的'在里面RecordBreadCrumb（）放在指定的“检查点”组件中的呼叫。
这些是表示感兴趣的组件层次结构中的区域和级别/深度的组件。这建议维持可管理和信息丰富的事件，这些事件显示用户去的地方，直到会议结束。
componentDidupdate（）{newrelic.recordbreadcrumb（“容器”，{user“：”mike“，”屏幕“：”浏览“，”组件“：”探索“，”循环“：”更新“，”持续时间“：达努力，“Ususaction”：“真实”}）;}
笔记：这componentDidupdate（）只能执行如果有更新（渲染发生）。如果用户只需在两个屏幕之间来回导航，则没有“官方”的变化或发生的操作，这意味着这种行为不会触发componentDidupdate（）。因此，该事件不会在其相应的仪表板中捕获。
以下是仪表板中的结果：
测量功能组件的性能指标
现在，如果我要从类组件转移到我的测试应用程序中的功能组件，那么代理商可以捕获与上面相同的性能度量标准吗？
功能组件有哪些新挑战？
从类组件移动到功能组件意味着类组件生命周期API不再可用，也不能利用状态。此外，我需要一个新的测试应用程序来测试想法和演示结果。
经过更多在网上搜索并找不到什么，是时候了我从头开始创建一个。以下是测试应用程序的一些屏幕截图：
从主页/默认屏幕，用户可以通过设置屏幕底部的导航选项卡导航。从家庭或设置中，用户可以导航到“转到订单”屏幕，该屏幕是子组件，以添加/删除并订购他们的心中的SR-71的数量。所有这些只使用功能组件。
1.捕获功能component负载时间
为此，我使用了使用（）挂钩完成捕获负载时间。此呼叫需要应用于家庭，设置和详细信息屏幕。第一个之间的差异使用（）第二个使用（）是前者只会第一次执行（安装）。后者每次都会执行：
starttimea = new date（）。gettime（）;// for inally mount使用effeffect（（）=> {durationa = new date（）。gettime（） - starttimea; newrelic.recordbreadbrumb（“函数”，{user“，{bryan”，“屏幕”：“home”，“组件”：“home”，“循环”：“mount”，“持续时间”：durationa};}，[]）;// for for更新使用effeffect（（）=> {durationa = new date（）。gettime（） - starttimea; newrelic.recordbreadbrumb（“function”，{“bryan”，“屏幕”：“home”，“home”，“home”，“组件“：”主页“，”循环“：”更新“，”持续时间“：durationa};}）;
2.重新编码功能组件Applaunch Count.
然后，我搬了applaunchRecordBreadCrumb（）打电话给index.js。：
newrelic.recordbreadcrumb（“AppertStart”，{“用户”：“Bryan”，“屏幕”：“app”，“组件”：“app”，“cycle”：“mount”，“持续时间”：0，“appstate”：appstate.currentstate，“applaunch”：“真实”}）;
3.计算功能组件U.塞S.拒绝T.我
从那里，我用替换状态Usestate（）钩。然后我继续杠杆Appstate.和更改事件侦听器来完成会话持续时间捕获：
const [状态，setstate] = useState（appstate.currentstate）;//在安装iffeffect时设置开始计时器（（）=> {starttimea = new date（）。gettime（）; newrelic.recordbreadbrumb（“appstart”，{user“，{「用户”，{bryan“，”bryan“，”屏幕“：”app“，“组件”：“app”，“循环”：“会话”，“持续时间”：0，“appstate”：appstate.currentstate}）;}，[]）;//收听“状态”更改事件使用effect（（）=> {appstate.addeventListener（'更改'，_HandleAppstateChange）;}，[状态]）;_handleappstateChange =（nextAppstate）=> {if（state.match（/非活动|背景/）&& nextappstate ==='Active'）{starttimea = new date（）。gettime（）;newrelic.recordbreadbrumb（“appstart”，{user“：”bryan“，”屏幕“：”app“，”组件“：”app“，”cycle“：”session“，”持续时间“：0，”appstate“：appstate.currentstate}）;}否则if（state.match（/不活动）&& nextappstate ==='background''）{durationa = new date（）。gettime（） - starttimea;newrelic.recordbreadcrumb（“appstop”，{user“：”bryan“，”屏幕“：”app“，”组件“：”app“，”cycle“：”sence“，”session“，”持续时间“：潮rorya，”appstate“：appstate.currentstate}）;setstate（nextAppstate）;};
4.捕获功能组件USER互动
对于用户交互，我利用导航路由名称和状态来捕获用户去的地方：
首先获取当前屏幕名称：
//从导航状态函数getActiveName（NavigationState）{if（！navigationstate）{return null;const Route = NavigationState.Routes [NavigationState.index];// if（route.routes）{return getActiveName（路由）潜入嵌套导航器;返回Route.routename;}
然后在这一边返回（）默认应用程序，来自OnnavigationStateChange（）， 我制造了一个RecordBreadCrumb（）如果上一屏幕与当前屏幕不同，请致电。
返回{consturentscreen = getActiveNoutename（CurrentState）;const prov屏幕= getActiveNoutename（prectate）;if（prev屏幕！== currentscreen）{//下面的线使用呼叫面包屑API来建立用户Trail Newrelic.RecordBreadCrumb（“导航”，{“用户”：“Bryan”，“屏幕”：CurrentsCreen，“ScreenPrev”：PROV屏幕，“循环”：“导航”，“Ususaction”：“True”}）;}}} />;
仪表板表明我们还能够在功能组件 - 仅响应原生移动应用程序中捕获相同的数据。
结果
在审核结果后，我的团队和我发现这个项目的结果是积极的。有一些预见和规划，即使只是RecordBreadCrumb（）仪器，我能够完成对当今React Nation Developer至关重要的许多基本性能指标。
从最终用户到基础架构，我们的React Native Mobile Agent在整个系统中为您提供了独特的透视图。注册Beta访问现在。
