React-NativeでPerfの作業を行うには？

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

[パフォーマンスモニタを表示する]をクリックして、[dev]メニューの[パフォーマンスモニタ]を有効にしてみましたか？

Example

Answer 2

はい、私は同様の問題を発見し、それは私には思えるreact-addons-perfのみreact上で動作し、react nativeプロジェクトのために、あなたはreact native libに内蔵されたツールであるRCTRenderingPerfを使用することができます。私は、ネイティブ版を反応"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が上であることを確認し、その後、あなたはクロームコンソールに結果を見ることができます。