优化长时间运行的组件

该库只能为您提供某些屏幕性能不如预期的警报。解决这些问题需要根据具体情况进行。

但是，有一种常见的性能下降类型在简单的 RN 应用中经常出现。如果 React 组件在返回可渲染的 JSX 之前同步运行很长时间，可能会导致导航速度稍慢。

PerformanceMeasureView 可以通过延迟昂贵的渲染直到动画完成后，帮助您优化这种缓慢的导航动画。在动画发生时，它可以显示一个轻量级的占位符视图。

tsx
<PerformanceMeasureView
  optimizeForSlowRenderComponents
  slowRenderPlaceholder={<View style={{backgroundColor: 'red', flex: 1}} />}
>
  {/* actual screen contents */}
</PerformanceMeasureView>

tsx
<PerformanceMeasureView
  optimizeForSlowRenderComponents
  slowRenderPlaceholder={<View style={{backgroundColor: 'red', flex: 1}} />}
>
  {/* actual screen contents */}
</PerformanceMeasureView>

强烈建议不要盲目使用此标志，因为它只能优化非常特定的性能下降。不必要地使用它实际上可能会使事情进一步变慢，因为您在渲染真正昂贵的 UI 之前添加了 1 个额外的轻量级渲染过程。请在选择使用前彻底进行视觉验证并监控渲染时间得分。

此功能在底层使用 ReactNative 的 InteractionManager.runAfterInteractions 调用，以在所有动画完成后安排真正的昂贵渲染。