时间戳

首页 > 解决方案 > 我怎么知道我的 react-native 应用程序运行顺利并且没有风险？

react-native - 我怎么知道我的 react-native 应用程序运行顺利并且没有风险？

问题描述

有什么好方法可以知道我们的 react-native 应用运行良好吗？

虽然我知道有一个perf monitorWhen I enable Perf Monitor，但这里有一些我不知道它们是什么意思的选项。

  1. UI：60.0 fps ==> 当我使用我的应用程序时，60.0 有时会下降。
  2. X 到目前为止掺杂了 ==> 这里 x 是我的数字，它甚至达到了 150，例如：

150 dropped so far

  1. 到目前为止 X 口吃 (4+) ==> 这里 x 也在增加

喜欢：12 stutters (4+) so far

  1. JS：60.0 fps ==> 当我使用应用程序时，这里 60.0 降低了。

最后fps，react-native 中的 self 是什么？

标签： react-native

解决方案

FPS 的意思是“每秒帧数”。大多数时候，“流畅”的应用程序应该以 60fps 的速度运行。现在大多数手机都有 60hz 显示屏（这意味着它们每秒只能刷新 60 次），因此只有高端手机才能在一秒钟内显示超过 60 帧。您可以做一些事情来确保您的 RN 应用程序以最佳速度运行。

  • 您可能已经知道过“桥”（Javascript -> Native）很慢，并且会导致卡顿/低 FPS。那里有很多材料详细解释了这座桥是如何工作的，所以我不会多说。在屏幕转换或动画期间尽量减少正在完成的工作量（特别是桥接）。您可以使用InteractionManagerAPI 来执行此操作。在此处阅读更多相关信息。

  • 不要忘记阅读Performance的官方文档。

  • 如果您在打开新屏幕后立即注意到延迟，请尝试推迟渲染，直到屏幕完全过渡到视口。如何执行此操作的示例：

import { View, InteractionManager } from 'react-native';

class Example extends Component {
    constructor(props) {
        super(props);

        this.state = { ready: false };
    }

    componentDidMount() {
        // After all interactions have been finished we swich the "ready" state variable to true, and only then your component will be rendered.
        InteractionManager.runAfterInteractions(() => {
            this.setState({ ready: true });
        })
    }

    render() {
        if (!this.state.ready) { 
            return; 
        }

        // Render only when this.state.ready is true (after all interactions have been finalised);
        return (
            <View></View>
        );
    }
}

推荐阅读