diff --git a/docs/addons-perf.md b/docs/addons-perf.md index aa5dfd2a..6acba063 100644 --- a/docs/addons-perf.md +++ b/docs/addons-perf.md @@ -14,6 +14,11 @@ next: test-utils.html import Perf from 'react-addons-perf' // ES6 var Perf = require('react-addons-perf') // ES5 with npm var Perf = React.addons.Perf; // ES5 with react-with-addons.js + +// Usually importing Perf in ES6 with a module bundler +// doesn't make Perf available as global and throws a +// ReferenceError so create a global +window.Perf = Perf; ``` @@ -57,6 +62,34 @@ The following methods use the measurements returned by [`Perf.getLastMeasurement * * * +## Example Usage + +We will take simple example of a form which can be used to submit comments and then listing all comments. The example code is [available on GitHub](https://github.com/dhyey35/react-example-for-performance/blob/master/public/scripts/example.js). + +```javascript +import { Component } from 'react' +import Perf from 'react-addons-perf' + +const Comment = (props) => ( +
+

+ {props.author} +

+ {props.children.toString()} +
+ ) +//code... + +ReactDOM.render( + , + document.getElementById('content') +); +``` +Open the developer console in the browser and type `Perf.start()`. Then perform the action you want to monitor, like submitting a form. Finally, type `Perf.stop()` and `Perf.getLastMeasurements()` to get the measurements. See the Reference below for more methods. + +![](/react/img/docs/addons-perf.png) + +* * * ## Reference ### `start()` @@ -145,3 +178,4 @@ Perf.printDOM(measurements) ``` This method has been renamed to [`printOperations()`](#printoperations). Currently `printDOM()` still exists as an alias but it prints a deprecation warning and will eventually be removed. + diff --git a/downloads/perf-tutorial.html b/downloads/perf-tutorial.html new file mode 100644 index 00000000..b09f0302 --- /dev/null +++ b/downloads/perf-tutorial.html @@ -0,0 +1,218 @@ + + + + + React Perf Tutorial + + + + + + +
+ Fire up your console ( Ctrl + Shift + i ) and type Perf.start() + then post a comment below and type Perf.stop() followed by Perf.printWasted(). + See documentation for more details. Complete source code of this demo can be found on github. +
+
+ + + diff --git a/img/docs/react-perf.png b/img/docs/react-perf.png new file mode 100644 index 00000000..08c99f81 Binary files /dev/null and b/img/docs/react-perf.png differ