You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/docs/addons-perf.md
+32-1Lines changed: 32 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -14,6 +14,10 @@ next: test-utils.html
14
14
importPerffrom'react-addons-perf'// ES6
15
15
var Perf =require('react-addons-perf') // ES5 with npm
16
16
var Perf =React.addons.Perf; // ES5 with react-with-addons.js
17
+
18
+
//If Perf is not accessible from console i.e throws RefrenceError:
19
+
//Perf is not defined, create a global
20
+
window.Perf= Perf;
17
21
```
18
22
19
23
@@ -32,7 +36,7 @@ See these articles by the [Benchling Engineering Team](http://benchling.engineer
32
36
33
37
If you're benchmarking or seeing performance problems in your React apps, make sure you're testing with the [minified production build](/react/downloads.html). The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.
34
38
35
-
However, the perf tools described on this page only work when using the development build of React. Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
39
+
However, the perf tools described on this page only work when using the development build of React. If you set NODE_ENV to _production_ than it will not work. Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
36
40
37
41
### Using Perf
38
42
@@ -56,6 +60,33 @@ The following methods use the measurements returned by [`Perf.getLastMeasurement
56
60
57
61
* * *
58
62
63
+
## Example Usage:
64
+
65
+
We will take the comments example from old official tutorial. The example code is availabe on [github](https://github.com/dhyey35/react-example-for-performance/blob/master/public/scripts/example.js).
66
+
67
+
```javascript
68
+
//Using react-with-addons.js in ES5
69
+
var Perf =React.addons.Perf;
70
+
71
+
varComment=React.createClass({
72
+
rawMarkup:function() {
73
+
var md =newRemarkable();
74
+
var rawMarkup =md.render(this.props.children.toString());
Open the developer console in the browser and type `Perf.start()` than followed by the action you want to monitor eg: submitting a form. Than type `Perf.stop()` in the console and than type `Perf.getLastMeasurements()` to get the measurements .See the Reference below for more methods.
85
+
86
+

87
+
88
+
A **Live Example** of the above code is available on [react-example-for-performance](https://react-example-for-performance.herokuapp.com/)
0 commit comments