Question

目前在React-Native上运行Perf会产生错误，并且程序包似乎依赖于DOM。 https://facebook.github.io/react/docs/perf.html#using-perf

但是它仍然在React-Native文档中提到过吗？ https://facebook.github.io/react-native/docs/performance.html#profiling

我至少没有成功地运行它。

Answer 1

是的，我发现了类似的问题，在我看来react-addons-perf仅适用于react，对于react native项目，您可以使用RCTRenderingPerf这是一个内置的在react native lib中的工具中。我的本机版本是"react-native": "^0.45.1"

import PerfMonitor from 'react-native/Libraries/Performance/RCTRenderingPerf';

开始测量

PerfMonitor.toggle();
PerfMonitor.start();

停止测量并打印结果

PerfMonitor.stop();

您无需显式调用print方法来打印结果，stop()已经涵盖了这一点。

您可以通过运行验证它：

...
  _setIndex(idx){
    PerfMonitor.toggle();
    PerfMonitor.start();
    this.setState({index:idx})
  }

  componentDidUpdate(){
    PerfMonitor.stop();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome to react-native {helloWorld()}</Text>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Button title="click me to see profiling in console log" onPress={()=> this._setIndex(2)}/>
      </View>
    );
  }
...

确保Remote Debug JS已开启，然后您可以在Chrome控制台上查看结果。

Answer 2

您是否尝试通过单击Show Perf Monitor在开发菜单中启用性能监视器？

Example

如何让Perf在React-Native上运行？

2 个答案: