diff --git a/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js b/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js index 9f2bff3b2..acc5890a7 100644 --- a/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js +++ b/Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js @@ -32,13 +32,6 @@ if (typeof window === 'undefined') { global.window = global; } -function setUpProfile() { - if (__DEV__) { - const Systrace = require('Systrace'); - Systrace.swizzleReactPerf(); - } -} - function setUpProcess() { GLOBAL.process = GLOBAL.process || {}; GLOBAL.process.env = GLOBAL.process.env || {}; @@ -218,7 +211,6 @@ function setUpDevTools() { } } -setUpProfile(); setUpProcess(); setUpConsole(); setUpTimers(); diff --git a/Libraries/Utilities/RCTRenderingPerf.js b/Libraries/Utilities/RCTRenderingPerf.js index 3979780ba..27aee69ab 100644 --- a/Libraries/Utilities/RCTRenderingPerf.js +++ b/Libraries/Utilities/RCTRenderingPerf.js @@ -11,9 +11,11 @@ */ 'use strict'; -var ReactDefaultPerf = require('ReactDefaultPerf'); +var ReactPerf = require('ReactPerf'); +var ReactDebugTool = require('ReactDebugTool'); var invariant = require('fbjs/lib/invariant'); +var performanceNow = require('fbjs/lib/performanceNow'); type perfModule = { start: () => void; @@ -22,6 +24,22 @@ type perfModule = { var perfModules = []; var enabled = false; +var lastRenderStartTime = 0; +var totalRenderDuration = 0; + +var RCTRenderingPerfDevtool = { + onBeginLifeCycleTimer(debugID, timerType) { + if (timerType === 'render') { + lastRenderStartTime = performanceNow(); + } + }, + onEndLifeCycleTimer(debugID, timerType) { + if (timerType === 'render') { + var lastRenderDuration = performanceNow() - lastRenderStartTime; + totalRenderDuration += lastRenderDuration; + } + }, +}; var RCTRenderingPerf = { // Once perf is enabled, it stays enabled @@ -35,7 +53,8 @@ var RCTRenderingPerf = { return; } - ReactDefaultPerf.start(); + ReactPerf.start(); + ReactDebugTool.addDevtool(RCTRenderingPerfDevtool); perfModules.forEach((module) => module.start()); }, @@ -44,21 +63,14 @@ var RCTRenderingPerf = { return; } - ReactDefaultPerf.stop(); - ReactDefaultPerf.printInclusive(); - ReactDefaultPerf.printWasted(); + ReactPerf.stop(); + ReactPerf.printInclusive(); + ReactPerf.printWasted(); + ReactDebugTool.removeDevtool(RCTRenderingPerfDevtool); - var totalRender = 0; - var totalTime = 0; - var measurements = ReactDefaultPerf.getLastMeasurements(); - for (var ii = 0; ii < measurements.length; ii++) { - var render = measurements[ii].render; - for (var nodeName in render) { - totalRender += render[nodeName]; - } - totalTime += measurements[ii].totalTime; - } - console.log('Total time spent in render(): ' + totalRender + 'ms'); + console.log(`Total time spent in render(): ${totalRenderDuration.toFixed(2)} ms`); + lastRenderStartTime = 0; + totalRenderDuration = 0; perfModules.forEach((module) => module.stop()); }, diff --git a/Libraries/Utilities/Systrace.js b/Libraries/Utilities/Systrace.js index cb9dd596c..7ed2dbedd 100644 --- a/Libraries/Utilities/Systrace.js +++ b/Libraries/Utilities/Systrace.js @@ -28,26 +28,50 @@ var TRACE_TAG_JSC_CALLS = 1 << 27; var _enabled = false; var _asyncCookie = 0; -var _ReactPerf = null; -function ReactPerf() { - if (!_ReactPerf) { - _ReactPerf = require('ReactPerf'); +var _ReactDebugTool = null; +var _ReactComponentTreeDevtool = null; +function ReactDebugTool() { + if (!_ReactDebugTool) { + _ReactDebugTool = require('ReactDebugTool'); } - return _ReactPerf; + return _ReactDebugTool; } +function ReactComponentTreeDevtool() { + if (!_ReactComponentTreeDevtool) { + _ReactComponentTreeDevtool = require('ReactComponentTreeDevtool'); + } + return _ReactComponentTreeDevtool; +} + +var ReactSystraceDevtool = { + onBeginReconcilerTimer(debugID, timerType) { + var displayName = ReactComponentTreeDevtool().getDisplayName(debugID); + Systrace.beginEvent(`ReactReconciler.${timerType}(${displayName})`); + }, + onEndReconcilerTimer(debugID, timerType) { + Systrace.endEvent(); + }, + onBeginLifeCycleTimer(debugID, timerType) { + var displayName = ReactComponentTreeDevtool().getDisplayName(debugID); + Systrace.beginEvent(`${displayName}.${timerType}()`); + }, + onEndLifeCycleTimer(debugID, timerType) { + Systrace.endEvent(); + }, +}; var Systrace = { setEnabled(enabled: boolean) { if (_enabled !== enabled) { if (enabled) { global.nativeTraceBeginLegacy && global.nativeTraceBeginLegacy(TRACE_TAG_JSC_CALLS); + ReactDebugTool().addDevtool(ReactSystraceDevtool); } else { global.nativeTraceEndLegacy && global.nativeTraceEndLegacy(TRACE_TAG_JSC_CALLS); + ReactDebugTool().removeDevtool(ReactSystraceDevtool); } } _enabled = enabled; - - ReactPerf().enableMeasure = enabled; }, /** @@ -103,24 +127,6 @@ var Systrace = { } }, - reactPerfMeasure(objName: string, fnName: string, func: any): any { - return function (component) { - if (!_enabled) { - return func.apply(this, arguments); - } - - var name = objName === 'ReactCompositeComponent' && this.getName() || ''; - Systrace.beginEvent(`${objName}.${fnName}(${name})`); - var ret = func.apply(this, arguments); - Systrace.endEvent(); - return ret; - }; - }, - - swizzleReactPerf() { - ReactPerf().injection.injectMeasure(Systrace.reactPerfMeasure); - }, - /** * Relay profiles use await calls, so likely occur out of current stack frame * therefore async variant of profiling is used diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js index 77de77232..851900832 100644 --- a/Libraries/react-native/react-native.js +++ b/Libraries/react-native/react-native.js @@ -195,7 +195,7 @@ if (__DEV__) { if (__DEV__) { addonWarn('Perf', 'react-addons-perf'); } - return require('ReactDefaultPerf'); + return require('ReactPerf'); } }); Object.defineProperty(ReactNative.addons, 'TestUtils', { diff --git a/package.json b/package.json index e775bdd4f..a5749f736 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "react-native": "local-cli/wrong-react-native.js" }, "peerDependencies": { - "react": "15.0.3-alpha.1" + "react": "15.1.0-alpha.1" }, "dependencies": { "absolute-path": "^0.0.0", @@ -187,7 +187,7 @@ "flow-bin": "0.24.0", "jest-cli": "11.0.2", "portfinder": "0.4.0", - "react": "15.0.3-alpha.1", + "react": "^15.1.0-alpha.1", "shelljs": "0.6.0" } }