我怎么知道我的反应生应用程序正常运行,并且没有危险



有没有一个很好的方法知道我们的反应应用程序运行良好?

尽管我知道当我启用Perf Monitor时有一个perf monitor,但这是一些我不知道它们是什么意思的选项。

  1. ui:60.0 fps ==>在这里60.0当我使用应用时,有时会脱开。
  2. x dopped to to to ==>在这里x是我的数字增加了它甚至达到150的数字,例如:

150 dropped so far

    到目前

喜欢: 12 stutters (4+) so far

  1. JS:60.0 fps ==>在这里使用App时,60.0减少了。

最后,什么是 fps在反应中自我?

fps表示"每秒帧"。大多数时候,"平滑"应用程序应以60fps运行。如今,大多数手机都具有60Hz显示屏(这意味着它们仅刷新60次(,因此只有高端手机能够在一秒钟内显示超过60帧。您可以做一些事情来确保您的RN应用程序以最佳速度运行。

  • 您可能已经知道越过"桥"(JavaScript->本地(的速度很慢,并且会导致口吃/低fps。那里有很多材料解释了这座桥的详细作用,因此我不会谈论太多。尝试最大程度地减少屏幕过渡或动画期间正在完成的工作量(特别是桥接十字(。您可以使用InteractionManager API来执行此操作。在此处阅读有关它的更多信息。

  • 不要忘记阅读有关绩效的正式文档。

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

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>
        );
    }
}

相关内容

最新更新